/* A preview-only full-screen presentation. Media/timing choices live in secret-encounter-preview.js. */
#secret-encounter-preview-overlay.secret-encounter-scrim {
  background: rgba(var(--encounter-ink-rgb), 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: encounter-scrim-in var(--encounter-tint-ms, 1000ms) ease-out both;
}

#secret-encounter-preview-floater.secret-encounter-scene {
  position: fixed;
  inset: 0;
  z-index: 59;
  width: 100%;
  height: var(--app-height, 100svh);
  transform: none;
  overflow: hidden;
  pointer-events: none;
  color: var(--creme);
  --encounter-figure-bottom: calc(var(--encounter-response-height, 72px) + var(--viewport-bottom-offset) - var(--encounter-feet-overlap, 22px));
}

#secret-encounter-preview-floater .secret-encounter-cancel {
  position: absolute;
  top: max(12px, calc(var(--safe-top) + 12px));
  right: max(12px, calc(var(--safe-right) + 12px));
  z-index: 3;
  pointer-events: auto;
}

#secret-encounter-preview-floater .secret-encounter-stage {
  position: absolute;
  inset: 0;
  max-width: 520px;
  margin-inline: auto;
  pointer-events: auto;
}

#secret-encounter-preview-floater .secret-encounter-glow {
  position: absolute;
  width: 100%;
  height: 320px;
  max-height: 70%;
  left: 0;
  bottom: -50px;
  background: radial-gradient(ellipse at 50% 70%, rgba(var(--encounter-glow-rgb), 0.65), transparent 70%);
  opacity: 0;
}

#secret-encounter-preview-floater.is-revealing .secret-encounter-glow {
  opacity: 1;
  animation: encounter-glow-in var(--encounter-reveal-ms, 1800ms) ease-out both;
}

/* Ground contact beneath both feet; the front smoke still passes over it. */
#secret-encounter-preview-floater .secret-encounter-ground-shadow {
  position: absolute;
  left: 50%;
  bottom: var(--encounter-figure-bottom);
  width: min(60vw, calc(var(--encounter-figure-width, 140px) * 1.25));
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(var(--encounter-ink-rgb), 0.9) 0%, rgba(var(--encounter-ink-rgb), 0.55) 38%, rgba(var(--encounter-ink-rgb), 0.15) 62%, transparent 78%);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

#secret-encounter-preview-floater.is-revealing .secret-encounter-ground-shadow {
  opacity: 1;
  animation: encounter-ground-shadow-in var(--encounter-reveal-ms, 1800ms) ease-out both;
}

#secret-encounter-preview-floater .secret-encounter-figure {
  position: absolute;
  left: 50%;
  bottom: var(--encounter-figure-bottom);
  width: min(48vw, var(--encounter-figure-width, 140px));
  height: auto;
  max-height: 48svh;
  object-fit: contain;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  opacity: 0;
}

#secret-encounter-preview-floater.is-revealing .secret-encounter-figure {
  opacity: 1;
  animation: encounter-figure-in var(--encounter-reveal-ms, 1800ms) ease-out both,
    encounter-figure-idle var(--encounter-figure-idle-ms, 7200ms) var(--encounter-reveal-ms, 1800ms) ease-in-out infinite;
}

#secret-encounter-preview-floater .secret-encounter-smoke {
  position: absolute;
  left: 50%;
  bottom: -90px;
  width: 145%;
  height: auto;
  opacity: 0;
}

#secret-encounter-preview-floater.is-revealing .secret-encounter-smoke {
  opacity: 0.45;
  animation: encounter-smoke-in var(--encounter-reveal-ms, 1800ms) ease-out both, encounter-smoke-drift var(--encounter-drift-ms, 7000ms) var(--encounter-reveal-ms, 1800ms) ease-in-out infinite alternate;
}

#secret-encounter-preview-floater .secret-encounter-smoke--front {
  bottom: -280px;
  width: 150%;
}

#secret-encounter-preview-floater.is-revealing .secret-encounter-smoke--front {
  opacity: 0.28;
  animation-direction: normal, alternate-reverse;
}

#secret-encounter-preview-floater .secret-encounter-bubble {
  --speech-line: var(--encounter-key-rim);
  --speech-tail-x: 48%;
  position: absolute;
  left: 50%;
  bottom: calc(var(--encounter-figure-bottom) + var(--encounter-figure-height, 210px) + 12px);
  width: max-content;
  max-width: min(calc(100% - 40px), 300px);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out;
}

#secret-encounter-preview-floater.is-speaking .secret-encounter-bubble {
  opacity: 1;
  visibility: visible;
}

#secret-encounter-preview-floater .secret-encounter-speech-pending {
  visibility: hidden;
}

#secret-encounter-preview-floater .secret-encounter-response-block {
  position: absolute;
  background: var(--encounter-surface);
  visibility: hidden;
  pointer-events: none;
  /* Keep .form-actions' horizontal centering; only move vertically into the scene. */
  translate: 0 calc(100% + var(--viewport-bottom-offset));
  transition: translate var(--encounter-response-enter-ms, 450ms) ease-out;
}

#secret-encounter-preview-floater.is-ready .secret-encounter-response-block {
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
}

body.is-keyboard-open #secret-encounter-preview-floater .secret-encounter-response-block {
  display: none;
}

@keyframes encounter-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes encounter-glow-in {
  from { opacity: 0; }
  45% { opacity: 0.15; }
  to { opacity: 1; }
}

@keyframes encounter-ground-shadow-in {
  from { opacity: 0; transform: translateX(-50%) scale(var(--encounter-figure-start-scale, 0.68)); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes encounter-figure-in {
  from { opacity: 0; transform: translateX(-50%) scale(var(--encounter-figure-start-scale, 0.68)); }
  30% { opacity: 0.45; }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Two quiet breaths per slow weight shift. Start from the reveal's final pose, anchored at the feet. */
@keyframes encounter-figure-idle {
  0%, 50%, 100% { transform: translate(-50%, 0) rotate(0deg) scaleY(1); }
  25% { transform: translate(calc(-50% + 0.7px), 0) rotate(0.35deg) scaleY(1.012); }
  75% { transform: translate(calc(-50% - 0.7px), 0) rotate(-0.35deg) scaleY(1.012); }
}

@keyframes encounter-smoke-in {
  from { opacity: 0; transform: translate(-50%, 40px) scale(0.85); }
  to { transform: translate(-50%, 0) scale(1); }
}

@keyframes encounter-smoke-drift {
  from { transform: translate(-52%, 0) scale(1); }
  to { transform: translate(-48%, -10px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  #secret-encounter-preview-overlay.secret-encounter-scrim,
  #secret-encounter-preview-floater.is-revealing .secret-encounter-glow,
  #secret-encounter-preview-floater.is-revealing .secret-encounter-ground-shadow,
  #secret-encounter-preview-floater.is-revealing .secret-encounter-figure,
  #secret-encounter-preview-floater.is-revealing .secret-encounter-smoke {
    animation: none;
  }
  #secret-encounter-preview-floater .secret-encounter-smoke {
    transform: translateX(-50%);
  }
  #secret-encounter-preview-floater .secret-encounter-bubble,
  #secret-encounter-preview-floater .secret-encounter-response-block {
    transition: none;
  }
}