/* First-frame interaction
 * -----------------------
 * Vio is the interaction. The visible beacon is intentionally small while the
 * button follows his full body, so a touch can land naturally without turning
 * the character into a conventional card or hotspot diagram. Dive Buddy is a
 * late hint, never a competing hero layer or a page-wide assistant. */

.stage-interaction {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.stage.stage-interaction-away .stage-interaction {
  opacity: 0;
  pointer-events: none;
}

.stage-vio-hotspot {
  appearance: none;
  position: absolute;
  left: 57%;
  bottom: 0;
  width: clamp(280px, 38vw, 520px);
  height: 84svh;
  padding: 0;
  pointer-events: auto;
  border: 0;
  border-radius: 48% 48% 16% 16% / 25% 25% 10% 10%;
  color: #f7f7f8;
  background: transparent;
  translate: -50% 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stage:not([data-character="vio"]) .stage-vio-hotspot {
  pointer-events: none;
}

/* The phone-specific map is enabled at the mobile breakpoint below. Keeping it
   out of the desktop layout preserves the original pointer geometry exactly. */
.stage-vio-touchmap {
  display: none;
}

.stage-vio-beacon {
  position: absolute;
  top: 19%;
  left: 48%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  opacity: 0;
  border: 1px solid rgba(246, 247, 248, 0.7);
  border-radius: 50%;
  background: rgba(12, 11, 16, 0.34);
  box-shadow:
    0 0 0 1px rgba(12, 11, 16, 0.2),
    0 6px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  translate: -50% -50%;
  scale: 0.88;
  transition:
    opacity 220ms ease,
    scale 300ms var(--ease-dive);
}

.stage-vio-beacon::before,
.stage-vio-beacon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(246, 247, 248, 0.58);
  border-radius: inherit;
  opacity: 0;
}

.stage-vio-beacon::after {
  animation-delay: 620ms !important;
}

.stage-vio-beacon i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6f7f8;
  box-shadow: 0 0 12px rgba(246, 247, 248, 0.82);
}

.stage.stage-vio-invited[data-character="vio"] .stage-vio-beacon,
.stage-vio-hotspot:hover .stage-vio-beacon,
.stage-vio-hotspot:focus-visible .stage-vio-beacon {
  opacity: 1;
  scale: 1;
}

.stage.stage-vio-invited:not(.stage-vio-reacting) .stage-vio-beacon::before,
.stage.stage-vio-invited:not(.stage-vio-reacting) .stage-vio-beacon::after {
  animation: stage-vio-pulse 1.45s ease-out 2;
}

@keyframes stage-vio-pulse {
  0% {
    opacity: 0;
    scale: 0.86;
  }
  18% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    scale: 2.35;
  }
}

.stage-vio-hint {
  position: absolute;
  top: calc(19% + 28px);
  left: 48%;
  min-width: max-content;
  padding: 7px 10px;
  opacity: 0;
  border: 1px solid rgba(246, 247, 248, 0.16);
  border-radius: 999px;
  color: rgba(246, 247, 248, 0.86);
  background: rgba(12, 11, 16, 0.66);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  translate: -50% 5px;
  transition:
    opacity 180ms ease,
    translate 240ms var(--ease-dive);
}

.stage.stage-vio-invited[data-character="vio"] .stage-vio-hint,
.stage-vio-hotspot:hover .stage-vio-hint,
.stage-vio-hotspot:focus-visible .stage-vio-hint {
  opacity: 1;
  translate: -50% 0;
}

.stage-vio-hotspot:focus-visible {
  outline: 0;
}

.stage-vio-hotspot:focus-visible .stage-vio-beacon {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Created at the exact pointer position. A single neutral ripple gives touch
   acknowledgement without covering the actor in a coloured special effect. */
.stage-touch-ripple {
  position: absolute;
  z-index: 2;
  left: var(--stage-touch-x);
  top: var(--stage-touch-y);
  width: 28px;
  height: 28px;
  pointer-events: none;
  border: 1px solid rgba(246, 247, 248, 0.84);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10, 9, 14, 0.18);
  translate: -50% -50%;
  animation: stage-touch-ripple 620ms var(--ease-dive) forwards;
}

@keyframes stage-touch-ripple {
  0% {
    opacity: 0.9;
    scale: 0.5;
  }
  100% {
    opacity: 0;
    scale: 4.6;
  }
}

/* Resting and reaction artwork must be mutually exclusive. Fading one person
   over another creates doubled hands and silhouettes, so the actor layers swap
   instantly while the touch ripple and response bubble carry the transition. */
.stage-inner.stage-reaction-pose {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.stage-idle-video,
.stage-reaction-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: brightness(0.68) contrast(1.08) saturate(0.96);
}

.stage.stage-vio-idle-playing[data-character="vio"]:not(.stage-vio-reacting) .stage-inner:not(.stage-reaction-pose),
.stage.stage-vio-idle-playing[data-character="vio"]:not(.stage-vio-reacting) .stage-figure,
.stage.stage-vio-idle-playing[data-character="vio"]:not(.stage-vio-reacting) .stage-webgl {
  opacity: 0 !important;
  visibility: hidden;
}

.stage.stage-vio-idle-playing[data-character="vio"]:not(.stage-vio-reacting) .stage-idle-video {
  opacity: 1;
  visibility: visible;
}

.stage.stage-vio-reacting[data-character="vio"] .stage-inner:not(.stage-reaction-pose),
.stage.stage-vio-reacting[data-character="vio"] .stage-figure,
.stage.stage-vio-reacting[data-character="vio"] .stage-webgl,
.stage.stage-vio-reacting[data-character="vio"] .stage-idle-video {
  opacity: 0 !important;
  visibility: hidden;
}

.stage.stage-vio-reacting[data-character="vio"] .stage-inner.stage-reaction-pose {
  opacity: 1 !important;
  visibility: visible;
}

.stage.stage-vio-video-reacting[data-character="vio"] .stage-inner.stage-reaction-pose {
  opacity: 0 !important;
  visibility: hidden;
}

.stage.stage-vio-video-reacting[data-character="vio"] .stage-reaction-video.is-active {
  opacity: 1;
  visibility: visible;
}

.stage-vio-status {
  position: absolute;
  z-index: 3;
  left: 64%;
  top: 27%;
  min-width: max-content;
  max-width: 16ch;
  margin: 0;
  padding: 9px 12px;
  opacity: 0;
  border: 1px solid rgba(246, 247, 248, 0.18);
  border-radius: 12px 12px 12px 3px;
  color: #f6f7f8;
  background: rgba(12, 11, 16, 0.78);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-body);
  font-size: var(--t-13);
  line-height: var(--lh-13);
  font-weight: 600;
  translate: -50% 8px;
  transition:
    opacity 180ms ease,
    translate 260ms var(--ease-dive);
}

.stage-vio-status::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-left: 1px solid rgba(246, 247, 248, 0.18);
  border-bottom: 1px solid rgba(246, 247, 248, 0.18);
  background: rgba(12, 11, 16, 0.78);
  rotate: 45deg;
}

.stage.stage-vio-reacting .stage-vio-status {
  opacity: 1;
  translate: -50% 0;
}

.stage.stage-vio-reacting .stage-vio-beacon,
.stage.stage-vio-reacting .stage-vio-hint {
  opacity: 0;
}

/* Dive Buddy, reduced to one quiet late hint. It exists only inside the first
   frame and disappears as soon as the visitor responds or starts to leave. */
.stage-buddy-nudge {
  appearance: none;
  position: absolute;
  z-index: 4;
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 3vw, 36px);
  min-height: 52px;
  padding: 4px 14px 4px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(246, 247, 248, 0.14);
  border-radius: 16px 16px 4px 16px;
  color: #f6f7f8;
  background: rgba(12, 11, 16, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  text-align: left;
  translate: 0 8px;
  cursor: pointer;
  transition:
    opacity 220ms ease,
    translate 280ms var(--ease-dive),
    border-color 180ms ease;
}

.stage.stage-buddy-ready:not(.stage-vio-reacting)[data-character="vio"] .stage-buddy-nudge {
  pointer-events: auto;
  opacity: 1;
  translate: 0 0;
}

.stage-buddy-nudge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.stage-buddy-crop {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 48% 26%, #fff 0%, #e9e9ef 72%);
}

.stage-buddy-crop img {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 47px;
  height: auto;
  max-width: none;
  translate: -50% 0;
}

.stage-buddy-nudge > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stage-buddy-nudge small {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 247, 248, 0.5);
}

.stage-buddy-nudge strong {
  font-family: var(--font-body);
  font-size: var(--t-12);
  line-height: 1.1;
  font-weight: 650;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .stage-vio-hotspot:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='6' fill='none' stroke='%23f6f7f8' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='1.8' fill='%23f6f7f8'/%3E%3C/svg%3E")
        14 14,
      pointer;
  }

  .stage-buddy-nudge:hover {
    border-color: rgba(246, 247, 248, 0.34);
    translate: 0 -2px;
  }
}

@media (max-width: 760px) {
  .stage-vio-hotspot {
    left: 68%;
    width: 58vw;
    min-width: 200px;
    max-width: 260px;
    height: 66svh;
    pointer-events: none;
  }

  .stage-vio-touchmap {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .stage-vio-touch-zone {
    appearance: none;
    position: absolute;
    z-index: 1;
    display: block;
    padding: 0;
    pointer-events: auto;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    translate: -50% -50%;
  }

  /* These regions follow Vio's rendered silhouette in the mobile cover crop.
     Their overlap is intentional: the smaller, more specific face and mic
     targets sit above the forgiving body target. */
  .stage-vio-touch-zone--body {
    left: 76%;
    top: 70%;
    width: clamp(176px, 49vw, 232px);
    height: 50%;
    border-radius: 45% 45% 18% 18% / 24% 24% 12% 12%;
  }

  .stage-vio-touch-zone--mic {
    z-index: 2;
    left: 53%;
    top: 43%;
    width: clamp(76px, 22vw, 100px);
    height: 31%;
    border-radius: 999px;
    rotate: -12deg;
  }

  .stage-vio-touch-zone--face {
    z-index: 3;
    left: 74%;
    top: 32%;
    width: clamp(96px, 29vw, 128px);
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .stage:not([data-character="vio"]) .stage-vio-touch-zone,
  .stage.stage-interaction-away .stage-vio-touch-zone {
    pointer-events: none;
  }

  .stage-vio-touch-zone:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* 8% higher than the desktop anchor: at 18% the hint pill landed on the
     logline ("Ten minutes before the set…") on a 390px viewport. This puts
     beacon and pill on Vio's torso, in the clear band between the episode
     title and the S1·E03 line. */
  .stage-vio-beacon {
    top: 10%;
    left: 49%;
  }

  .stage-vio-hint {
    top: calc(10% + 28px);
    left: 49%;
  }

  .stage-vio-status {
    top: 27%;
    right: 10px;
    bottom: auto;
    left: auto;
    translate: 0 8px;
  }

  .stage.stage-vio-reacting .stage-vio-status {
    translate: 0 0;
  }

  .stage-buddy-nudge {
    right: 12px;
    bottom: 14px;
    min-height: 48px;
    padding-right: 11px;
  }

  .stage-buddy-crop {
    width: 40px;
    height: 40px;
  }

  .stage-buddy-crop img {
    width: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-interaction,
  .stage-vio-beacon,
  .stage-vio-hint,
  .stage-vio-status,
  .stage-buddy-nudge,
  .stage-inner.stage-reaction-pose,
  .stage-idle-video,
  .stage-reaction-video {
    transition: none !important;
  }

  .stage-idle-video,
  .stage-reaction-video {
    display: none;
  }

  .stage-vio-beacon::before,
  .stage-vio-beacon::after,
  .stage-touch-ripple {
    animation: none !important;
  }

  .stage.stage-vio-invited[data-character="vio"] .stage-vio-beacon::before {
    opacity: 0.42;
    scale: 1.28;
  }
}