/* Diana companion. Fixed layer; diana.js sets translate(x, y) where y is the ground line. */
.diana {
  --diana-h: 150px;      /* her standing height */
  --diana-gap: 12px;     /* ground line distance from the bottom of the screen */
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 50;
  pointer-events: none;
  will-change: transform;
  transition: opacity 160ms ease-out;
}
@media (min-width: 768px) {
  .diana { --diana-h: 260px; --diana-gap: 24px; }
}
.diana.is-hidden { opacity: 0; }

.diana__fx { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.diana__img {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: none;
  user-select: none;
}
/* One shadow for every frame, so it never jumps between sheets. */
.diana__shadow {
  position: absolute;
  left: 0;
  top: -0.5px;
  width: calc(var(--diana-h) * 0.36);
  height: calc(var(--diana-h) * 0.05);
  transform: translate(-50%, -40%);
  border-radius: 50%;
  background: rgb(36 23 15 / 0.22);
  filter: blur(3px);
  transition: opacity 120ms ease-out;
}
.diana.is-air .diana__shadow,
.diana.is-sitting .diana__shadow { opacity: 0; }

/* Click target: her body only, so the transparent parts of the image never block the page. */
.diana__hit {
  position: absolute;
  left: calc(var(--diana-h) * -0.14);
  top: calc(var(--diana-h) * -0.95);
  width: calc(var(--diana-h) * 0.28);
  height: calc(var(--diana-h) * 0.9);
  pointer-events: auto;
  cursor: pointer;
}

/* Small reactions. Transform only, short. */
.diana__fx.is-squash { animation: diana-squash 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.diana__fx.is-nod { animation: diana-nod 240ms ease-out; }
.diana__fx.is-shake { animation: diana-shake 420ms ease-out; }
@keyframes diana-squash { 0% { transform: scale(1.06, 0.9); } 100% { transform: none; } }
@keyframes diana-nod { 50% { transform: translateY(3px); } }
@keyframes diana-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* The closing button grows a seat for her to sit on (SXLVX does the same on mobile). */
[data-diana-cta] { transition: padding-right 220ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-diana-cta].has-diana { padding-right: calc(var(--diana-seat, 64px) + 1em); }

@media (prefers-reduced-motion: reduce) {
  .diana, .diana__shadow, [data-diana-cta] { transition: none; }
  .diana__fx { animation: none !important; }
}

/* Room a layout must leave above the closing button for her to sit without covering
   anything (her seated height). Use it as the gap between the CTA and what is above it. */
:root { --diana-sit-room: 112px; }
@media (min-width: 768px) { :root { --diana-sit-room: 192px; } }