:root { --snow:#f4f7fb; --frost:#c8d7e7; --ice:#8fb6d7; --glacier:#557898; --rock:#34475d; --ink:#172638; --muted:#435970; --accent:#79a9d0; --line:rgba(31,51,73,.24); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#aeb8c7; color:var(--ink); font-family:"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif; }
body { overflow:hidden; }
.fx-defs { position:fixed; width:0; height:0; overflow:hidden; pointer-events:none; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.hero { position:relative; isolation:isolate; height:100svh; min-height:100svh; overflow:hidden; background:#b7c0ce; }
#terrain-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; transform:scale(1.115); transform-origin:52% 58%; transition:transform 2.35s cubic-bezier(.16,.7,.16,1); will-change:transform; }
html.story-camera-pull #terrain-canvas { transform:scale(1); }
html.story-camera-pull .glass-nav,html.story-camera-pull .copy,html.story-camera-pull .hint,html.story-camera-pull .index { opacity:0; filter:blur(5px); transform:translateY(-5px); transition:opacity .52s ease,filter .52s ease,transform .62s ease; }
.terrain-wireframe-layer { position:absolute; inset:0; z-index:1.35; pointer-events:none; background:url('../../assets/terrain-scan/terrain-wireframe.png') center top / cover no-repeat; mix-blend-mode:screen; opacity:var(--terrain-wire-opacity,0); filter:drop-shadow(0 0 5px rgba(222,241,250,.42)); will-change:opacity,filter; }
#fog-canvas { position:absolute; inset:0; z-index:.6; width:100%; height:100%; pointer-events:none; mix-blend-mode:normal; opacity:1; }
#bgCv { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.cube-ground-light { position:absolute; z-index:2; left:67%; top:64%; width:min(42vw,650px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(222,240,249,.3) 0%,rgba(158,193,216,.18) 24%,rgba(106,145,176,.075) 48%,transparent 72%); filter:blur(24px); mix-blend-mode:screen; opacity:.18; transition:opacity .18s ease; will-change:left,top,transform,opacity; }
.cube-inner-light { position:absolute; z-index:2; left:73%; top:42%; width:min(42vw,610px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(250,253,255,.88) 0%,rgba(228,244,252,.62) 16%,rgba(190,222,239,.34) 38%,rgba(142,184,211,.12) 59%,transparent 79%); filter:blur(22px); mix-blend-mode:screen; opacity:.94; }
#cube-stage { position:absolute; z-index:3; inset:0; pointer-events:none; filter:drop-shadow(0 32px 28px rgba(22,38,54,.22)); }
#cube-stage canvas { display:block; width:100%; height:100%; }
html:not(.story-camera-pull) #cube-stage,html.story-camera-pull #cube-stage { transform:translate3d(0,0,0) scale(1); transform-origin:70% 54%; transition:filter 1s ease,opacity .8s ease; }
html.story-camera-pull #cube-stage { filter:drop-shadow(0 20px 22px rgba(22,38,54,.12)); }
.atmosphere { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg,rgba(226,233,241,.76) 0%,rgba(222,230,239,.38) 31%,rgba(215,224,234,.08) 56%,rgba(28,45,64,.18) 100%),linear-gradient(180deg,rgba(244,247,251,.08),rgba(58,75,96,.2)); }
.atmosphere::before { content:""; position:absolute; inset:0; background-image:url('../../reference-mountain-rock-albedo.png'); background-size:520px 520px; opacity:.075; mix-blend-mode:soft-light; filter:contrast(.82) saturate(.72); mask-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.68) 42%,#000 100%); }
.atmosphere::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 56% 42%,transparent 12%,rgba(32,48,66,.13) 100%); }
.nav { display:none !important; }
.glass-nav { position:absolute; z-index:8; top:24px; left:50%; width:min(1080px,88vw); transform:translateX(-50%); display:block; height:50px; color:#182838; }
.glass-nav[hidden] { display:none !important; }
.nav-logo,.nav-links,.nav-meta { position:relative; overflow:hidden; isolation:isolate; border:0; background:rgba(185,207,223,.045); box-shadow:inset 0 1px 1px rgba(248,252,255,.13),inset 0 -1px 1px rgba(60,87,108,.045),0 11px 34px rgba(35,54,72,.045); backdrop-filter:blur(7px) saturate(1.04) contrast(1.025); -webkit-backdrop-filter:blur(7px) saturate(1.04) contrast(1.025); }
.nav-logo::before,.nav-links::before,.nav-meta::before { display:none; }
.nav-logo::after,.nav-links::after,.nav-meta::after { content:""; position:absolute; inset:1px; z-index:-1; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(243,249,253,.032),rgba(142,174,197,.012)); box-shadow:inset 0 0 10px rgba(236,247,253,.025); }
.nav-logo { display:flex; align-items:center; gap:12px; padding:0 25px; border-radius:14px; }
.nav-logo-mark { position:relative; width:28px; height:28px; border:1.5px solid #35546e; border-radius:9px; transform:rotate(45deg); box-shadow:inset 0 0 0 5px rgba(76,111,139,.08); }
.nav-logo-mark::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#35546e; box-shadow:0 0 12px rgba(80,126,160,.35); }
.nav-logo-copy { font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif; font-size:12px; font-weight:700; line-height:.9; letter-spacing:.08em; }
.nav-links { display:grid; grid-template-columns:repeat(6,1fr); align-items:center; height:100%; padding:0 12px; border-radius:12px; }
.nav-links a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; color:#2d4355; font-size:14px; font-weight:520; letter-spacing:.02em; text-shadow:0 1px 1px rgba(245,251,255,.4); transition:color .25s ease; border-radius:11px; }
.nav-links a:hover,.nav-links a.active { color:#101e2b; background:transparent; box-shadow:none; backdrop-filter:none; }
.nav-links a.active { font-weight:700; }
.nav-links a.active::after { display:none; }
.nav-meta { display:flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; font-size:13px; font-weight:650; letter-spacing:.03em; }
.nav-meta i { width:9px; height:9px; border-radius:50%; background:#54758f; box-shadow:0 0 0 4px rgba(84,117,143,.1),0 0 12px rgba(84,117,143,.3); }
@keyframes liquidGlassDrift { 0% { transform:translate3d(-9%,-2%,0) rotate(-2deg) scale(1); } 52% { transform:translate3d(2%,2%,0) rotate(1deg) scale(1.06); } 100% { transform:translate3d(9%,-1%,0) rotate(-1deg) scale(1.02); } }
.brand { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:600; line-height:1.05; letter-spacing:.04em; }
.brand svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.5; }
.brand svg circle { fill:currentColor; stroke:none; }
.nav nav { display:flex; align-items:center; gap:34px; }
.nav nav>a { position:relative; color:var(--rock); }
.nav nav>a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:var(--ink); transition:right .35s ease; }
.nav nav>a:hover::after { right:0; }
.sound { display:flex; align-items:center; gap:3px; border:0; padding:7px 0 7px 18px; background:none; cursor:pointer; }
.sound i { display:block; width:1px; height:9px; background:var(--glacier); animation:meter .8s ease-in-out infinite alternate; }
.sound i:nth-child(2) { height:14px; animation-delay:-.4s; }.sound i:nth-child(3){height:6px;animation-delay:-.15s}.sound span{margin-left:7px;color:var(--muted)}
@keyframes meter { to { transform:scaleY(.35); opacity:.45; } }
.copy { position:absolute; z-index:5; top:49%; left:8.5vw; transform:translateY(-50%); width:min(620px,48vw); pointer-events:none; }
#text-mist { position:fixed; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; mix-blend-mode:normal; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 25px; color:rgba(235,244,250,.82); font-family:"Bahnschrift SemiCondensed","Arial Narrow",sans-serif; font-size:10px; font-weight:600; letter-spacing:.26em; text-shadow:0 1px 1px rgba(24,43,61,.62),0 0 12px rgba(226,244,255,.34); }
.eyebrow span { width:28px; height:1px; background:rgba(237,249,255,.88); box-shadow:0 0 10px rgba(205,235,252,.62); }
h1 { margin:0; font-size:clamp(64px,7.25vw,116px); font-weight:600; line-height:.82; letter-spacing:-.055em; filter:url(#text-fluid-filter); will-change:filter,transform; }
h1 { color:#f3f8fb; text-shadow:0 1px 1px rgba(31,48,64,.78),0 0 7px rgba(239,250,255,.42),0 0 24px rgba(190,224,244,.3); }
h1 span { display:inline-block; font-family:"Bahnschrift","Arial Black",sans-serif; font-size:1.02em; font-weight:700; font-stretch:expanded; letter-spacing:-.045em; filter:drop-shadow(0 2px 1px rgba(30,47,63,.26)); }
h1 em { display:inline-block; margin-top:.17em; margin-left:0; color:rgba(225,240,249,.92); font-family:"Microsoft YaHei UI","PingFang SC",sans-serif; font-size:.68em; font-style:normal; font-weight:600; letter-spacing:-.045em; text-shadow:0 1px 1px rgba(35,54,72,.68),0 0 11px rgba(220,242,255,.34); }
.intro { width:560px; margin:32px 0 0; color:rgba(229,240,247,.94); font-size:20px; font-weight:600; line-height:1.55; letter-spacing:.055em; text-shadow:0 1px 2px rgba(31,48,64,.7),0 0 14px rgba(224,241,251,.32); }
.hint { position:absolute; z-index:3; left:48px; bottom:35px; display:flex; align-items:center; gap:13px; color:#40566d; font-size:9px; letter-spacing:.14em; }
.hint i { width:34px; height:1px; overflow:visible; background:linear-gradient(90deg,var(--accent) 50%,rgba(31,51,73,.18) 50%); background-size:200%; animation:flow 1.8s ease-in-out infinite; }
@keyframes flow { 50% { background-position:-100% 0; } }
.index { position:absolute; z-index:3; right:48px; bottom:36px; color:#435970; font-size:9px; letter-spacing:.16em; }
.cursor { position:fixed; z-index:20; top:0; left:0; width:8px; height:8px; opacity:0; border:0; border-radius:50%; pointer-events:none; mix-blend-mode:normal; transition:opacity .2s; will-change:transform; }
.cursor span { position:absolute; top:50%; left:50%; width:6px; height:6px; transform:translate(-50%,-50%); border-radius:50%; background:#dbeaf6; box-shadow:0 0 4px rgba(30,52,74,.75),0 0 14px rgba(137,187,225,.9); }
.cursor.hover { width:8px; height:8px; }
@media (pointer:fine) { body, a, button { cursor:none; } }
@media (max-width:760px) {
  .glass-nav { top:14px; left:14px; right:14px; width:auto; height:46px; transform:none; }
  .nav-logo { padding:0 17px; }
  .nav-logo-mark { width:23px; height:23px; }
  .nav-logo-copy { font-size:10px; }
  .nav-links { display:flex; justify-content:flex-end; padding:0 10px; }
  .nav-links a { display:none; }
  .nav-links a:first-child { display:flex; width:70px; }
  .nav-meta { display:none; }
  .nav { padding:24px 22px; }.nav nav>a{display:none}.nav nav{gap:12px}.sound span{display:none}
  .copy { top:43%; left:24px; width:calc(100% - 48px); }.eyebrow{margin-bottom:20px}
  h1 { font-size:clamp(56px,18vw,82px); line-height:.88; } h1 em{margin-left:0}
  .intro { width:90%; margin-top:24px; font-size:16px; }
  .hint { left:22px; bottom:28px; }.index { display:none; }.cursor{display:none}
  .atmosphere { background:linear-gradient(180deg,rgba(8,9,13,.25),rgba(8,9,13,.5)); }
  #cube-stage { transform:translate(18vw,12vh) scale(.78); transform-origin:center; opacity:.88; }
  .cube-ground-light { left:66%; top:72%; width:66vw; height:18vw; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }