:root{
  color-scheme:dark;
  --bg:#020306;
  --bg2:#050812;
  --text:#f3f8fc;
  --muted:rgba(228,240,249,.61);
  --faint:rgba(228,240,249,.34);
  --line:rgba(210,245,255,.13);
  --cyan:#69eaff;
  --cyan2:#b9f9ff;
  --blue:#5872ff;
  --violet:#9a68ff;
  --red:#ff6b91;
  --max:1440px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;min-width:320px;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:rgba(105,234,255,.25);color:#fff}
#webgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(900px 680px at 74% 18%,rgba(33,106,151,.11),transparent 64%),
    radial-gradient(780px 520px at 16% 74%,rgba(88,114,255,.055),transparent 68%),
    linear-gradient(180deg,rgba(1,2,5,.05),rgba(1,2,5,.38));
}
.noise{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.038;mix-blend-mode:soft-light;
  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='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.scan{
  position:fixed;inset:0;z-index:89;pointer-events:none;opacity:.08;
  background:repeating-linear-gradient(to bottom,transparent 0 8px,rgba(150,235,255,.04) 9px,transparent 10px);
}
.loader{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:#020306;
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),visibility .8s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{width:min(560px,calc(100% - 52px));display:grid;gap:20px}
.loader-title{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:var(--faint)}
.loader-title b{font-size:clamp(46px,8vw,82px);line-height:.8;letter-spacing:-.08em;text-transform:none;color:var(--text);font-weight:650}
.loader-track{height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.loader-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));box-shadow:0 0 30px rgba(105,234,255,.72);animation:load 1.35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes load{to{width:100%}}
.topbar{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:100;
  width:min(calc(100% - 32px),var(--max));height:64px;padding:0 18px 0 20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border:1px solid rgba(230,249,255,.12);border-radius:22px;
  background:rgba(4,7,12,.52);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 18px 70px rgba(0,0,0,.28);transition:transform .35s ease,background .35s ease,border-color .35s ease;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:720;letter-spacing:-.03em}
.brand-mark{width:29px;height:29px;position:relative;filter:drop-shadow(0 0 16px rgba(105,234,255,.28))}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;border:1.5px solid rgba(210,250,255,.88);border-radius:8px 13px 8px 13px;transform:rotate(45deg)}
.brand-mark::before{inset:4px}.brand-mark::after{inset:10px;border-color:var(--cyan);box-shadow:0 0 18px rgba(105,234,255,.65)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font-size:12px;color:rgba(239,247,253,.62);padding:10px 13px;border-radius:999px;transition:.2s}
.nav .nav-external{display:inline-flex;align-items:center;gap:5px;padding:8px 9px;font-size:10px;white-space:nowrap;border:1px solid rgba(185,249,255,.14);background:rgba(185,249,255,.035)}
.nav .nav-external span:last-child{color:var(--cyan);font-size:11px}
.nav a:hover,.nav a.active{color:#fff;background:rgba(255,255,255,.06)}
.nav a:focus-visible,.pill:focus-visible,.lang-current:focus-visible,.lang-menu button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.actions{justify-self:end;display:flex;gap:8px}
.pill{min-height:40px;padding:0 15px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.05);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;transition:.22s}
.pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.pill.primary{background:rgba(239,249,255,.96);color:#061018;border-color:transparent;font-weight:720}
.menu{display:none;width:42px;padding:0}
.nav.mobile-open{
  display:flex;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  min-width:190px;
  padding:8px;
  border:1px solid rgba(230,249,255,.12);
  border-radius:18px;
  background:rgba(4,7,12,.88);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 18px 70px rgba(0,0,0,.38);
}
.nav.mobile-open a{padding:12px 14px;border-radius:12px}
main{position:relative;z-index:4}
.film-scene{
  position:relative;width:min(calc(100% - 48px),var(--max));min-height:112vh;margin:0 auto;
  display:grid;align-items:center;padding:130px 0 100px;isolation:isolate;
}
.film-scene.hero{min-height:125vh}
.scene-copy{max-width:720px;position:relative;z-index:4}
.scene-copy.right{margin-left:auto;max-width:620px}
.scene-copy.center{margin-left:auto;margin-right:auto;text-align:center;max-width:900px}
.kicker{font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(185,249,255,.78);margin-bottom:22px}
.hero h1,.scene-copy h2{margin:0;font-weight:620;letter-spacing:-.07em;line-height:.88}
.hero h1{font-size:clamp(62px,9.2vw,148px)}
.scene-copy h2{font-size:clamp(48px,6.3vw,96px)}
.dim{color:rgba(240,247,252,.21)}
.shine{color:transparent;background:linear-gradient(110deg,#fff 0%,#dffcff 32%,#6feaff 61%,#667cff 100%);-webkit-background-clip:text;background-clip:text}
.scene-copy p{max-width:650px;margin:28px 0 0;color:var(--muted);font-size:clamp(16px,1.35vw,20px);line-height:1.66}
.scene-copy.right p{margin-left:auto}
.scene-copy.center p{margin-left:auto;margin-right:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.scene-copy.center .cta-row{justify-content:center}
.micro{margin-top:50px;display:flex;gap:28px;flex-wrap:wrap;color:var(--faint);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.scene-id{position:absolute;right:0;bottom:7%;font-size:clamp(96px,16vw,230px);line-height:.75;letter-spacing:-.09em;color:rgba(255,255,255,.025);font-weight:730;pointer-events:none}
.scene-id.left{left:0;right:auto}
.hud{
  position:fixed;left:24px;bottom:24px;z-index:94;width:280px;display:grid;gap:11px;
  color:rgba(235,246,253,.42);font:9px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;pointer-events:none;
}
.hud-row{display:flex;justify-content:space-between;gap:12px}.hud-row strong{color:rgba(243,250,255,.82);font-weight:500}
.hud-line{height:1px;background:rgba(255,255,255,.11);overflow:hidden}.hud-line i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--cyan),var(--blue));box-shadow:0 0 20px rgba(105,234,255,.72)}
.rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:94;display:grid;gap:10px}
.rail button{appearance:none;width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.07);cursor:pointer;transition:.22s}
.rail button.active,.rail button:hover{transform:scale(1.55);background:var(--cyan);border-color:#d9fbff;box-shadow:0 0 18px rgba(105,234,255,.78)}
.corner-note{position:absolute;right:0;top:20%;width:230px;padding-left:15px;border-left:1px solid rgba(255,255,255,.13);color:var(--faint);font:9px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.05em}
.corner-note strong{display:block;color:rgba(244,250,255,.8);font-weight:500}
.next-world{
  position:relative;z-index:4;width:min(calc(100% - 48px),var(--max));margin:0 auto 36px;
  min-height:420px;border:1px solid rgba(255,255,255,.1);border-radius:34px;padding:50px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:radial-gradient(650px 340px at 80% 10%,rgba(105,234,255,.09),transparent 70%),rgba(255,255,255,.02);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.next-world::after{content:attr(data-word);position:absolute;right:-18px;bottom:-50px;font-size:clamp(110px,18vw,260px);line-height:1;letter-spacing:-.09em;font-weight:720;color:rgba(255,255,255,.025);pointer-events:none}
.next-world h2{margin:0;max-width:900px;font-size:clamp(50px,6.2vw,88px);line-height:.94;letter-spacing:-.06em;font-weight:610}
.next-bottom{position:relative;z-index:2}.next-bottom p{margin:0;max-width:720px;color:var(--muted);line-height:1.65}
.route-wipe{position:fixed;inset:0;z-index:998;background:#071019;transform:scaleY(0);transform-origin:bottom;pointer-events:none;transition:transform .62s cubic-bezier(.7,0,.2,1)}
.route-wipe.go{transform:scaleY(1)}
footer{position:relative;z-index:4;width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:32px 0 54px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:24px;color:rgba(255,255,255,.33);font-size:11px}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:1050px){
  .topbar{grid-template-columns:1fr auto}.nav{display:none}.actions .ghost{display:none}.menu{display:inline-flex}
  .nav.mobile-open{display:flex}
  .corner-note{display:none}.film-scene{min-height:105vh}
}
@media(max-width:720px){
  .topbar{top:10px;width:calc(100% - 20px);height:58px;border-radius:19px}.actions .primary{display:none}
  .film-scene,.next-world,footer{width:calc(100% - 32px)}.film-scene{padding:108px 0 72px;min-height:100vh}.film-scene.hero{min-height:112vh}
  .hero h1{font-size:clamp(58px,18vw,92px)}.scene-copy h2{font-size:clamp(44px,14vw,72px)}
  .scene-copy p{font-size:16px;max-width:93%}.scene-copy.right{margin-left:0}.scene-copy.right p{margin-left:0}
  .hud,.rail{display:none}.scene-id{font-size:28vw}.next-world{min-height:390px;border-radius:26px;padding:30px 26px}
  .next-bottom{align-items:flex-start;flex-direction:column}footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


.webgl-error{
  position:fixed;left:50%;bottom:24px;z-index:997;transform:translateX(-50%);
  max-width:min(720px,calc(100% - 32px));padding:13px 16px;border:1px solid rgba(255,110,140,.35);
  border-radius:16px;background:rgba(22,5,10,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:#ffdbe4;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;display:none;
}
.webgl-error.show{display:block}




/* ------------------------------------------------------------
   V7 MERGED — ORIGINAL STABLE TEXT REVEAL
   Keeps V7 WebGL/camera/model dynamics unchanged.
   Text uses the original Arenyxa entrance:
   opacity 0 + translateY(34px) -> opacity 1 + transform none.
   ------------------------------------------------------------ */

.chapter-break{
  width:min(calc(100% - 48px),var(--max));
  height:1px;
  margin:0 auto;
  position:relative;
  z-index:5;
  background:linear-gradient(90deg,transparent,rgba(105,234,255,.30),transparent);
}
.chapter-break::after{
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  height:8px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 20px rgba(105,234,255,.8);
}

/* EXACT original reveal geometry: no child transforms, masks, blur or scale. */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .9s cubic-bezier(.2,.8,.2,1),
    transform .9s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* Preserve title metrics exactly. No animated letter-spacing or glyph wrappers. */
.scene-copy h1,
.scene-copy h2,
.scene-copy .kicker,
.scene-copy p,
.scene-copy .micro,
.scene-copy .cta-row{
  transform:none;
  filter:none;
  mask-image:none;
  -webkit-mask-image:none;
}

/* Keep V7 gradient text visually alive, but do not move the text box itself. */
.shine{
  color:transparent;
  background:linear-gradient(105deg,#fff 0%,#e9fcff 28%,#75eaff 55%,#6f7fff 78%,#fff 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:softSheen 8s ease-in-out 1.4s infinite;
}
@keyframes softSheen{
  0%,100%{background-position:0% 50%}
  50%{background-position:42% 50%}
}

/* Long-page V7 scene geometry remains unchanged. */
.film-scene{
  min-height:118vh;
  padding-top:142px;
  padding-bottom:118px;
}
.film-scene.hero{min-height:132vh}

/* 12-scene navigation remains compact. */
.rail{gap:8px}
.rail button{width:8px;height:8px}
.nav a{cursor:pointer}

@media(max-width:720px){
  .film-scene{min-height:106vh;padding-top:112px;padding-bottom:82px}
  .film-scene.hero{min-height:116vh}
  .chapter-break{width:calc(100% - 32px)}
}

@media(prefers-reduced-motion:reduce){
  .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .shine{animation:none!important}
}


/* ------------------------------------------------------------
   V7.3 — KEYWORD MOTION + MULTILINGUAL UI
   Dynamic effects never transform glyph positions.
   ------------------------------------------------------------ */
.lang-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  z-index:120;
}
.lang-current{
  min-width:62px;
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(245,250,255,.86);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  cursor:pointer;
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  transition:background .2s ease,border-color .2s ease;
}
.lang-current:hover,
.lang-current[aria-expanded="true"]{
  background:rgba(255,255,255,.08);
  border-color:rgba(105,234,255,.25);
}
.lang-chevron{font-size:12px;opacity:.55;transition:transform .2s ease}
.lang-current[aria-expanded="true"] .lang-chevron{transform:rotate(180deg)}
.lang-menu{
  position:absolute;
  right:0;
  top:48px;
  width:190px;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(4,7,12,.92);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 24px 70px rgba(0,0,0,.36);
  opacity:0;
  transform:translateY(-8px) scale(.98);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.lang-menu.open{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
}
.lang-menu button{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:rgba(242,249,255,.82);
  padding:8px 10px;
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  text-align:left;
  cursor:pointer;
}
.lang-menu button:hover,
.lang-menu button[aria-selected="true"]{
  background:rgba(105,234,255,.07);
}
.lang-menu button span{
  font-weight:650;
  color:#fff;
}
.lang-menu button small{
  color:rgba(235,244,252,.46);
  font-size:11px;
}

/* Keyword motion: gradient motion only, never translate/scale glyphs. */
.shine{
  position:relative;
  text-shadow:0 0 26px rgba(105,234,255,.06);
  animation:
    softSheen 7.6s ease-in-out 1.1s infinite,
    shineBreath 4.8s ease-in-out infinite;
}
@keyframes shineBreath{
  0%,100%{text-shadow:0 0 18px rgba(105,234,255,.05)}
  50%{text-shadow:0 0 34px rgba(105,234,255,.18)}
}

/* Kicker scan pulse */
.kicker{
  position:relative;
  overflow:hidden;
}
.kicker::after{
  content:"";
  position:absolute;
  left:-32%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(185,249,255,.22),transparent);
  animation:kickerScan 5.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes kickerScan{
  0%,64%{left:-32%;opacity:0}
  70%{opacity:1}
  92%{left:105%;opacity:.65}
  100%{left:105%;opacity:0}
}

/* Tiny metadata breath */
.micro span{
  position:relative;
}
.micro span::before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:8px;
  border-radius:50%;
  background:rgba(105,234,255,.5);
  box-shadow:0 0 10px rgba(105,234,255,.45);
  animation:microPulse 3.4s ease-in-out infinite;
}
.micro span:nth-child(2)::before{animation-delay:-1.1s}
.micro span:nth-child(3)::before{animation-delay:-2.2s}
@keyframes microPulse{
  50%{opacity:.35;box-shadow:0 0 2px rgba(105,234,255,.15)}
}

/* Corner notes get a very faint scan line. */
.corner-note::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:28%;
  background:linear-gradient(var(--cyan),transparent);
  box-shadow:0 0 10px rgba(105,234,255,.35);
  animation:cornerScan 4.8s ease-in-out infinite;
}
@keyframes cornerScan{
  0%,100%{top:0;opacity:.25}
  50%{top:72%;opacity:.8}
}

/* Language-specific typography protection */
html[lang="zh-CN"] .scene-copy h1,
html[lang="zh-CN"] .scene-copy h2{
  letter-spacing:-.045em;
  line-height:.96;
  font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
html[lang="zh-CN"] .scene-copy p{
  line-height:1.78;
  letter-spacing:.01em;
}
html[lang="zh-CN"] .kicker,
html[lang="zh-CN"] .micro{
  letter-spacing:.08em;
}
html[lang="ja"] .scene-copy h1,
html[lang="ja"] .scene-copy h2{
  letter-spacing:-.035em;
  line-height:1.00;
  font-family:Inter,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}
html[lang="ja"] .scene-copy p{
  line-height:1.82;
}
html[lang="ja"] .kicker,
html[lang="ja"] .micro{
  letter-spacing:.07em;
}

@media(max-width:1050px){
  .lang-switcher{margin-left:auto}
}
@media(max-width:720px){
  .lang-current{min-width:56px;height:38px;padding:0 10px}
  .lang-menu{right:-4px;width:176px}
  html[lang="zh-CN"] .scene-copy h1,
  html[lang="zh-CN"] .scene-copy h2,
  html[lang="ja"] .scene-copy h1,
  html[lang="ja"] .scene-copy h2{
    font-size:clamp(42px,13vw,68px);
  }
}
@media(prefers-reduced-motion:reduce){
  .shine,.kicker::after,.micro span::before,.corner-note::after{animation:none!important}
}


/* V7.4 — product-first capability labels */
.micro{
  gap:12px 20px;
}
.micro span{
  color:rgba(220,240,248,.52);
  letter-spacing:.055em;
}
.micro span::before{
  background:rgba(105,234,255,.72);
}


/* ------------------------------------------------------------
   V7.5 — CINEMATIC POLISH
   Less perpetual motion, more directed motion and scene rhythm.
   ------------------------------------------------------------ */

.intro-loader{
  overflow:hidden;
  background:
    radial-gradient(900px 700px at 50% 50%, rgba(36,105,143,.12), transparent 62%),
    #020306;
}
.intro-loader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 1s cubic-bezier(.2,.8,.2,1),visibility 1s;
}
.intro-space{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  perspective:1200px;
  overflow:hidden;
}
.intro-space::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:radial-gradient(rgba(185,249,255,.16) .8px, transparent .8px);
  background-size:28px 28px;
  opacity:.16;
  transform:rotate(8deg) scale(1.1);
  mask-image:radial-gradient(circle at center,#000 0 38%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at center,#000 0 38%,transparent 78%);
}
.intro-globe{
  position:relative;
  width:min(48vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  transform-style:preserve-3d;
  transition:
    transform 1.5s cubic-bezier(.18,.86,.22,1),
    opacity .8s ease,
    filter .8s ease;
}
.intro-globe.focus{
  transform:scale(1.48) rotateX(-11deg) rotateY(24deg);
}
.intro-globe.collapse{
  transform:scale(.18) rotateX(22deg) rotateY(160deg);
  opacity:.12;
  filter:blur(8px);
}
.globe-grid{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(105,234,255,.24);
  box-shadow:
    inset 0 0 80px rgba(105,234,255,.05),
    0 0 80px rgba(105,234,255,.06);
}
.globe-grid::before,
.globe-grid::after{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:50%;
  border:1px solid rgba(105,234,255,.15);
}
.globe-grid-a{
  transform:rotateX(67deg);
  animation:introSpinA 13s linear infinite;
}
.globe-grid-b{
  transform:rotateY(67deg);
  animation:introSpinB 17s linear infinite reverse;
}
@keyframes introSpinA{to{transform:rotateX(67deg) rotateZ(360deg)}}
@keyframes introSpinB{to{transform:rotateY(67deg) rotateZ(360deg)}}
.globe-core{
  position:absolute;
  inset:31%;
  border-radius:50%;
  background:radial-gradient(circle,#d9fbff 0 3%,rgba(105,234,255,.18) 8%,transparent 52%);
  box-shadow:0 0 70px rgba(105,234,255,.14);
}
.globe-node{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:#d9fbff;
  box-shadow:0 0 14px rgba(105,234,255,.9),0 0 30px rgba(105,234,255,.28);
  animation:nodeBreath 2.8s ease-in-out infinite;
}
.globe-node.n1{left:23%;top:31%}.globe-node.n2{left:68%;top:22%;animation-delay:-.7s}
.globe-node.n3{left:76%;top:58%;animation-delay:-1.4s}.globe-node.n4{left:38%;top:72%;animation-delay:-2.1s}
.globe-node.n5{left:55%;top:45%;animation-delay:-1s}.globe-node.n6{left:17%;top:59%;animation-delay:-1.8s}
@keyframes nodeBreath{50%{opacity:.35;transform:scale(.7)}}
.globe-route{
  position:absolute;
  left:50%;top:50%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,transparent,rgba(105,234,255,.75),transparent);
  opacity:.38;
}
.globe-route::after{
  content:"";
  position:absolute;
  top:-2px;left:0;
  width:26px;height:5px;border-radius:999px;
  background:rgba(185,249,255,.9);
  box-shadow:0 0 15px rgba(105,234,255,.8);
  animation:introPacket 2.2s linear infinite;
}
.globe-route.r1{width:48%;transform:rotate(-30deg)}
.globe-route.r2{width:42%;transform:rotate(145deg)}
.globe-route.r3{width:46%;transform:rotate(60deg)}
@keyframes introPacket{
  from{transform:translateX(-20px);opacity:0}
  15%{opacity:1}85%{opacity:1}
  to{transform:translateX(220px);opacity:0}
}
.intro-target{
  position:absolute;
  left:50%;top:50%;
  width:80px;height:80px;
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  border:1px solid rgba(105,234,255,.35);
  border-radius:50%;
  transition:opacity .5s ease,transform .7s cubic-bezier(.18,.86,.22,1);
}
.intro-target::before,.intro-target::after{
  content:"";position:absolute;left:50%;top:50%;background:rgba(105,234,255,.46);
}
.intro-target::before{width:1px;height:116px;transform:translate(-50%,-50%)}
.intro-target::after{width:116px;height:1px;transform:translate(-50%,-50%)}
.intro-target span{
  position:absolute;inset:30%;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 28px rgba(105,234,255,.9);
}
.intro-target.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.intro-ui{
  position:relative;
  z-index:4;
  width:min(600px,calc(100% - 48px));
  margin-top:min(62vh,560px);
  display:grid;
  gap:14px;
}
.intro-brand{
  font-size:clamp(32px,5vw,58px);
  letter-spacing:-.06em;
  font-weight:640;
}
.intro-status{
  display:flex;justify-content:space-between;align-items:end;gap:18px;
  color:rgba(235,245,252,.42);
  font:9px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.08em;
}
.intro-status strong{
  color:rgba(242,249,255,.82);font-weight:500;text-align:right;
}
.intro-progress{height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.intro-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 0 24px rgba(105,234,255,.72);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.intro-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  color:rgba(235,245,252,.28);
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;
}
.intro-meta span:nth-child(n+2){text-align:center}.intro-meta span:last-child{text-align:right}

/* ------------------------------------------------------------
   Cinematic rhythm: reduce constant rotation and strengthen directed motion.
   ------------------------------------------------------------ */
.film-scene{
  --scene-energy:0;
}
.scene-copy{
  transition:opacity .28s ease;
}
.film-scene.scene-active .scene-copy{
  opacity:1;
}
.film-scene:not(.scene-active) .scene-copy{
  opacity:.82;
}

/* Background labels become quieter and more cinematic. */
.scene-id{
  transition:opacity .8s ease,filter .8s ease;
}
.film-scene.scene-active .scene-id{
  opacity:1;
  filter:blur(0);
}
.film-scene:not(.scene-active) .scene-id{
  opacity:.55;
  filter:blur(1px);
}

/* Active scene note gets subtle emphasis. */
.corner-note{
  transition:opacity .6s ease,border-color .6s ease;
}
.film-scene:not(.scene-active) .corner-note{opacity:.48}
.film-scene.scene-active .corner-note{opacity:.92;border-color:rgba(105,234,255,.26)}

/* Scrolling blur pulse on the whole WebGL canvas, restrained. */
#webgl{
  transition:filter .28s ease;
}
body.is-fast-scrolling #webgl{
  filter:saturate(.94) contrast(1.03);
}

/* Mobile intro */
@media(max-width:720px){
  .intro-globe{width:min(78vw,430px)}
  .intro-ui{margin-top:58vh}
  .intro-status{align-items:flex-start;flex-direction:column}
  .intro-status strong{text-align:left}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .globe-grid-a,.globe-grid-b,.globe-node,.globe-route::after{animation:none!important}
  .intro-globe,.intro-target{transition:none!important}
}


/* ============================================================
   ARENYXA V8 — TRUE NETWORK EARTH + CINEMATIC TYPOGRAPHY
   ============================================================ */

body.intro-active{overflow:hidden}
body.intro-active .topbar,
body.intro-active .hud,
body.intro-active .rail,
body.intro-active main,
body.intro-active footer{
  opacity:0;
  pointer-events:none;
}
.topbar,.hud,.rail,main,footer{
  transition:opacity .9s cubic-bezier(.2,.8,.2,1);
}

/* The intro is an overlay only. The Earth behind it is the real WebGL object. */
.intro-loader{
  background:
    radial-gradient(ellipse at center,transparent 0 38%,rgba(2,3,6,.20) 66%,rgba(2,3,6,.72) 100%);
  pointer-events:none;
}
.intro-loader.handoff .intro-ui,
.intro-loader.handoff .intro-crosshair{
  opacity:0;
  transform:translateY(8px);
}
.intro-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,3,6,.20),transparent 22%,transparent 76%,rgba(2,3,6,.50)),
    radial-gradient(circle at center,transparent 0 50%,rgba(2,3,6,.44) 100%);
  pointer-events:none;
}
.intro-ui{
  position:absolute;
  left:50%;
  bottom:clamp(28px,5vh,58px);
  transform:translateX(-50%);
  width:min(660px,calc(100% - 48px));
  margin:0;
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1);
}
.intro-brand{
  font-size:clamp(30px,4.5vw,58px);
  letter-spacing:-.065em;
  font-weight:650;
  margin-bottom:18px;
}
.intro-crosshair{
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;
  border:1px solid rgba(105,234,255,.26);
  border-radius:50%;
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.intro-crosshair::before,
.intro-crosshair::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(105,234,255,.28);
}
.intro-crosshair::before{width:1px;height:156px;transform:translate(-50%,-50%)}
.intro-crosshair::after{width:156px;height:1px;transform:translate(-50%,-50%)}
.intro-crosshair i{
  position:absolute;
  inset:44%;
  border-radius:50%;
  background:#dffcff;
  box-shadow:0 0 20px rgba(105,234,255,.95);
}
.intro-crosshair.show{
  opacity:.86;
  transform:translate(-50%,-50%) scale(1);
}

/* Disable all V7.5 CSS globe remnants. */
.intro-space,.intro-globe,.globe-grid,.globe-core,.globe-node,.globe-route,.intro-target{
  display:none!important;
}

/* Persistent location telemetry after the Earth becomes the Hero visual. */
.network-origin{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:11px;
  color:rgba(235,246,252,.42);
  font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.network-origin small{display:block;color:rgba(235,246,252,.30);font-size:8px}
.network-origin strong{font-weight:500;color:rgba(225,248,255,.72)}
.origin-pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(105,234,255,.88);
  animation:originPulse 2.6s ease-in-out infinite;
}
@keyframes originPulse{
  50%{opacity:.38;box-shadow:0 0 5px rgba(105,234,255,.35)}
}

/* ------------------------------------------------------------
   Scene typography is exposed line-by-line.
   No glyph splitting; line geometry stays stable.
   ------------------------------------------------------------ */
.scene-copy.reveal{
  opacity:1;
  transform:none;
  transition:none;
}
.scene-copy.reveal .kicker{
  opacity:0;
  transform:translateY(6px);
  filter:blur(3px);
  transition:
    opacity .62s ease,
    transform .72s cubic-bezier(.16,.84,.24,1),
    filter .72s ease;
}
.title-line{
  display:block;
  opacity:.10;
  transform:translateY(8px);
  filter:blur(5px);
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  transition:
    opacity .88s ease calc(.10s + var(--line-index)*.16s),
    transform 1.05s cubic-bezier(.16,.84,.24,1) calc(.08s + var(--line-index)*.16s),
    filter .95s ease calc(.08s + var(--line-index)*.16s),
    clip-path 1.16s cubic-bezier(.16,.84,.24,1) calc(.04s + var(--line-index)*.16s),
    -webkit-clip-path 1.16s cubic-bezier(.16,.84,.24,1) calc(.04s + var(--line-index)*.16s);
}
.scene-copy.reveal p,
.scene-copy.reveal .cta-row,
.scene-copy.reveal .micro,
.scene-copy.reveal .network-origin{
  opacity:0;
  transform:translateY(8px);
  filter:blur(2px);
  transition:
    opacity .72s ease,
    transform .82s cubic-bezier(.16,.84,.24,1),
    filter .82s ease;
}
.scene-copy.reveal p{transition-delay:.42s}
.scene-copy.reveal .cta-row{transition-delay:.54s}
.scene-copy.reveal .micro{transition-delay:.62s}
.scene-copy.reveal .network-origin{transition-delay:.70s}

.scene-copy.reveal.in .kicker,
.scene-copy.reveal.in .title-line,
.scene-copy.reveal.in p,
.scene-copy.reveal.in .cta-row,
.scene-copy.reveal.in .micro,
.scene-copy.reveal.in .network-origin{
  opacity:1;
  transform:none;
  filter:none;
}
.scene-copy.reveal.in .title-line{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}

/* Typography is less compressed than V7. */
.hero h1,.scene-copy h2{
  letter-spacing:-.061em;
  line-height:.92;
}
.scene-copy h2{max-width:900px}
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .scene-copy h2{
  letter-spacing:-.032em;
  line-height:1.01;
}
html[lang="ja"] .hero h1,
html[lang="ja"] .scene-copy h2{
  letter-spacing:-.025em;
  line-height:1.035;
}

/* Keyword brightness moves; the text itself does not. */
.shine{
  background-size:220% 100%;
  animation:v8Sheen 8.5s ease-in-out 1.8s infinite;
}
@keyframes v8Sheen{
  0%,100%{background-position:0% 50%;text-shadow:0 0 18px rgba(105,234,255,.04)}
  50%{background-position:52% 50%;text-shadow:0 0 32px rgba(105,234,255,.14)}
}

/* Generic notes keep a small entrance; no 34px block slide. */
.corner-note.reveal,.next-world.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .75s ease,transform .85s cubic-bezier(.2,.8,.2,1);
}
.corner-note.reveal.in,.next-world.reveal.in{
  opacity:1;
  transform:none;
}

@media(max-width:720px){
  .intro-crosshair{width:86px;height:86px}
  .intro-crosshair::before{height:120px}
  .intro-crosshair::after{width:120px}
  .network-origin{margin-top:18px}
}

@media(prefers-reduced-motion:reduce){
  .title-line,
  .scene-copy.reveal .kicker,
  .scene-copy.reveal p,
  .scene-copy.reveal .cta-row,
  .scene-copy.reveal .micro,
  .scene-copy.reveal .network-origin{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transition:none!important;
  }
}


/* ============================================================
   V8.1 — REAL CONTINENTS + DIRECT EARTH INTERACTION
   ============================================================ */
.earth-control{
  position:absolute;
  z-index:8;
  right:max(0px,calc((100vw - var(--max))/2 - 8px));
  top:110px;
  width:min(56vw,760px);
  height:68%;
  pointer-events:none;
  cursor:grab;
  touch-action:pan-y;
  outline:none;
}
.earth-control.ready{pointer-events:auto}
.earth-control:focus-visible{
  outline:1px solid rgba(105,234,255,.38);
  outline-offset:-14px;
  border-radius:50%;
}
body.earth-dragging .earth-control{cursor:grabbing}
.earth-drag-hint{
  position:absolute;
  right:clamp(20px,7vw,110px);
  bottom:clamp(30px,10vh,120px);
  color:rgba(230,247,252,.48);
  font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .7s ease,transform .7s ease;
  pointer-events:none;
}
.earth-control.ready:not(.used) .earth-drag-hint{
  opacity:.72;
  transform:none;
  animation:earthHintBreath 3.4s ease-in-out infinite;
}
.earth-control.used .earth-drag-hint{opacity:0}
@keyframes earthHintBreath{50%{opacity:.34}}

/* Give the Earth region enough clear negative space to feel like an object, not a background. */
#scene-1 .scene-copy{max-width:min(720px,51vw)}

@media(max-width:1050px){
  .earth-control{width:52vw;right:0}
  #scene-1 .scene-copy{max-width:56vw}
}
@media(max-width:720px){
  .earth-control{
    top:47%;right:0;width:100%;height:48%;
    touch-action:pan-y;
  }
  #scene-1 .scene-copy{max-width:100%}
  .earth-drag-hint{right:22px;bottom:28px}
}
@media(prefers-reduced-motion:reduce){
  .earth-drag-hint{animation:none!important}
}

body.earth-dragging{user-select:none;-webkit-user-select:none}


/* V8.2 — startup typography: fade only, no hard status switching. */
.intro-status span,
.intro-status strong{
  opacity:0;
  filter:blur(5px);
  transition:
    opacity .52s cubic-bezier(.2,.8,.2,1),
    filter .62s cubic-bezier(.2,.8,.2,1);
}
.intro-status .intro-copy-in{
  opacity:1;
  filter:blur(0);
}
.intro-status .intro-copy-out{
  opacity:0;
  filter:blur(4px);
}

/* Progress bar is intentionally removed in V8.2. */
.intro-progress{display:none!important}


/* V8.3 — repeatable reveal lifecycle */
.scene-copy.reveal,
.corner-note.reveal,
.next-world.reveal{
  will-change:opacity,transform,filter;
}


/* ============================================================
   V8.4 — TYPOGRAPHY CONTRAST / LEGIBILITY PASS
   High-end dark UI should be low-key, not unreadable.
   ============================================================ */

:root{
  --text:#f4f8fb;
  --dim:rgba(225,236,243,.74);
  --muted:rgba(210,224,233,.58);
  --faint:rgba(199,217,227,.40);
}

/* Primary scene titles: fully readable after reveal. */
.scene-copy.reveal.in .title-line{
  opacity:1 !important;
}

/* Secondary headline lines are now intentionally visible.
   The hierarchy comes from luminance, not near-transparency. */
.hero h1 .dim,
.scene-copy h2 .dim{
  color:rgba(218,230,238,.70) !important;
  opacity:1 !important;
}

/* Primary / highlighted words remain brighter, but less neon. */
.hero h1,
.scene-copy h2{
  color:rgba(246,250,252,.96);
  text-shadow:0 1px 0 rgba(255,255,255,.025);
}

.hero h1 .shine,
.scene-copy h2 .shine{
  color:rgba(247,252,255,.98);
  -webkit-text-fill-color:transparent;
  filter:none;
}

/* Body copy should not disappear into the scene. */
.scene-copy p,
.hero .scene-copy p{
  color:rgba(216,228,235,.67) !important;
}

/* Kicker / metadata stay subtle but clearly discoverable. */
.kicker{
  color:rgba(188,218,230,.64) !important;
}
.micro span{
  color:rgba(194,216,226,.50) !important;
}

/* Large background scene identifiers:
   keep them atmospheric, but no longer almost-black silhouettes. */
.scene-id{
  color:rgba(141,170,184,.105) !important;
  opacity:1 !important;
  mix-blend-mode:screen;
  text-shadow:
    0 0 40px rgba(79,128,149,.035),
    0 0 90px rgba(79,128,149,.025);
}
.film-scene.scene-active .scene-id{
  color:rgba(157,187,201,.135) !important;
}
.film-scene:not(.scene-active) .scene-id{
  color:rgba(127,151,164,.075) !important;
  opacity:1 !important;
  filter:blur(.4px);
}

/* Do not let line reveal leave the text in a permanently dim state. */
.title-line{
  color:inherit;
}
.scene-copy.reveal:not(.in) .title-line{
  opacity:.035;
}
.scene-copy.reveal.in .title-line{
  filter:none !important;
  transform:none !important;
}

/* Chinese / Japanese dark-site typography needs slightly stronger luminance
   because the glyphs carry more visual mass than Latin headlines. */
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .scene-copy h2,
html[lang="ja"] .hero h1,
html[lang="ja"] .scene-copy h2{
  color:rgba(247,250,252,.975);
}
html[lang="zh-CN"] .hero h1 .dim,
html[lang="zh-CN"] .scene-copy h2 .dim,
html[lang="ja"] .hero h1 .dim,
html[lang="ja"] .scene-copy h2 .dim{
  color:rgba(224,234,240,.76) !important;
}

/* Keep the animation elegant: exposure changes, but final text is crisp. */
@media(prefers-reduced-motion:no-preference){
  .scene-copy.reveal .title-line{
    transition:
      opacity .86s ease calc(.08s + var(--line-index)*.14s),
      transform .92s cubic-bezier(.16,.84,.24,1) calc(.06s + var(--line-index)*.14s),
      filter .86s ease calc(.06s + var(--line-index)*.14s),
      clip-path 1.02s cubic-bezier(.16,.84,.24,1) calc(.02s + var(--line-index)*.14s),
      -webkit-clip-path 1.02s cubic-bezier(.16,.84,.24,1) calc(.02s + var(--line-index)*.14s);
  }
}


/* ============================================================
   V8.5 — TYPOGRAPHY SCALE / HIERARCHY PASS
   The Earth is the primary visual; typography supports it.
   ============================================================ */

/* Reduce headline scale by roughly 18–22% from the V8.4 presentation. */
.hero h1{
  font-size:clamp(52px,6.55vw,108px) !important;
  line-height:.94 !important;
  max-width:min(760px,58vw);
}

.scene-copy h2{
  font-size:clamp(40px,4.9vw,78px) !important;
  line-height:.96 !important;
  max-width:min(820px,64vw) !important;
}

/* Narrow the copy column so the 3D composition retains more negative space. */
.scene-copy{
  max-width:min(850px,66vw);
}

.hero .scene-copy{
  max-width:min(800px,61vw);
}

/* Give headlines more air instead of compensating with size. */
.scene-copy h1,
.scene-copy h2{
  margin-bottom:clamp(22px,2.25vw,34px);
}

.scene-copy p{
  max-width:650px;
  line-height:1.68;
}

/* CTA / micro-information sit slightly farther from the headline block. */
.cta-row{
  margin-top:clamp(24px,2.3vw,34px);
}

.micro{
  margin-top:clamp(22px,2vw,30px);
}

/* Hero location telemetry should read as tertiary information. */
.network-origin{
  margin-top:24px;
}

/* Chinese and Japanese need slightly different optical sizing. */
html[lang="zh-CN"] .hero h1{
  font-size:clamp(48px,6.05vw,98px) !important;
  line-height:1.035 !important;
  max-width:min(760px,60vw);
}

html[lang="zh-CN"] .scene-copy h2{
  font-size:clamp(38px,4.55vw,72px) !important;
  line-height:1.06 !important;
}

html[lang="ja"] .hero h1{
  font-size:clamp(48px,5.9vw,96px) !important;
  line-height:1.05 !important;
}

html[lang="ja"] .scene-copy h2{
  font-size:clamp(37px,4.45vw,70px) !important;
  line-height:1.07 !important;
}

/* Tablet */
@media(max-width:1050px){
  .hero h1{
    font-size:clamp(48px,7.1vw,82px) !important;
    max-width:72vw;
  }
  .scene-copy h2{
    font-size:clamp(38px,5.8vw,66px) !important;
    max-width:76vw !important;
  }
  .scene-copy,
  .hero .scene-copy{
    max-width:74vw;
  }
}

/* Mobile keeps strong hierarchy but avoids giant poster typography. */
@media(max-width:720px){
  .hero h1{
    font-size:clamp(42px,12.4vw,64px) !important;
    line-height:.98 !important;
    max-width:92vw;
  }
  .scene-copy h2{
    font-size:clamp(34px,9.8vw,52px) !important;
    line-height:1.02 !important;
    max-width:92vw !important;
  }
  .scene-copy,
  .hero .scene-copy{
    max-width:92vw;
  }
  .scene-copy p{
    max-width:88vw;
    line-height:1.62;
  }
}


/* ============================================================
   V8.6 — SCENE ID SCALE PASS
   Background atmospheric words should support composition,
   not dominate the frame.
   ============================================================ */

/* Global background scene word / scene identifier */
.scene-id{
  font-size:clamp(88px,16vw,260px) !important;
  line-height:.88 !important;
  letter-spacing:-.045em !important;
  max-width:88vw;
}

/* Slightly smaller on the active scene so it does not flood the frame. */
.film-scene.scene-active .scene-id{
  font-size:clamp(88px,15vw,244px) !important;
}

/* Scene ID should read as an atmospheric plane, not as foreground UI. */
.scene-id{
  color:rgba(150,177,191,.090) !important;
}
.film-scene.scene-active .scene-id{
  color:rgba(164,191,203,.115) !important;
}
.film-scene:not(.scene-active) .scene-id{
  color:rgba(126,149,161,.062) !important;
}

/* Keep extra-large words like CAPTURE / FORENSICS from swallowing the scene */
@media(min-width:1280px){
  .scene-id{
    font-size:clamp(84px,14vw,232px) !important;
  }
  .film-scene.scene-active .scene-id{
    font-size:clamp(84px,13.5vw,220px) !important;
  }
}

/* Tablet */
@media(max-width:1050px){
  .scene-id{
    font-size:clamp(72px,14vw,180px) !important;
    max-width:92vw;
  }
  .film-scene.scene-active .scene-id{
    font-size:clamp(72px,13vw,172px) !important;
  }
}

/* Mobile: keep them present, but clearly secondary */
@media(max-width:720px){
  .scene-id{
    font-size:clamp(54px,18vw,112px) !important;
    line-height:.92 !important;
    max-width:94vw;
  }
  .film-scene.scene-active .scene-id{
    font-size:clamp(54px,17vw,106px) !important;
  }
}


/* ============================================================
   V8.7 — SCENE 02 / SPINE BACKGROUND WORD
   SPINE is a scene marker, not a primary headline.
   ============================================================ */

#scene-2 .scene-id{
  font-size:clamp(64px,8.2vw,132px) !important;
  line-height:.90 !important;
  letter-spacing:-.04em !important;
  color:rgba(145,170,184,.070) !important;
  max-width:46vw !important;
}

#scene-2.scene-active .scene-id{
  font-size:clamp(64px,7.8vw,124px) !important;
  color:rgba(155,181,194,.090) !important;
}

/* Keep it tucked into the lower-left atmosphere layer. */
#scene-2 .scene-id.left{
  left:clamp(26px,6vw,112px) !important;
  bottom:clamp(70px,11vh,150px) !important;
}

@media(max-width:1050px){
  #scene-2 .scene-id,
  #scene-2.scene-active .scene-id{
    font-size:clamp(54px,9vw,104px) !important;
    max-width:52vw !important;
  }
}

@media(max-width:720px){
  #scene-2 .scene-id,
  #scene-2.scene-active .scene-id{
    font-size:clamp(42px,13vw,76px) !important;
    max-width:70vw !important;
  }
}


/* ============================================================
   V8.8 — GLOBAL SCENE ID SCALE
   Applies to ALL atmospheric giant words:
   CORE / SPINE / CAPTURE / ROOT / FORENSICS / DEVELOPER / ...
   ============================================================ */

/* Every scene background word is now clearly tertiary. */
.film-scene .scene-id{
  font-size:clamp(58px,7.4vw,118px) !important;
  line-height:.90 !important;
  letter-spacing:-.035em !important;
  max-width:48vw !important;
  color:rgba(145,170,184,.060) !important;
  opacity:1 !important;
  text-shadow:
    0 0 28px rgba(80,128,150,.020),
    0 0 72px rgba(80,128,150,.014) !important;
}

/* Active scene gets only a very small emphasis; never a size jump. */
.film-scene.scene-active .scene-id{
  font-size:clamp(58px,7.1vw,112px) !important;
  color:rgba(156,181,193,.078) !important;
}

/* Inactive scene markers stay even quieter. */
.film-scene:not(.scene-active) .scene-id{
  font-size:clamp(56px,6.8vw,108px) !important;
  color:rgba(128,151,163,.044) !important;
  filter:blur(.25px) !important;
}

/* Left/right atmospheric words keep a safe distance from content. */
.film-scene .scene-id.left{
  left:clamp(24px,5.2vw,92px) !important;
}
.film-scene .scene-id:not(.left){
  right:clamp(24px,5.2vw,92px);
}

/* Extra-wide desktop should NOT allow the giant words to scale back up. */
@media(min-width:1440px){
  .film-scene .scene-id{
    font-size:clamp(58px,6.3vw,112px) !important;
  }
  .film-scene.scene-active .scene-id{
    font-size:clamp(58px,6vw,106px) !important;
  }
}

/* Tablet */
@media(max-width:1050px){
  .film-scene .scene-id,
  .film-scene.scene-active .scene-id,
  .film-scene:not(.scene-active) .scene-id{
    font-size:clamp(48px,8.5vw,88px) !important;
    max-width:56vw !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .film-scene .scene-id,
  .film-scene.scene-active .scene-id,
  .film-scene:not(.scene-active) .scene-id{
    font-size:clamp(38px,11.5vw,64px) !important;
    max-width:72vw !important;
    line-height:.94 !important;
  }
}

/* Retire the old Scene-02-only exception by overriding it globally. */
#scene-2 .scene-id,
#scene-2.scene-active .scene-id{
  font-size:inherit !important;
  max-width:48vw !important;
}


/* V8.9 — clickable Earth node affordance */
.earth-control.ready{
  pointer-events:auto;
}
.earth-control.ready:hover{
  cursor:grab;
}
body.earth-dragging .earth-control.ready{
  cursor:grabbing !important;
}


/* ============================================================
   V9.0 — REMOVE ATMOSPHERIC GIANT SCENE WORDS
   SPINE / FIELD / CAPTURE / EVIDENCE / PROTOCOL / MITM /
   ZERO / ROOT / INSTALL / BURST / DEV / CORE etc.
   ============================================================ */
.scene-id{
  display:none !important;
}


/* V9.1 Hybrid Flagship — extended language fit */
.lang-menu{max-height:min(72vh,460px);overflow-y:auto;scrollbar-width:thin}
html[lang="de"] .scene-copy h1,html[lang="de"] .scene-copy h2,html[lang="fr"] .scene-copy h1,html[lang="fr"] .scene-copy h2,html[lang="es"] .scene-copy h1,html[lang="es"] .scene-copy h2{font-size:clamp(44px,5.55vw,84px);letter-spacing:-.058em;line-height:.93}
html[lang="ko"] .scene-copy h1,html[lang="ko"] .scene-copy h2,html[lang="zh-TW"] .scene-copy h1,html[lang="zh-TW"] .scene-copy h2{letter-spacing:-.045em;line-height:.96}
@media(max-width:720px){html[lang="de"] .scene-copy h1,html[lang="de"] .scene-copy h2,html[lang="fr"] .scene-copy h1,html[lang="fr"] .scene-copy h2,html[lang="es"] .scene-copy h1,html[lang="es"] .scene-copy h2{font-size:clamp(38px,11.7vw,62px);line-height:.98}}