/* 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); }
}

/* --- scn1s4 reveal ellipses (prototype opening-s4.css) --------------------
   Stage 03 opens TWO ellipses on the same --p3: the tanker hull (a3) and the
   stern superstructure / bridge (e3b). Without e3b the ship wakes as one blob
   from mid-deck. Artwork-space placement (--cw/--ch/--fx/--fy) keeps both
   centres on the ship when the cover crop frames from the left. */
.opening {
  --e3-x: 62%; --e3-y: 68%; --e3-rx: 21%; --e3-ry: 16%;
  --e4-x: 84%; --e4-y: 40%; --e4-rx: 19%; --e4-ry: 24%;
  --e3b-ax: 0.454; --e3b-ay: 0.568; --e3b-arx: 0.115; --e3b-ary: 0.11;
  --a1-ax: 0.26; --a1-ay: 0.52; --a1-arx: 0.14; --a1-ary: 0.12;
  --a2-ax: 0.1107; --a2-ay: 0.6667; --a2-arx: 0.15; --a2-ary: 0.17;
  --a3-ax: 0.62; --a3-ay: 0.68; --a3-arx: 0.21; --a3-ary: 0.16;
  --a4-ax: 0.84; --a4-ay: 0.40; --a4-arx: 0.19; --a4-ary: 0.24;
}
.opening__layer--lit {
  --n0: radial-gradient(ellipse calc(var(--p1) * var(--a1-arx) * var(--cw)) calc(var(--p1) * var(--a1-ary) * var(--ch)) at calc((100cqw - var(--cw)) * var(--fx) + var(--a1-ax) * var(--cw)) calc((100cqh - var(--ch)) * var(--fy) + var(--a1-ay) * var(--ch)), #000 50%, transparent 100%);
  --n1: radial-gradient(ellipse calc(var(--p2) * var(--a2-arx) * var(--cw)) calc(var(--p2) * var(--a2-ary) * var(--ch)) at calc((100cqw - var(--cw)) * var(--fx) + var(--a2-ax) * var(--cw)) calc((100cqh - var(--ch)) * var(--fy) + var(--a2-ay) * var(--ch)), #000 50%, transparent 100%);
  --n2: radial-gradient(ellipse calc(var(--p3) * var(--a3-arx) * var(--cw)) calc(var(--p3) * var(--a3-ary) * var(--ch)) at calc((100cqw - var(--cw)) * var(--fx) + var(--a3-ax) * var(--cw)) calc((100cqh - var(--ch)) * var(--fy) + var(--a3-ay) * var(--ch)), #000 50%, transparent 100%);
  --n3: radial-gradient(ellipse calc(var(--p3) * var(--e3b-arx) * var(--cw)) calc(var(--p3) * var(--e3b-ary) * var(--ch)) at calc((100cqw - var(--cw)) * var(--fx) + var(--e3b-ax) * var(--cw)) calc((100cqh - var(--ch)) * var(--fy) + var(--e3b-ay) * var(--ch)), #000 50%, transparent 100%);
  --n4: radial-gradient(ellipse calc(var(--p4) * var(--a4-arx) * var(--cw)) calc(var(--p4) * var(--a4-ary) * var(--ch)) at calc((100cqw - var(--cw)) * var(--fx) + var(--a4-ax) * var(--cw)) calc((100cqh - var(--ch)) * var(--fy) + var(--a4-ay) * var(--ch)), #000 50%, transparent 100%);
  -webkit-mask-image: var(--n0), var(--n1), var(--n2), var(--n3), var(--n4);
  mask-image: var(--n0), var(--n1), var(--n2), var(--n3), var(--n4);
}
@media (prefers-reduced-motion: reduce) {
  .opening__layer--lit { -webkit-mask-image: none; mask-image: none; }
}

/* 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-s4.css): plate = object-fit:cover box; video window fills to
   artwork bottom (--win-y 10.5% + --win-h 89.5% = 100%). */
.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: transform 900ms var(--ease-out), 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 { transition: --fx 900ms var(--ease-out), --fy 900ms var(--ease-out); }
  .opening__layer { transition: object-position 900ms var(--ease-out), transform 900ms var(--ease-out), transform-origin 900ms var(--ease-out); }
  .opening__sfilm { transition: transform 900ms var(--ease-out), transform-origin 900ms var(--ease-out), opacity 800ms ease-in-out; }
  .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.62; --fy: 0.68; }
  .opening[data-stage="4"] { --fx: 0.84; --fy: 0.40; }
  .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; }
  .opening__sfilm { transition: opacity 800ms ease-in-out; }
  .opening__plate { transition: none; }
  .opening__layer { transition: none; }
}
/* Between 3:2 and 16:9, cover crops the sides. Frame from the left so the
   film plate (--fx) and stills (--focus-x) stay registered; centred crop
   left the film and still offset (double-image / ghosting). */
@media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 16/9) {
  .opening, .opening[data-stage] { --focus-x: 0%; --fx: 0; }
}
@media (max-aspect-ratio: 1499/1000) {
  .opening[data-stage="2"] { --focus-x: 0%; --fx: 0; }
}
/* Portrait phones: fixed left frame on the portrait artwork (prototype). */
@media (orientation: portrait) and (max-width: 767px) {
  .opening, .opening[data-stage] { --fx: 0; --fy: 0.5; --focus-x: 0%; --focus-y: 50%; transition: none; }
  .opening__world { --cw: max(100cqw, 46.1538cqh); --ch: max(216.667cqw, 100cqh); }
  .opening {
    --a1-ax: 0.287; --a1-ay: 0.581; --a1-arx: 0.30; --a1-ary: 0.20;
    --a2-ax: 0.1667; --a2-ay: 0.7628; --a2-arx: 0.231; --a2-ary: 0.081;
    --a3-ax: 0.697; --a3-ay: 0.723; --a3-arx: 0.40; --a3-ary: 0.165;
    --e3b-ax: 0.067; --e3b-ay: 0.616; --e3b-arx: 0.08; --e3b-ary: 0.03;
    --a4-ax: 0.80; --a4-ay: 0.561; --a4-arx: 0.30; --a4-ary: 0.19;
  }
  .opening__layer { transition: none; }
  .opening__sfilm { transition: opacity 800ms ease-in-out; }
  .opening__world:has(.opening__sfilm--portrait) .opening__sfilm:not(.opening__sfilm--portrait) { display: none; }
  .opening__sfilm--portrait { display: block; }
}
/* Portrait tablets: use the portrait cover box when CMS mobile art or a
   portrait film set is present (site serves mobile stills up to 1023). */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1023px) {
  .opening--mobile-art .opening__world,
  .opening__world:has(.opening__sfilm--portrait) {
    --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; }
  .opening__layer { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-aspect-ratio: 1500/1000) and (max-aspect-ratio: 16/9) {
  .opening__layer { object-position: 2% 55%; }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1499/1000) {
  .opening__layer { object-position: 0% 55%; }
}
@media (prefers-reduced-motion: reduce) and (orientation: portrait) and (max-width: 767px) {
  .opening__layer { object-position: 0% 50%; }
}

/* 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); }
}

/* Portrait phones keep the scroll reveal. 340dvh gives each stage about one
   screen of travel; opening.js reads the measured height. */
@media (orientation: portrait) and (max-width: 767px) {
  .opening { height: 340dvh; }
}

/* The phone height above outranks the one-screen reduced-motion rule in
   sections.css. Put the short frame back, or a still opening leaves empty
   scroll underneath. */
@media (prefers-reduced-motion: reduce) {
  .opening { height: 100vh; height: 100dvh; }
}

/* The veil is opaque only while its arrival animation runs. Without this, a
   phone that never plays the animation stays black and the next swipe lands
   on the journey. */
.opening__veil { opacity: 0; animation-fill-mode: backwards; }

/* Engines without dvh drop every opening height, the sticky stage collapses,
   and the first screen is the journey. */
@supports not (height: 1dvh) {
  .opening { height: 500vh; }
  .opening__stage { height: 100vh; }
  @media (orientation: portrait) and (max-width: 767px) {
    .opening { height: 340vh; }
  }
  @media (prefers-reduced-motion: reduce) {
    .opening { height: 100vh; }
  }
}

/* Intentionally no max-aspect-ratio:16/9 object-fit:fill squeeze. The updated
   prototype (Web/opening-s4.css) keeps object-fit:cover on stills and a
   cover-sized plate (--cw/--ch). Stretching stills to the viewport while the
   film used artwork-window % caused strong ghosting / double-image. Side crop
   on 3:2–16:9 is handled by framing from the left (--focus-x/--fx: 0) above. */

/* No container-query units: artwork-space ellipses cannot be computed. Fall
   back to sections.css box-anchored masks (single stage-03 ellipse) and hide
   films. */
@supports not (width: 1cqw) {
  @media (prefers-reduced-motion: no-preference) {
    .opening__layer--lit {
      -webkit-mask-image: var(--m1), var(--m2), var(--m3), var(--m4);
      mask-image: var(--m1), var(--m2), var(--m3), var(--m4);
    }
  }
  .opening__sfilm { display: none; }
}