/* ════════════════════════════════════════════════════════════
   sr-demo.css — One-Click Demo player
   ────────────────────────────────────────────────────────────
   Self-contained styles for the fullscreen six-segment immersive
   demo. Mounts as a fixed overlay above all page content. Uses
   the same color tokens as the rest of the site so it inherits
   the IP's visual language without any duplication.
═══════════════════════════════════════════════════════════ */

/* ── The full-screen overlay ─────────────────────────────── */
.sr-demo {
  position: fixed; inset: 0; z-index: 11000;
  background: #000;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
  display: flex; flex-direction: column;
  cursor: crosshair;
  /* The root reset — keep the demo isolated from page font defaults */
  font-family: var(--serif), Georgia, serif;
  color: #f0eee6;
}
.sr-demo.on {
  opacity: 1; visibility: visible;
  transition: opacity .8s ease, visibility 0s linear 0s;
}

/* ── Image stage. The three image layers are stacked and we
   crossfade them by toggling opacity. This is much smoother
   than swapping the src on a single <img>. ─────────────── */
.sr-demo-stage {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  background: #000;
}
.sr-demo-stage .layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform 8s ease-out;
  transform: scale(1.04);
  overflow: hidden;
}
.sr-demo-stage .layer.show {
  opacity: 1;
  /* Slow Ken Burns drift while the layer is visible */
  transform: scale(1.10);
}
/* The actual media element inside each layer — either a <video>
   or a <div> with a background-image. Both fill the layer
   completely with object-fit/cover semantics. */
.sr-demo-stage .layer .sr-demo-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Videos also need explicit object-fit: cover, since they don't
     inherit it from the parent's background properties. */
  object-fit: cover;
}
/* A subtle vignette + bottom darkening so text stays legible */
.sr-demo-stage::after {
  content: ''; position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.78) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
}

/* ── The cinema-style text overlay (the big quote) ───────────
   Each segment's quote is now structured as two stacked lines:
   .q-l1 — the setup, in bone-white
   .q-l2 — the punchline, in the segment's faction color
   The second line fades in a beat after the first so the line
   lands as dialogue rather than as a single block of text.
   ─────────────────────────────────────────────────────────── */
.sr-demo-text {
  position: absolute; left: 0; right: 0;
  top: 34%;
  z-index: 5;
  text-align: center;
  padding: 0 8vw;
  pointer-events: none;
}
.sr-demo-text .quote {
  /* Use a column flex layout so q-l1 and q-l2 stack as two
     visual lines without needing a <br>. The two spans inherit
     the same typography but get colored separately. */
  display: flex; flex-direction: column;
  align-items: center;
  gap: .25em;
  font-family: var(--serif), Georgia, serif;
  font-weight: 300;
  font-size: clamp(30px, 5.2vw, 72px);
  line-height: 1.18;
  letter-spacing: -.008em;
  text-shadow: 0 2px 26px rgba(0,0,0,.96), 0 0 64px rgba(0,0,0,.5);
  max-width: 1100px;
  margin: 0 auto;
}
.sr-demo-text .quote .q-l1,
.sr-demo-text .quote .q-l2 {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
/* Setup line: clean bone-white */
.sr-demo-text .quote .q-l1 {
  color: #f0eee6;
  font-weight: 300;
}
/* Punchline: takes the faction's accent color, slightly heavier
   weight so it feels like a verdict landing after the setup. */
.sr-demo-text .quote .q-l2 {
  font-weight: 400;
  letter-spacing: -.005em;
}
.sr-demo[data-faction="anina"] .quote .q-l2 { color: #e8c887; }
.sr-demo[data-faction="asusa"] .quote .q-l2 { color: #cce0ee; }
.sr-demo[data-faction="seam"]  .quote .q-l2 { color: #e29ab8; }
/* Reveal: fade in line 1 at .3s, line 2 at .9s. Producer's eye
   tracks the whole line in two beats, like a film cut. */
.sr-demo-text.show .quote .q-l1 {
  opacity: 1; transform: translateY(0);
  transition-delay: .3s;
}
.sr-demo-text.show .quote .q-l2 {
  opacity: 1; transform: translateY(0);
  transition-delay: .9s;
}

/* ── The narrator caption (smaller, monospaced, top of screen) ── */
.sr-demo-narrator {
  position: absolute; top: 28px; left: 50%;
  transform: translate(-50%, -10px);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: rgba(8,11,20,.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,176,106,.25);
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(240,238,230,.82);
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  max-width: 88vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-demo-narrator.show {
  opacity: 1; transform: translate(-50%, 0);
}
.sr-demo-narrator-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c8487a;
  box-shadow: 0 0 8px rgba(200,72,122,.7);
  animation: srdNarPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes srdNarPulse {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.2); }
}
.sr-demo-narrator-text {
  display: inline-block;
  white-space: normal;
  text-overflow: clip;
}

/* ── Bottom controls bar ─────────────────────────────────── */
.sr-demo-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 30px 40px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
}

/* Progress dots — six small circles, one per segment */
.sr-demo-dots {
  display: flex; gap: 10px; align-items: center;
}
.sr-demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: all .3s ease;
  cursor: crosshair;
}
.sr-demo-dot.done   { background: rgba(212,176,106,.55); }
.sr-demo-dot.active {
  background: #d4b06a;
  width: 22px; border-radius: 4px;
  box-shadow: 0 0 12px rgba(212,176,106,.65);
}

/* The control buttons (prev / play-pause / next / exit) */
.sr-demo-btns {
  display: flex; gap: 10px;
}
.sr-demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(8,11,20,.6);
  border: 1px solid rgba(212,176,106,.32);
  color: rgba(240,238,230,.85);
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  cursor: crosshair;
  transition: all .25s ease;
  -webkit-appearance: none; appearance: none;
}
.sr-demo-btn:hover {
  background: rgba(212,176,106,.14);
  border-color: #d4b06a;
  color: #f0eee6;
}
.sr-demo-btn.exit {
  border-color: rgba(255,255,255,.18);
  color: rgba(240,238,230,.5);
}
.sr-demo-btn.exit:hover {
  border-color: #c8487a;
  color: #c8487a;
  background: rgba(200,72,122,.08);
}

/* Segment counter ("01 / 06") shown at left of controls */
.sr-demo-counter {
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .26em;
  color: rgba(212,176,106,.55);
  text-transform: uppercase;
}
.sr-demo-counter strong {
  color: #d4b06a;
  font-weight: 400;
}

/* ── Final segment: the closing screen ─────────────────────
   Per the brief: when the demo ends, the player shows
   "Still Running. 未完待续." in large gold letters, then
   auto-returns to the homepage. The line gently glows so
   the producer's last frame of attention is on the IP's
   identity, not on a button. ─────────────────────────────── */
.sr-demo-finale {
  position: absolute; inset: 0; z-index: 20;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(28,20,8,.5) 0%, rgba(2,2,3,1) 70%),
    #020203;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 8vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.sr-demo-finale.show {
  opacity: 1; visibility: visible;
  transition: opacity 1.4s ease, visibility 0s linear 0s;
}
/* The finale title — single line, gold, large, with a slow
   breathing glow so it never sits dead on screen. */
.sr-demo-finale-title {
  font-family: var(--serif), Georgia, serif;
  font-weight: 300;
  font-size: clamp(40px, 7.2vw, 108px);
  letter-spacing: -.012em;
  color: #d4b06a;
  line-height: 1.06;
  margin-bottom: 28px;
  text-shadow:
    0 0 30px rgba(212,176,106,.5),
    0 0 80px rgba(212,176,106,.25);
  animation: srdFinaleGlow 4.2s ease-in-out infinite;
}
@keyframes srdFinaleGlow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(212,176,106,.5), 0 0 80px rgba(212,176,106,.25);
    opacity: .92;
  }
  50% {
    text-shadow: 0 0 50px rgba(212,176,106,.7), 0 0 120px rgba(212,176,106,.35);
    opacity: 1;
  }
}
.sr-demo-finale-tagline {
  font-family: var(--serif), Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(15px, 1.7vw, 20px);
  color: rgba(240,238,230,.55);
  margin-bottom: 48px;
  max-width: 560px;
}
/* The auto-return countdown — a thin gold rule that fills from
   left to right over 5 seconds, then the player auto-closes
   and the homepage reappears underneath. */
.sr-demo-finale-countdown {
  position: relative;
  width: clamp(160px, 24vw, 280px);
  height: 1px;
  margin: 0 auto 32px;
  background: rgba(212,176,106,.18);
  overflow: hidden;
}
.sr-demo-finale-countdown::before {
  content: '';
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(to right, transparent, #d4b06a 60%, #f0d68a);
  box-shadow: 0 0 12px rgba(212,176,106,.7);
}
.sr-demo-finale.show .sr-demo-finale-countdown::before {
  animation: srdCountdown 5s linear forwards;
}
@keyframes srdCountdown {
  to { inset: 0 0 0 0; }
}
.sr-demo-finale-countdown-label {
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(212,176,106,.4);
  margin-bottom: 12px;
}
.sr-demo-finale-cta {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 20px 36px;
  background: rgba(212,176,106,.06);
  border: 1px solid rgba(212,176,106,.4);
  color: #d4b06a;
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none;
  cursor: crosshair;
  transition: all .35s ease;
}
.sr-demo-finale-cta:hover {
  background: rgba(212,176,106,.16);
  border-color: #d4b06a;
  box-shadow: 0 0 40px rgba(212,176,106,.28);
}

/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 720px) {
  .sr-demo-narrator {
    top: 16px;
    font-size: 9px; letter-spacing: .18em;
    padding: 8px 12px;
    max-width: 92vw;
  }
  .sr-demo-text { top: 32%; padding: 0 5vw; }
  .sr-demo-text .quote { font-size: clamp(22px, 6vw, 38px); }
  .sr-demo-controls { padding: 18px 16px; flex-direction: column; gap: 14px; }
  .sr-demo-counter { order: -1; }
  .sr-demo-btn { font-size: 9px; padding: 8px 12px; letter-spacing: .18em; }
}

/* ── Demo overlay language switcher ───────────────────────
   The demo overlay covers the entire viewport, which means
   the homepage's top-right language button gets hidden while
   the demo is playing. This corner button lives ABOVE the
   overlay (z-index high) so the user can always toggle EN/中文
   even mid-segment. Clicking calls toggleLang() which fires
   onLangChange → refreshText() — no playback reset. */
.sr-demo-lang-corner {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 30;
  pointer-events: auto;
}
.sr-demo-lang-btn {
  font-family: var(--mono), 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #d4b06a;
  background: rgba(5,8,16,.7);
  border: 1px solid rgba(212,176,106,.5);
  padding: 9px 16px;
  cursor: crosshair;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  font-weight: 400;
  transition: all .22s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sr-demo-lang-btn:hover {
  background: rgba(212,176,106,.16);
  border-color: #d4b06a;
  box-shadow: 0 0 18px rgba(212,176,106,.32);
  color: #f0eee6;
}
@media (max-width: 720px) {
  .sr-demo-lang-corner { top: 14px; right: 14px; }
  .sr-demo-lang-btn { font-size: 10px; padding: 7px 12px; letter-spacing: .2em; }
}