/* Opening chrome from the approved prototype (opening-s4.css): the stage rail
   runs along the bottom with the UAE and China flags, and the scroll cue is
   its arrow only, sitting just left of the sound control. */

.opening__step .num,
.opening__step .label {
  text-shadow: 0 1px 3px rgb(4 7 11 / 0.9), 0 0 10px rgb(4 7 11 / 0.7);
}

.opening__cue span { display: none; }
.opening__cue { gap: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Flags sit on the rail's ::after so they follow whichever layout the rail uses. */
.opening__rail::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-image: url("../img/flag-ae-wave.webp?v=2"), url("../img/flag-cn-wave.webp?v=2");
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 0.75px rgb(236 226 206 / 0.55));
  /* Vertical rail (landscape phones under 768px): below item 05, side by side. */
  left: var(--gutter);
  top: calc(100% + 6px);
  width: 68px;
  height: 24px;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
}

@media (prefers-reduced-motion: reduce) {
  .opening__rail::after { background-image: url("../img/flag-ae-still.webp?v=1"), url("../img/flag-cn-still.webp?v=1"); }
}

/* Desktop and tablet: one horizontal row along the bottom-left. */
@media (min-width: 768px) {
  .opening__rail {
    top: auto;
    bottom: clamp(40px, 6.5vh, 72px);
    left: var(--gutter);
    right: auto;
    max-width: 34vw;
    translate: none;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .opening__rail::before {
    inset: -140% -18% -140% -40%;
    background: radial-gradient(closest-side at 45% 50%, rgb(4 7 11 / 0.78), rgb(4 7 11 / 0) 82%);
  }
  .opening__step {
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    border-radius: 3px;
  }
  .opening__step .num { font-size: var(--text-sm); }
  .opening__step.is-active {
    background: linear-gradient(to right, rgb(201 162 39 / 0.55), rgb(201 162 39 / 0.14) 65%, transparent);
  }
  /* Flags take the first 68px from the gutter, then 10px of air, then the rail. */
  .opening__rail { left: calc(var(--gutter) + 78px); max-width: none; }
  .opening__rail::after { left: auto; right: calc(100% + 10px); top: 50%; translate: 0 -50%; }
}

/* Icon-only sound control on phones, level with the rail. */
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-height: 480px) {
  .sound {
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    min-width: 44px;
    padding-inline: var(--space-3);
    justify-content: center;
  }
  .sound .label { display: none; }
}

@media (orientation: portrait) and (max-width: 767px) {
  .opening__rail {
    bottom: var(--space-3);
    height: 44px;
    left: calc(var(--space-3) + 34px);
    right: calc(var(--space-3) + 44px + 8px);
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .opening__rail::after {
    left: auto;
    right: calc(100% + 6px);
    top: 50%;
    translate: 0 -50%;
    width: 28px;
    height: 46px;
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
  }
  .opening__step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .opening__step .label {
    position: static;
    order: 1;
    transform: none;
    width: auto;
    max-width: none;
    margin-bottom: 2px;
    font-size: clamp(7.5px, 2.3vw, 9.5px);
    letter-spacing: 0.04em;
    line-height: 1;
    opacity: 0.55;
  }
  .opening__step.is-lit .label { opacity: 0.8; }
  .opening__step.is-active .label { opacity: 1; color: var(--c-gold-soft); }
  .opening__step::after { order: 2; align-self: stretch; margin: 0; }
  .opening__step .num { order: 3; margin-top: 2px; line-height: 1; font-size: clamp(8.5px, 2.6vw, 10.5px); }
}

/* Phone rail: flags and the five steps share one warm dock. */
@media (orientation: portrait) and (max-width: 767px) {
  .opening__rail {
    left: var(--space-3);
    right: calc(var(--space-3) + 44px + 8px);
    bottom: var(--space-3);
    height: 44px;
    padding: 0 6px 0 42px;
    gap: 0;
    align-items: stretch;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
      linear-gradient(to bottom, rgb(201 162 39 / 0), rgb(201 162 39 / 0.5) 50%, rgb(201 162 39 / 0)) padding-box no-repeat 38px 50% / 1px 26px,
      radial-gradient(70% 120% at 50% -40%, rgb(255 204 120 / 0.10), rgb(255 204 120 / 0) 70%) padding-box,
      linear-gradient(to bottom, rgb(46 33 19 / 0.93), rgb(22 16 10 / 0.93)) padding-box,
      linear-gradient(to bottom, rgb(236 200 116 / 0.58), rgb(201 162 39 / 0.2) 60%, rgb(201 162 39 / 0.3)) border-box;
    box-shadow:
      inset 0 1px 0 rgb(255 226 166 / 0.12),
      0 12px 28px -10px rgb(0 0 0 / 0.85),
      0 0 22px rgb(201 162 39 / 0.07);
  }
  .opening__rail::before {
    content: "";
    position: absolute;
    inset: -5px auto auto 22px;
    z-index: 1;
    width: 72px;
    height: 9px;
    background:
      linear-gradient(90deg, rgb(255 238 196 / 0), rgb(255 244 214 / 0.95) 50%, rgb(255 238 196 / 0)) center / 100% 1px no-repeat,
      radial-gradient(closest-side, rgb(255 214 140 / 0.38), rgb(255 214 140 / 0));
    opacity: 0;
    pointer-events: none;
    animation: wd-glint 9s ease-in-out 1.5s infinite;
  }
  @keyframes wd-glint {
    0%   { transform: translateX(0); opacity: 0; }
    4%   { opacity: 1; }
    26%  { opacity: 1; }
    30%  { transform: translateX(calc(100vw - 192px)); opacity: 0; }
    100% { transform: translateX(calc(100vw - 192px)); opacity: 0; }
  }
  .opening__rail::after {
    left: 12px;
    right: auto;
    bottom: auto;
    top: 50%;
    translate: 0 -50%;
    width: 22px;
    height: 38px;
  }
  .opening__step {
    position: relative;
    flex: 1 1 auto;
    justify-content: center;
    background: none;
  }
  .opening__step.is-active { background: none; }
  .opening__step .label {
    font-weight: 500;
    font-size: clamp(8px, 2.3vw, 9.5px);
    letter-spacing: 0.05em;
    line-height: 10px;
    margin-bottom: 2px;
    opacity: 1;
    color: rgb(234 222 200 / 0.56);
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.55);
    transition: color var(--dur-slow) var(--ease-out);
  }
  .opening__step .num {
    font-weight: 700;
    font-size: clamp(9px, 2.6vw, 10.5px);
    letter-spacing: 0.08em;
    line-height: 10px;
    margin-top: 2px;
    opacity: 1;
    color: rgb(224 202 162 / 0.64);
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.55);
    transition: color var(--dur-slow) var(--ease-out);
  }
  .opening__step::after {
    height: 2px;
    margin: 0 2px;
    border-radius: 2px;
    background: rgb(236 214 170 / 0.16);
  }
  .opening__step.is-lit .label { opacity: 1; color: rgb(238 222 190 / 0.74); }
  .opening__step.is-lit .num { opacity: 1; color: rgb(214 178 92 / 0.74); }
  .opening__step.is-lit::after { background: linear-gradient(90deg, rgb(201 162 39 / 0.55), rgb(201 162 39 / 0.75)); }
  .opening__step.is-active .label { opacity: 1; color: #f2d88c; text-shadow: 0 0 8px rgb(227 190 100 / 0.55), 0 1px 1px rgb(0 0 0 / 0.5); }
  .opening__step.is-active .num { opacity: 1; color: #f7e4a8; text-shadow: 0 0 8px rgb(227 190 100 / 0.6), 0 1px 1px rgb(0 0 0 / 0.5); }
  .opening__step.is-active::after {
    background: linear-gradient(90deg, rgb(201 162 39 / 0.5), #f0d27e 50%, rgb(201 162 39 / 0.5));
    box-shadow: 0 0 6px rgb(233 196 106 / 0.85), 0 0 14px rgb(201 162 39 / 0.45);
  }
  .opening__step.is-active::before {
    content: "";
    position: absolute;
    inset: 1px -4px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(242 198 104 / 0.44), rgb(201 162 39 / 0.16) 58%, rgb(201 162 39 / 0));
    pointer-events: none;
    animation: wd-breathe 3.6s ease-in-out infinite alternate, wd-glow-in 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes wd-glow-in { from { transform: scale(0.35, 0.6); } to { transform: none; } }
  @keyframes wd-breathe { from { opacity: 0.55; } to { opacity: 1; } }
  .opening__step.is-active .num::after {
    content: "";
    position: absolute;
    left: 2px;
    top: calc(50% - 1px);
    width: 32%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(255 246 220 / 0), rgb(255 250 232 / 0.95) 50%, rgb(255 246 220 / 0));
    opacity: 0;
    pointer-events: none;
    animation: wd-flow 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  @keyframes wd-flow {
    0%   { transform: translateX(-40%); opacity: 0; }
    12%  { opacity: 1; }
    52%  { opacity: 1; }
    70%  { transform: translateX(220%); opacity: 0; }
    100% { transform: translateX(220%); opacity: 0; }
  }
  .sound {
    border: 1px solid transparent;
    background:
      radial-gradient(90% 90% at 50% -20%, rgb(255 204 120 / 0.10), rgb(255 204 120 / 0) 70%) padding-box,
      linear-gradient(to bottom, rgb(46 33 19 / 0.93), rgb(22 16 10 / 0.93)) padding-box,
      linear-gradient(to bottom, rgb(236 200 116 / 0.58), rgb(201 162 39 / 0.2) 60%, rgb(201 162 39 / 0.3)) border-box;
    box-shadow:
      inset 0 1px 0 rgb(255 226 166 / 0.12),
      0 12px 28px -10px rgb(0 0 0 / 0.85),
      0 0 22px rgb(201 162 39 / 0.07);
    color: rgb(236 222 196 / 0.82);
    backdrop-filter: none;
  }
  @media (max-width: 399px) {
    .opening__step .label { letter-spacing: 0.035em; }
  }
  @media (max-width: 374px) {
    .opening__step .label { letter-spacing: 0.02em; }
  }
  @media (max-width: 340px) {
    .opening__step .label { letter-spacing: 0; font-size: 7.3px; }
    .opening__step .num { font-size: 8.4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .opening__rail::before,
    .opening__step.is-active::before,
    .opening__step.is-active .num::after { animation: none; }
  }
}

/* Computer and tablets: rail, arrow and SOUND share one baseline. */
@media (min-width: 768px) and (min-height: 481px) {
  .opening__rail { bottom: var(--space-4); height: 44px; }
  .opening__cue {
    bottom: var(--space-4);
    height: 44px;
    justify-content: center;
    left: auto;
    right: calc(var(--gutter) + 132px);
    translate: 0 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 481px) {
  .opening__step { padding-inline: 5px; letter-spacing: 0.06em; }
}

/* Narrow tablets: the row reaches the sound control, so the arrow sits above it. */
@media (min-width: 768px) and (max-width: 900px) and (min-height: 481px) {
  .opening__cue {
    right: calc(var(--gutter) + 55px);
    translate: 50% 0;
    bottom: calc(var(--space-4) + 44px + 8px);
    height: auto;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (min-width: 768px) {
  .opening__rail { bottom: var(--space-3); height: 44px; }
}

@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-height: 480px) {
  .opening__cue {
    left: auto;
    right: calc(var(--space-3) + 22px);
    translate: 50% 0;
    bottom: calc(var(--space-3) + 44px + 8px);
  }
}

/* The opening stays physical (artwork does not mirror). SOUND stays on the right in RTL. */
[dir="rtl"] .opening .sound { left: auto; right: var(--gutter); }
@media (orientation: portrait) and (max-width: 767px), (orientation: landscape) and (max-height: 480px), (max-width: 480px) {
  [dir="rtl"] .opening .sound { right: var(--space-3); }
}

/* Finale film sits on the stills and fades in with stage 05. The three image
   layers stay in place, so the scroll reveal is unchanged until the film
   takes over. Geometry matches the approved scn1s4 finale window. */
.opening { --fx: 0.5; --fy: 0.55; }
.opening__world { container-type: size; --cw: max(100cqw, 177.7778cqh); --ch: max(56.25cqw, 100cqh); }
.opening__sfilm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(var(--zoom));
  transform-origin: var(--focus-x) var(--focus-y);
  transition: opacity 800ms ease-in-out;
}
.opening__sfilm.is-ready { opacity: 1; }
.opening__sfilm--finale video { opacity: clamp(0, calc((var(--p5) - 0.45) * 2.5), 1); }
.opening__sfilm--portrait { display: none; }
.opening__plate {
  position: absolute;
  width: var(--cw);
  height: var(--ch);
  left: calc((100cqw - var(--cw)) * var(--fx));
  top: calc((100cqh - var(--ch)) * var(--fy));
}
.opening__sfilm video {
  position: absolute;
  left: var(--win-x);
  top: var(--win-y);
  width: var(--win-w);
  height: var(--win-h);
  object-fit: fill;
}
@media (max-aspect-ratio: 3/2) {
  .opening[data-stage="1"] { --fx: 0.26; --fy: 0.52; }
  .opening[data-stage="2"] { --fx: 0.08; --fy: 0.65; }
  .opening[data-stage="3"] { --fx: 0.57; --fy: 0.64; }
  .opening[data-stage="4"] { --fx: 0.86; --fy: 0.42; }
  .opening[data-stage="5"] { --fx: 0.53; --fy: 0.43; }
}
@media (min-aspect-ratio: 3/2) {
  .opening, .opening[data-stage] { --fx: 0.5; --fy: 0.55; }
}
@media (orientation: portrait) and (max-width: 1023px) {
  .opening__world { --cw: max(100cqw, 46.1538cqh); --ch: max(216.667cqw, 100cqh); }
  .opening__world:has(.opening__sfilm--portrait) .opening__sfilm:not(.opening__sfilm--portrait) { display: none; }
  .opening__sfilm--portrait { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .opening__sfilm { display: none; }
}

/* Keep ~21px between the arrow and SOUND as the label width changes. */
@media (min-width: 768px) and (min-height: 481px) {
  :lang(ar) .opening__cue { right: calc(var(--gutter) + 112px); }
  :lang(zh) .opening__cue { right: calc(var(--gutter) + 108px); }
  :lang(fa) .opening__cue { right: calc(var(--gutter) + 99px); }
}
@media (min-width: 768px) and (max-width: 900px) and (min-height: 481px) {
  :lang(ar) .opening__cue { right: calc(var(--gutter) + 45px); }
  :lang(zh) .opening__cue { right: calc(var(--gutter) + 43px); }
  :lang(fa) .opening__cue { right: calc(var(--gutter) + 40px); }
}