:root {
  --blue: #66ccff;
  --blue-deep: #1e6cff;
  --cyan: #7ff7ff;
  --ink: #06101f;
  --paper: #f4fbff;
  --muted: rgba(235, 247, 255, .7);
  --line: rgba(183, 229, 255, .26);
  --app-width: 100vw;
  --app-height: 100dvh;
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020713; }
body { color: #fff; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.site-shell {
  position: fixed;
  inset: 0;
  width: var(--app-width);
  height: var(--app-height);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.scene-deck, .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { overflow: hidden; visibility: hidden; transform: translate3d(0, 8%, 0); opacity: 0; transition: transform .9s cubic-bezier(.22,.8,.24,1), opacity .65s ease, visibility 0s .9s; }
.scene.is-active { visibility: visible; transform: translate3d(0, 0, 0); opacity: 1; transition-delay: 0s; z-index: 2; }
.scene.is-before { visibility: visible; transform: translate3d(0, -8%, 0); }
.scene__image, .scene__video, .scene__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__image { background-position: center; background-size: cover; transform: scale(1.04); transition: transform 7s ease; }
.scene.is-active .scene__image { transform: scale(1); }
.scene__video { object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.scene__video.is-playing { opacity: 1; }
.scene__veil { pointer-events: none; }
.scene__image--hero, .scene__image--world, .scene__image--cast { background-image: url("../images/hero-poster.webp"); }
.scene__image--features { background-image: url("../images/cast-poster.webp"); background-position: 54% center; }
.scene__image--news { background-image: url("../images/world-bg.webp"); }
.scene__veil--hero { background: linear-gradient(90deg, rgba(2,10,24,.94) 0%, rgba(2,10,24,.66) 38%, rgba(2,10,24,.08) 70%), linear-gradient(0deg, rgba(2,8,20,.68), transparent 42%); }
.scene__veil--world { background: linear-gradient(90deg, rgba(2,10,24,.96) 0%, rgba(2,10,24,.85) 42%, rgba(2,10,24,.28) 75%), linear-gradient(0deg, rgba(2,8,20,.8), transparent 55%); }
.scene__veil--features { background: linear-gradient(90deg, rgba(2,9,22,.98) 0%, rgba(2,9,22,.78) 50%, rgba(2,9,22,.42)), linear-gradient(0deg, rgba(2,8,20,.65), transparent); }
.scene__veil--cast { background: linear-gradient(90deg, rgba(2,9,22,.86) 0%, rgba(2,9,22,.18) 52%, rgba(2,9,22,.58)), linear-gradient(0deg, rgba(2,8,20,.92) 0%, transparent 58%); }
.scene__veil--news { background: linear-gradient(105deg, rgba(1,8,19,.97), rgba(4,25,53,.84) 55%, rgba(3,12,28,.72)); }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  padding: 0 clamp(28px, 4vw, 72px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(174,228,255,.15);
  background: linear-gradient(180deg, rgba(3,12,27,.62), transparent);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.24,1);
}
.site-header.is-visible { opacity: 1; transform: translateY(0); }
.brand { width: 160px; height: 58px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.main-nav button { position: relative; width: 84px; border: 0; background: none; color: rgba(238,249,255,.68); cursor: pointer; font-size: 14px; letter-spacing: .08em; transition: color .3s ease; }
.main-nav button::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .3s ease; box-shadow: 0 0 18px var(--blue); }
.main-nav button:hover, .main-nav button.is-active { color: #fff; }
.main-nav button.is-active::after { transform: scaleX(1); }
.performance-badge { width: 88px; height: 32px; margin-left: 24px; display: flex; align-items: center; gap: 9px; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,21,41,.34); backdrop-filter: blur(12px); font: 700 8px/1 Arial, sans-serif; letter-spacing: .14em; }
.performance-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: pulse 1.6s ease infinite; }

.experience { position: absolute; z-index: 100; inset: 0; overflow: hidden; background: #02050a; transition: opacity .85s ease, visibility 0s .85s; }
.experience.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.film { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .7s ease, visibility 0s .7s; }
.film--active { visibility: visible; opacity: 1; transition-delay: 0s; }
.film__video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.experience__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.38), transparent 24%, transparent 72%, rgba(0,0,0,.6)); }
.experience__topline { position: absolute; z-index: 2; top: 32px; left: 42px; right: 42px; display: flex; justify-content: space-between; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .24em; color: rgba(255,255,255,.7); }
.experience__brand::before { content: ""; display: inline-block; width: 24px; height: 1px; margin: 0 10px 3px 0; background: var(--blue); }
.skip-button { position: absolute; z-index: 3; right: 42px; bottom: 42px; height: 42px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,8,18,.32); backdrop-filter: blur(12px); cursor: pointer; font-size: 12px; letter-spacing: .12em; transition: background .3s ease, border-color .3s ease; }
.skip-button:hover { background: rgba(41,158,224,.42); border-color: var(--blue); }
.skip-button svg { width: 18px; fill: currentColor; }
.film-progress { position: absolute; z-index: 3; left: 42px; right: 42px; bottom: 22px; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.film-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue-deep), var(--cyan)); box-shadow: 0 0 14px var(--blue); }
.buffering { position: absolute; z-index: 4; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.74); font-size: 11px; letter-spacing: .12em; opacity: 0; transition: opacity .3s ease; }
.buffering.is-visible { opacity: 1; }
.buffering i { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; color: var(--blue); font: 700 clamp(9px, .8vw, 12px)/1.2 Arial, sans-serif; letter-spacing: .24em; }
.eyebrow span { display: block; width: 34px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hero-copy { position: absolute; z-index: 3; left: clamp(46px, 8vw, 150px); top: 50%; width: min(610px, 48vw); transform: translateY(-47%); }
.hero-logo { width: clamp(190px, 21vw, 360px); height: 128px; margin: -25px 0 2px; object-fit: contain; object-position: left center; filter: drop-shadow(0 12px 25px rgba(55,173,255,.18)); }
.hero-copy h1, .world-copy h2, .features-heading h2, .cast-copy h2, .news-heading h2 { margin: 0; font-family: "Microsoft YaHei UI", sans-serif; font-weight: 300; letter-spacing: .03em; }
.hero-copy h1 { font-size: clamp(36px, 4vw, 72px); line-height: 1.16; text-shadow: 0 12px 40px rgba(0,0,0,.48); }
.hero-copy h1 em, .features-heading h2 em, .news-heading h2 em { color: var(--blue); font-style: normal; font-weight: 700; }
.hero-lead { margin: 24px 0 30px; color: var(--muted); font-size: clamp(13px, 1vw, 17px); line-height: 1.9; letter-spacing: .05em; }
.hero-actions, .news-actions { display: flex; gap: 14px; }
.button { min-width: 190px; height: 52px; padding: 0 20px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; cursor: pointer; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 13px; letter-spacing: .08em; }
.button b { font: 700 9px/1 Arial, sans-serif; letter-spacing: .14em; }
.button--primary { background: linear-gradient(125deg, #268ce9, #64d5ff); color: #fff; box-shadow: 0 12px 34px rgba(44,163,238,.23); }
.button--ghost { border-color: var(--line); background: rgba(8,24,44,.38); backdrop-filter: blur(10px); }
.button--ghost:hover { border-color: var(--blue); background: rgba(29,105,161,.28); }
.button.is-disabled { opacity: .48; cursor: default; }
.button.is-disabled:hover { transform: none; }
.hero-meta { position: absolute; z-index: 3; right: clamp(90px, 9vw, 170px); bottom: 48px; display: flex; gap: 36px; color: rgba(255,255,255,.78); font: 600 10px/1.4 Arial, sans-serif; letter-spacing: .12em; }
.hero-meta span { padding-left: 14px; border-left: 1px solid var(--line); }
.hero-meta small { display: block; margin-bottom: 4px; color: var(--blue); font-size: 8px; }
.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%); border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; color: rgba(255,255,255,.6); font: 700 8px/1 Arial, sans-serif; letter-spacing: .19em; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 26px; background: rgba(255,255,255,.25); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; width: 1px; height: 12px; left: 0; top: -12px; background: var(--blue); animation: scrollCue 1.7s ease infinite; }
@keyframes scrollCue { 60%,100% { transform: translateY(40px); } }

.page-rail { position: absolute; z-index: 19; right: clamp(18px, 2.7vw, 48px); top: 50%; transform: translateY(-50%); width: 74px; opacity: 0; transition: opacity .7s ease; }
.page-rail.is-visible { opacity: 1; }
.page-rail button { position: relative; width: 100%; height: 42px; padding: 0 0 0 24px; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; color: rgba(255,255,255,.34); cursor: pointer; }
.page-rail button::before { content: ""; position: absolute; left: 0; width: 7px; height: 1px; background: currentColor; transition: width .3s ease, color .3s ease; }
.page-rail button b { font: 700 9px/1 Arial, sans-serif; }
.page-rail button span { position: absolute; right: 28px; width: auto; white-space: nowrap; opacity: 0; transform: translateX(7px); pointer-events: none; font: 700 8px/1 Arial, sans-serif; letter-spacing: .12em; transition: opacity .3s ease, transform .3s ease; }
.page-rail button:hover, .page-rail button.is-active { color: var(--blue); }
.page-rail button:hover::before, .page-rail button.is-active::before { width: 16px; }
.page-rail button:hover span { opacity: 1; transform: translateX(0); }
.page-rail__line { position: absolute; left: 3px; top: 18px; bottom: 18px; width: 1px; background: rgba(255,255,255,.12); }
.page-rail__line i { display: block; width: 1px; height: 0; background: var(--blue); transition: height .7s ease; box-shadow: 0 0 8px var(--blue); }

.split-layout { position: absolute; inset: 86px clamp(90px, 8vw, 150px) 50px; display: grid; grid-template-columns: .28fr 1fr .8fr; gap: clamp(30px, 5vw, 90px); align-items: center; z-index: 3; }
.section-index { align-self: start; padding-top: 13vh; display: flex; flex-direction: column; color: rgba(255,255,255,.15); }
.section-index strong { font: 200 clamp(54px, 7vw, 112px)/1 Arial, sans-serif; }
.section-index span { color: var(--blue); font: 700 9px/1 Arial, sans-serif; letter-spacing: .3em; }
.world-copy h2, .features-heading h2, .cast-copy h2, .news-heading h2 { font-size: clamp(34px, 3.4vw, 60px); line-height: 1.25; }
.world-copy > p:not(.eyebrow), .cast-copy > p:not(.eyebrow), .news-heading > p:not(.eyebrow) { max-width: 620px; margin: 27px 0; color: var(--muted); font-size: clamp(13px, 1vw, 17px); line-height: 2; }
.quote-line { display: flex; gap: 15px; align-items: flex-start; max-width: 460px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.8; }
.quote-line i { flex: 0 0 3px; height: 42px; background: linear-gradient(var(--blue), transparent); }
.world-card { position: relative; justify-self: end; width: min(31vw, 470px); aspect-ratio: .78; padding: 18px; border: 1px solid rgba(198,233,255,.22); background: rgba(6,21,42,.2); backdrop-filter: blur(7px); box-shadow: 0 28px 70px rgba(0,0,0,.4); clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.world-card__tag { position: absolute; z-index: 2; top: 32px; left: 32px; padding: 7px 11px; background: rgba(3,14,30,.66); color: var(--blue); font: 700 8px/1 Arial, sans-serif; letter-spacing: .2em; }
.world-card__art { width: 100%; height: calc(100% - 46px); background: url("../images/cast-detail.webp") 29% center/cover; filter: saturate(.9) contrast(1.05); }
.world-card__footer { height: 46px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .1em; }
.world-card__footer b { color: var(--blue); font: 700 9px/1 Arial, sans-serif; }

.features-layout { position: absolute; z-index: 3; inset: 86px clamp(90px, 9vw, 170px) 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.feature-list { display: flex; flex-direction: column; }
.feature-card { min-height: 112px; padding: 22px 20px; display: grid; grid-template-columns: 42px 1fr 80px; gap: 18px; align-items: center; border-top: 1px solid rgba(255,255,255,.14); background: rgba(3,15,31,.18); cursor: default; transition: background .35s ease, transform .35s ease, border-color .35s ease; }
.feature-card:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.feature-card:hover, .feature-card.is-selected { transform: translateX(-14px); border-color: rgba(102,204,255,.5); background: linear-gradient(90deg, rgba(30,115,177,.34), rgba(4,18,37,.28)); }
.feature-card > span { color: var(--blue); font: 700 11px/1 Arial, sans-serif; }
.feature-card h3 { margin: 0 0 8px; font-size: clamp(16px, 1.3vw, 22px); letter-spacing: .08em; }
.feature-card p { margin: 0; color: rgba(233,246,255,.58); font-size: 12px; line-height: 1.7; }
.feature-card b { justify-self: end; color: rgba(255,255,255,.18); font: 800 10px/1 Arial, sans-serif; letter-spacing: .15em; }
.feature-card.is-selected b { color: var(--blue); }

.cast-copy { position: absolute; z-index: 3; left: clamp(48px, 8vw, 150px); bottom: 12vh; width: min(620px, 50vw); text-shadow: 0 8px 30px rgba(0,0,0,.65); }
.cast-copy > p:not(.eyebrow) { max-width: 530px; }
.cast-strip { position: absolute; z-index: 3; right: clamp(90px, 9vw, 170px); top: 112px; display: flex; gap: 18px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.34); }
.cast-strip span { padding: 12px 7px; border-left: 1px solid rgba(255,255,255,.14); }
.cast-strip span.is-active { color: var(--blue); border-color: var(--blue); }
.cast-play { position: absolute; z-index: 4; right: clamp(100px, 11vw, 210px); bottom: 11vh; border: 0; background: none; display: flex; align-items: center; gap: 18px; cursor: pointer; }
.cast-play > span { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(4,16,31,.35); backdrop-filter: blur(10px); transition: transform .3s ease, background .3s ease; }
.cast-play:hover > span { transform: scale(1.08); background: rgba(47,163,226,.48); }
.cast-play svg { width: 20px; fill: #fff; }
.cast-play b { font: 700 9px/1 Arial, sans-serif; letter-spacing: .18em; }

.news-layout { position: absolute; z-index: 3; inset: 86px clamp(90px, 9vw, 170px) 70px; display: grid; grid-template-columns: 1fr .88fr; gap: 9vw; align-items: center; }
.news-heading .status-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 14px; border: 1px solid rgba(102,204,255,.34); border-radius: 999px; background: rgba(4,23,45,.45); color: var(--blue); font: 700 9px/1 Arial, sans-serif; letter-spacing: .15em; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.news-panel { padding: 30px; border: 1px solid rgba(181,226,255,.2); background: rgba(4,18,37,.44); backdrop-filter: blur(18px); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.news-panel__top { padding-bottom: 18px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--blue); font: 700 9px/1 Arial, sans-serif; letter-spacing: .17em; }
.news-panel article { padding: 22px 0; display: grid; grid-template-columns: 56px 1fr; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.news-panel time { color: var(--blue); font: 700 9px/1.4 Arial, sans-serif; letter-spacing: .13em; }
.news-panel h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.news-panel p { margin: 0; color: rgba(235,247,255,.55); font-size: 11px; line-height: 1.6; }
.news-actions { margin-top: 24px; }
.news-actions .button { min-width: 0; flex: 1; height: 46px; }
.site-footer { position: absolute; z-index: 4; left: clamp(90px, 9vw, 170px); right: clamp(90px, 9vw, 170px); bottom: 25px; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.38); font: 700 8px/1 Arial, sans-serif; letter-spacing: .16em; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .75s cubic-bezier(.22,.8,.24,1); }
.scene.is-active .reveal { opacity: 1; transform: translateY(0); }
.scene.is-active .reveal:nth-child(2) { transition-delay: .09s; }
.scene.is-active .reveal:nth-child(3) { transition-delay: .18s; }
.scene.is-active .reveal:nth-child(4) { transition-delay: .27s; }
.noise { position: absolute; z-index: 90; inset: 0; opacity: .025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.mobile-landscape-note { display: none; }
.noscript { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #071426; color: #fff; }

@media (max-width: 1050px) and (orientation: landscape) {
  .site-header { height: 66px; padding-inline: 28px; }
  .brand { width: 125px; height: 48px; }
  .main-nav button { width: 68px; font-size: 12px; }
  .performance-badge { margin-left: 12px; }
  .hero-copy { left: 60px; width: 54vw; }
  .hero-logo { height: 94px; }
  .hero-lead { margin: 13px 0 18px; line-height: 1.6; }
  .hero-meta { right: 75px; bottom: 30px; gap: 18px; }
  .split-layout, .features-layout, .news-layout { top: 66px; }
  .split-layout { left: 58px; right: 80px; gap: 30px; grid-template-columns: .18fr 1fr .72fr; }
  .section-index { padding-top: 10vh; }
  .world-copy > p:not(.eyebrow), .cast-copy > p:not(.eyebrow), .news-heading > p:not(.eyebrow) { margin: 14px 0; line-height: 1.65; }
  .features-layout { left: 58px; right: 80px; gap: 50px; }
  .feature-card { min-height: 86px; padding: 12px 15px; }
  .cast-copy { left: 58px; bottom: 8vh; }
  .cast-play { right: 110px; bottom: 8vh; }
  .news-layout { left: 58px; right: 80px; bottom: 45px; gap: 50px; }
  .news-panel { padding: 18px; }
  .news-panel article { padding: 12px 0; }
  .site-footer { left: 58px; right: 80px; bottom: 13px; }
}

@media (orientation: portrait) and (max-width: 820px) {
  :root { --app-width: 100dvh; --app-height: 100vw; }
  .site-shell { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
  .mobile-landscape-note { position: absolute; z-index: 91; left: 12px; bottom: 12px; display: block; padding: 5px 9px; border-radius: 999px; background: rgba(3,15,31,.5); color: rgba(255,255,255,.35); font-size: 7px; letter-spacing: .08em; pointer-events: none; }
}

@media (max-height: 560px) and (orientation: landscape), (orientation: portrait) and (max-width: 820px) {
  .site-header { height: 52px; padding-inline: 20px; }
  .brand { width: 105px; height: 42px; }
  .main-nav button { width: 60px; font-size: 10px; }
  .performance-badge { width: 70px; height: 26px; font-size: 7px; }
  .hero-copy { left: 42px; top: 52%; width: 58%; }
  .hero-logo { width: 170px; height: 64px; margin: -12px 0 0; }
  .eyebrow { margin-bottom: 8px; font-size: 7px; }
  .hero-copy h1 { font-size: clamp(26px, 6vh, 42px); }
  .hero-lead { margin: 8px 0 12px; font-size: 10px; line-height: 1.45; }
  .button { min-width: 155px; height: 38px; }
  .button span { font-size: 10px; }
  .hero-meta { right: 72px; bottom: 18px; font-size: 7px; }
  .scroll-cue { display: none; }
  .page-rail { right: 10px; transform: translateY(-50%) scale(.82); transform-origin: right center; }
  .split-layout { inset: 52px 68px 18px 38px; grid-template-columns: .15fr 1fr .66fr; gap: 22px; }
  .section-index { padding-top: 6vh; }
  .world-copy h2, .features-heading h2, .cast-copy h2, .news-heading h2 { font-size: clamp(24px, 6vh, 38px); }
  .world-copy > p:not(.eyebrow), .cast-copy > p:not(.eyebrow), .news-heading > p:not(.eyebrow) { margin: 8px 0; font-size: 9px; line-height: 1.55; }
  .quote-line { font-size: 8px; line-height: 1.4; }
  .world-card { width: min(29vw, 280px); padding: 10px; }
  .world-card__tag { top: 18px; left: 18px; font-size: 6px; }
  .features-layout { inset: 52px 68px 18px 42px; gap: 38px; }
  .feature-card { min-height: 63px; padding: 8px 10px; grid-template-columns: 28px 1fr 56px; gap: 9px; }
  .feature-card h3 { margin-bottom: 3px; font-size: 12px; }
  .feature-card p { font-size: 8px; line-height: 1.35; }
  .cast-copy { left: 42px; bottom: 8vh; width: 55%; }
  .cast-play { right: 80px; bottom: 7vh; }
  .cast-play > span { width: 44px; height: 44px; }
  .cast-strip { top: 68px; right: 66px; font-size: 7px; }
  .news-layout { inset: 52px 68px 35px 42px; gap: 35px; }
  .news-panel { padding: 12px 15px; }
  .news-panel__top { padding-bottom: 8px; }
  .news-panel article { padding: 8px 0; grid-template-columns: 38px 1fr; gap: 8px; }
  .news-panel h3 { margin-bottom: 2px; font-size: 11px; }
  .news-panel p { font-size: 8px; }
  .news-actions { margin-top: 10px; }
  .news-actions .button { height: 34px; padding-inline: 10px; }
  .site-footer { left: 42px; right: 68px; bottom: 10px; font-size: 6px; }
  .experience__topline { top: 16px; left: 22px; right: 22px; font-size: 7px; }
  .skip-button { right: 22px; bottom: 24px; height: 34px; font-size: 9px; }
  .film-progress { left: 22px; right: 22px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .scene, .reveal, .scene__image { transition-duration: .01ms !important; }
}