/* AGENRA — THE DIVE (mockup v2). Descend: Space → Sky → Peaks → Glacier → Camp */
:root{
  --brand:#2E5BBA; --brand-hi:#4D8BFF;
  --ink:#0b1030; --paper:#f7fbff;
  --amber:#FFB547; --wood:#8A5A2B; --wood-dk:#5e3a17;
  --ice:#EAF6FF; --ice-2:#9FD3F5;
  --abyss:#050F2A; --glow-c:#46f0ff; --glow-v:#a98bff;
  --f-shell:"Sora","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-title:"Lilita One","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --f-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,72px);
  --maxw:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:clamp(16px,1.1vw,18px);line-height:1.6;color:#fff;background:#070b2a;overflow-x:hidden}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:min(100% - var(--pad)*2,var(--maxw));margin-inline:auto;position:relative;z-index:3}

/* ---------- zones ---------- */
.zone{position:relative;isolation:isolate}
.zone>.bg,.fx{position:absolute;inset:0;pointer-events:none}
.eyebrow{font-family:var(--f-shell);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;opacity:.7}
.h2{font-family:var(--f-shell);font-weight:700;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.08;letter-spacing:-.02em}
.lede{font-size:clamp(1.02rem,1.3vw,1.2rem);max-width:56ch}
.chip{display:inline-block;font-family:var(--f-shell);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .8em;border-radius:99px;background:rgba(10,14,40,.82);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);white-space:nowrap}
.chip.warm{background:rgba(255,181,71,.95);color:#3a2300;border-color:#fff7}
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-shell);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4em .9em;border-radius:99px;border:1px solid currentColor}
.badge::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-shell);font-weight:600;font-size:.95rem;text-decoration:none;padding:.9em 1.5em;border-radius:99px;min-height:48px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#4D8BFF,#8a6bff);color:#fff;box-shadow:0 10px 30px -8px rgba(77,139,255,.8)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}

/* ---------- nav ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:30;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.top .logo img{height:34px;width:auto}
.top nav ul{display:flex;gap:6px}
.top nav a{display:block;font-family:var(--f-shell);font-size:.85rem;font-weight:600;text-decoration:none;padding:.6em 1em;border-radius:99px;color:#dfe6ff}
.top nav a:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- depth gauge ---------- */
.gauge{position:fixed;right:clamp(10px,1.8vw,28px);top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:0;font-family:var(--f-shell);color:#fff;mix-blend-mode:normal}
.gauge ol{position:relative;display:flex;flex-direction:column;gap:22px;padding:18px 16px 18px 18px;border-radius:22px;background:rgba(6,12,40,.62);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px -18px rgba(0,0,0,.6)}
.gauge ol::before{content:"";position:absolute;right:21px;top:26px;bottom:26px;width:2px;background:rgba(255,255,255,.22);border-radius:2px}
.gauge ol::after{content:"";position:absolute;right:21px;top:26px;width:2px;height:calc((100% - 52px)*var(--prog,0));background:linear-gradient(#ffb547,#46f0ff);border-radius:2px;transition:height .15s linear}
.gauge a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:14px;text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);min-height:24px}
.gauge a i{display:block;width:12px;height:12px;border-radius:50%;background:#0a1236;border:2px solid rgba(255,255,255,.65);z-index:1;transition:.25s}
.gauge a:hover{color:#fff}
.gauge a[aria-current="true"]{color:#fff}
.gauge a[aria-current="true"] i{background:var(--amber);border-color:#fff;transform:scale(1.4);box-shadow:0 0 14px var(--amber)}
.gauge small{display:block;font-size:.62rem;letter-spacing:.14em;opacity:.65;margin-top:8px;padding-right:6px;text-transform:uppercase}
.gauge .alt{font-variant-numeric:tabular-nums}
.chip-nav{display:none}

/* ---------- 1 SPACE ---------- */
#space{min-height:max(100svh,760px);background:radial-gradient(120% 80% at 70% 10%,#2a1b6e 0%,#1a1259 38%,#0b0d36 70%,#140f4a 100%);display:grid;align-items:center;padding:140px 0 220px;overflow:hidden}
#space .stars{position:absolute;inset:0;background-image:
  radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#cfe0ff,transparent),
  radial-gradient(2px 2px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 180px,#fff,transparent),
  radial-gradient(1.5px 1.5px at 310px 90px,#ffe9c9,transparent),radial-gradient(1px 1px at 380px 230px,#fff,transparent);
  background-size:410px 260px;opacity:.9;animation:twinkle 5s ease-in-out infinite alternate}
#space .stars.s2{background-size:277px 331px;background-position:70px 40px;opacity:.6;animation-duration:7s;animation-delay:-2s}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.aurora{position:absolute;left:-10%;right:-10%;top:-5%;height:70%;background:
  radial-gradient(50% 60% at 30% 40%,rgba(70,240,255,.28),transparent 70%),
  radial-gradient(45% 55% at 62% 30%,rgba(169,139,255,.34),transparent 70%),
  radial-gradient(40% 50% at 85% 55%,rgba(255,122,200,.22),transparent 70%);filter:blur(30px);animation:aur 14s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(4%,6%,0) scale(1.08)}}
.rings{position:absolute;right:-14vw;top:50%;width:min(88vw,900px);aspect-ratio:1;transform:translateY(-50%);opacity:.9;animation:spin 140s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.hero h1{font-family:var(--f-shell);font-weight:800;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.035em;margin:18px 0 22px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#7fb0ff,#c3a6ff 50%,#ffc9a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:#cdd6ff}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.portals{position:relative;min-height:clamp(400px,40vw,520px)}
.planet{position:absolute;display:flex;flex-direction:column;align-items:center;gap:18px;width:var(--sz);text-decoration:none;color:#fff;text-align:center}
.planet-sky{--sz:clamp(160px,17vw,250px);--glow:255,150,180;left:0;top:0}
.planet-peak{--sz:clamp(140px,14.5vw,210px);--glow:150,215,255;right:0;top:clamp(110px,12vw,170px)}
.orb{position:relative;display:block;width:var(--sz);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#101040;animation:bob 8s ease-in-out infinite;box-shadow:0 0 0 1px rgba(var(--glow),.35),0 0 46px 4px rgba(var(--glow),.5),0 0 120px 24px rgba(var(--glow),.22);transition:scale .4s cubic-bezier(.2,.9,.3,1.3)}
.planet-peak .orb{animation-delay:-3s}
.planet:hover .orb{scale:1.06}
.orb img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--zoom,2));transform-origin:var(--ox,50%) var(--oy,50%);animation:drift 36s ease-in-out infinite alternate}
.planet-peak .orb img{animation-duration:44s}
@keyframes drift{from{translate:-4% -2%}to{translate:4% 3%}}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.28),transparent 34%);box-shadow:inset -22px -26px 46px rgba(4,4,36,.78),inset 10px 10px 26px rgba(255,255,255,.16)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:3;box-shadow:inset 0 0 0 2px rgba(var(--glow),.6),inset 0 0 26px 6px rgba(var(--glow),.5);mix-blend-mode:screen}
.plabel b{display:block;font-family:var(--f-title);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:.02em;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.plabel small{display:block;font-family:var(--f-shell);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#cdd6ff;margin-top:6px}
.planet:hover .plabel b{color:var(--amber)}
.emblem{position:absolute;width:clamp(84px,9vw,130px);right:3%;top:-4px;filter:drop-shadow(0 0 28px rgba(120,160,255,.85));animation:bob 6s ease-in-out infinite -1s}
@keyframes bob{50%{translate:0 -14px}}
.scroll-hint{position:absolute;z-index:5;left:50%;bottom:150px;translate:-50% 0;font-family:var(--f-shell);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:#cdd6ff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:2px;height:38px;background:linear-gradient(#fff,transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 2 SKY ---------- */
#sky{background:linear-gradient(180deg,#140f4a 0,#2f1c76 6%,#5a2a8d 22%,#b24a98 48%,#f08a8c 72%,#ffc7a4 92%,#ffe1d0 100%);padding:clamp(90px,10vw,150px) 0 clamp(120px,12vw,180px);overflow:clip}
#sky .sun{position:absolute;left:50%;top:44%;width:80vw;max-width:1100px;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(255,220,180,.55),rgba(255,170,150,.18) 40%,transparent 66%)}
.cloud-bank{position:absolute;left:0;right:0;bottom:-1px;height:clamp(110px,13vw,190px);background:url(svg/cloud-bank.svg) bottom/100% 100% no-repeat;z-index:4;pointer-events:none}
.sky-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center}
.sky .eyebrow{color:#ffd9b8}
.q-title{width:min(100%,560px);filter:drop-shadow(0 12px 30px rgba(40,10,80,.55));margin:14px 0 20px}
.q-title-text{font-family:var(--f-title);font-weight:400;font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:.01em;text-shadow:0 4px 0 #4a2a8f,0 14px 40px rgba(40,10,80,.5);margin:14px 0 20px}
.sky .lede{color:#fff1e8}
.sky-stage{position:relative;min-height:clamp(380px,46vw,640px)}
.island{position:absolute;right:-2%;top:0;width:min(86%,560px);filter:drop-shadow(0 40px 40px rgba(60,10,70,.45));--idle:bob 9s ease-in-out infinite;animation:var(--idle)}
.ship{position:absolute;left:-6%;top:-2%;width:138px;filter:drop-shadow(0 18px 20px rgba(40,10,80,.5));--idle:fly 16s ease-in-out infinite alternate;animation:var(--idle)}
@keyframes fly{from{translate:0 0;rotate:-3deg}to{translate:140px 24px;rotate:2deg}}
.rival{position:absolute;right:2%;bottom:-8%;width:clamp(110px,15vw,210px);filter:drop-shadow(0 20px 24px rgba(40,10,80,.55));animation:bob 8s ease-in-out infinite -4s}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,22px);margin-top:clamp(40px,6vw,80px);--h:46px}
.reel{position:relative;border-radius:22px;padding:6px;background:linear-gradient(160deg,#ffe6a8,#ffb547 40%,#b36a12);box-shadow:0 18px 40px -14px rgba(50,10,80,.6),inset 0 2px 0 rgba(255,255,255,.55);display:flex;flex-direction:column}
.reel>.no,.reel>p{position:relative;z-index:3}
.reel{background-clip:padding-box}
.reel::before{content:"";position:absolute;inset:6px;border-radius:17px;background:linear-gradient(180deg,#25124f,#3a1c78 50%,#25124f);z-index:0}
.reel .no{align-self:flex-start;margin:14px 0 0 16px;font-family:var(--f-shell);font-size:.66rem;letter-spacing:.2em;color:#ffd58a}
.win{position:relative;z-index:2;height:calc(var(--h)*3);margin:8px 14px 0;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#150a33,#2a1360 50%,#150a33);box-shadow:inset 0 0 0 2px #0e0624,inset 0 4px 12px rgba(0,0,0,.7),0 0 0 2px rgba(255,200,110,.55),0 0 0 4px #7a4a10}
.win::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#150a33 0,rgba(21,10,51,.55) 30%,transparent 38%,transparent 62%,rgba(21,10,51,.55) 70%,#150a33 100%)}
.win::after{content:"";position:absolute;left:0;right:0;top:var(--h);height:var(--h);z-index:3;pointer-events:none;border-block:2px solid rgba(255,197,82,.75);background:linear-gradient(90deg,rgba(255,197,82,.22),transparent 20%,transparent 80%,rgba(255,197,82,.22))}
.strip{display:flex;flex-direction:column;transform:translateY(calc(var(--h)*-4))}
.strip span{height:var(--h);line-height:var(--h);text-align:center;flex:none}
.strip .sym{font-size:1.25rem;color:#a98bff;text-shadow:0 0 10px rgba(169,139,255,.8)}
.strip .word{font-family:var(--f-title);font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:.04em;background:linear-gradient(#fff6d0,#ffc552 60%,#ff9b2f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #6b3a05)}
@keyframes reelspin{from{transform:translateY(0)}70%{transform:translateY(calc(var(--h)*-4.25))}to{transform:translateY(calc(var(--h)*-4))}}
.reel:hover .strip,.reel.spin .strip{animation:reelspin 1.15s cubic-bezier(.3,.7,.25,1) both}
.reel p{font-size:.9rem;color:#ead9ff;margin:12px 16px 18px;line-height:1.4;text-align:center}
.strike{display:flex;flex-wrap:nowrap;align-items:center;gap:16px 24px;margin-top:26px;padding:12px 14px 12px 12px;border-radius:99px;background:rgba(30,10,70,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);width:fit-content;max-width:100%}
.strike img{width:clamp(120px,12vw,160px);height:auto}
.strike span{font-weight:600;font-size:.95rem;padding-right:12px;min-width:0}
.strike b{font-family:var(--f-title);font-weight:400;color:#ff9b9b;letter-spacing:.06em;font-size:1.2rem}
.shots{padding-bottom:14px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);gap:clamp(14px,2.4vw,32px);align-items:end;margin-top:clamp(34px,5vw,64px)}
.frame{position:relative;border-radius:22px;background:#150a34;box-shadow:0 30px 60px -24px rgba(30,5,70,.75),0 0 0 6px rgba(255,255,255,.18),0 0 0 7px rgba(255,255,255,.4)}
.frame img{width:100%;border-radius:22px}
.frame .chip{position:absolute;left:14px;bottom:-11px;z-index:4}
.frame.tall{max-width:300px;justify-self:end}
.frame.tall,.frame.wide{transform:rotate(var(--rot,0deg))}
.shots .wide{--rot:-1deg}.shots .tall{--rot:2deg}

/* ---------- 3 PEAKS ---------- */
#peaks{background:linear-gradient(180deg,var(--ice) 0,#d9eefc 35%,#b8dcf5 70%,var(--ice-2) 100%);color:#0b2a4a;padding:clamp(80px,9vw,130px) 0 clamp(190px,18vw,280px);overflow:clip}
#peaks .ridge{position:absolute;left:0;right:0;top:0;height:clamp(120px,15vw,230px);background:url(svg/snowy-ridge.svg) top/100% 100% no-repeat}
#peaks .eyebrow{color:#2a74b0}
.sign{position:relative;width:min(100%,445px);margin:6px 0 10px;filter:drop-shadow(0 18px 18px rgba(30,70,110,.35));transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{rotate:1.6deg}}
.t-title-text{font-family:var(--f-title);font-weight:400;font-size:clamp(2.6rem,6vw,5rem);line-height:.95;color:#fff;-webkit-text-stroke:0;text-shadow:0 5px 0 var(--wood),0 6px 0 var(--wood-dk),0 18px 30px rgba(30,70,110,.35);margin:10px 0 16px}
.peaks-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,80px);align-items:center}
.peaks .lede{color:#1d4469}
.status{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.peaks .status .badge{color:#a85a00;background:#fff3dc}
.status small{color:#3a6a94;font-size:.82rem}
.phone-stage{position:relative;display:flex;justify-content:center;padding-top:clamp(30px,6vw,90px)}
.phone{position:relative;width:min(100%,330px);padding:12px;border-radius:44px;background:linear-gradient(160deg,#334a63,#101a2b);box-shadow:0 40px 70px -26px rgba(15,50,90,.7),inset 0 0 0 2px #5d7792;rotate:2.5deg;z-index:2}
.phone::before{content:"";position:absolute;top:18px;left:50%;translate:-50%;width:84px;height:20px;border-radius:12px;background:#0b1320;z-index:3}
.phone img{border-radius:34px;width:100%}
.phone .chip{position:absolute;left:50%;translate:-50% 0;bottom:-11px;z-index:3;white-space:nowrap}
.mammoth{position:absolute;left:-14%;bottom:-10%;width:clamp(170px,22vw,300px);z-index:3;filter:drop-shadow(0 20px 22px rgba(20,60,100,.4))}
.card-pop{position:absolute;right:-2%;top:0;width:clamp(130px,13vw,190px);z-index:3;filter:drop-shadow(0 16px 20px rgba(20,60,100,.4));--idle:bob 7s ease-in-out infinite -2s;animation:var(--idle)}
.planks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,34px);margin-top:clamp(70px,9vw,130px)}
.plank{position:relative;padding:clamp(46px,5vw,64px) clamp(18px,2.2vw,30px) 28px;border-radius:14px;color:#fff6e4;background:
  repeating-linear-gradient(95deg,rgba(60,30,5,.0) 0 28px,rgba(60,30,5,.16) 28px 30px,rgba(255,220,160,.07) 30px 36px),
  linear-gradient(180deg,#a56d36,var(--wood) 50%,#6e4420);box-shadow:inset 0 3px 0 rgba(255,220,160,.35),inset 0 -6px 0 rgba(50,25,5,.45),0 22px 30px -14px rgba(20,50,90,.55);transform:rotate(var(--r,0deg))}
.plank:nth-child(1){--r:-1.2deg}.plank:nth-child(2){--r:.8deg;margin-top:18px}.plank:nth-child(3){--r:-.6deg}
.plank::before{content:"";position:absolute;left:-2%;right:-2%;top:-26px;height:56px;background:url(svg/plank-snowcap.svg) center/100% 100% no-repeat;filter:drop-shadow(0 4px 3px rgba(20,60,100,.25))}
.plank h3{font-family:var(--f-title);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:.04em;color:#fff;text-shadow:0 3px 0 var(--wood-dk)}
.plank .no{font-family:var(--f-shell);font-weight:700;font-size:.7rem;letter-spacing:.2em;color:var(--amber);display:block;margin-bottom:6px}
.plank p{margin-top:8px;font-size:.95rem;line-height:1.5}
.plank .arrow{position:absolute;right:-18px;top:50%;translate:0 -50%;z-index:2;width:34px;height:34px;border-radius:50%;background:var(--amber);color:#4a2c0e;display:grid;place-items:center;font-weight:800;box-shadow:0 4px 0 #b97a12}
.plank:last-child .arrow{display:none}
.gallery{align-items:center;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);margin-top:clamp(44px,6vw,80px)}
.gallery .frame{box-shadow:0 24px 40px -22px rgba(20,60,100,.65),0 0 0 6px #fff,0 0 0 7px rgba(42,116,176,.35);background:#fff}
.gallery .g1{grid-column:1/8}.gallery .g2{grid-column:8/13}
.gallery .g3{grid-column:1/5}.gallery .g4{grid-column:5/9}.gallery .g5{grid-column:9/13}
.gallery .frame{overflow:visible}
.gallery .frame picture,.gallery .frame picture img{border-radius:22px;overflow:hidden}
.gallery .g3,.gallery .g5{margin-top:clamp(20px,3vw,40px)}
.gallery .frame img{aspect-ratio:var(--ar,auto);object-fit:cover}
.snow{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.snow::before{content:"";position:absolute;inset:-340px 0 0;animation:snowfall 22s linear infinite;background-image:radial-gradient(circle 3px,#fff 98%,transparent),radial-gradient(circle 2px,#fff 98%,transparent),radial-gradient(circle 4px,#fff 98%,transparent);background-size:360px 420px,250px 310px,470px 520px;background-position:30px 20px,110px 140px,200px 60px;opacity:.8}
.flake{position:absolute;top:-40px;width:var(--s,22px);height:var(--s,22px);left:var(--x,50%);opacity:.8;filter:drop-shadow(0 0 3px rgba(80,150,210,.6));animation:flake var(--d,40s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes flake{from{top:-2%;rotate:0deg}to{top:100%;rotate:300deg}}
@keyframes snowfall{to{transform:translate3d(-30px,300px,0)}}
.ice-edge{position:absolute;left:0;right:0;bottom:-1px;height:clamp(120px,15vw,220px);background:url(svg/ice-edge.svg) bottom/100% 100% no-repeat;z-index:4;pointer-events:none}

/* ---------- 4 GLACIER ---------- */
#glacier{background:linear-gradient(180deg,#0B2A4A 0,#0a2547 25%,#0a1a46 55%,#08143a 80%,#0a1030 100%);padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,70px);overflow:clip}
.ice-fx{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(40% 30% at 18% 20%,rgba(70,240,255,.22),transparent 70%),
  radial-gradient(36% 30% at 85% 50%,rgba(169,139,255,.26),transparent 70%),
  radial-gradient(44% 22% at 40% 78%,rgba(70,240,255,.14),transparent 70%);-webkit-mask:linear-gradient(#000 75%,transparent);mask:linear-gradient(#000 75%,transparent)}
.rays{position:absolute;left:0;right:0;top:0;height:60%;background:repeating-conic-gradient(from 180deg at 50% -10%,rgba(160,230,255,.12) 0 4deg,transparent 4deg 14deg);mask:linear-gradient(#000,transparent 80%);animation:shimmer 8s ease-in-out infinite alternate}
@keyframes shimmer{from{opacity:.35}to{opacity:.9}}
.crystal{position:absolute;pointer-events:none;background:linear-gradient(135deg,rgba(150,240,255,.9),rgba(70,160,255,.3) 55%,rgba(169,139,255,.5));clip-path:polygon(50% 0,100% 70%,70% 100%,30% 100%,0 70%);opacity:.5;filter:drop-shadow(0 0 20px rgba(70,240,255,.8));--idle:bob 8s ease-in-out infinite;animation:var(--idle)}
.glacier .eyebrow{color:var(--glow-c)}
.glacier .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);align-items:end}
.glacier .lede{color:#bcd6f2}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(30px,4vw,50px)}
.role{padding:16px 18px;border-radius:16px;border:1px solid rgba(70,240,255,.28);background:rgba(8,28,60,.55);backdrop-filter:blur(6px);font-size:.92rem;color:#cfe3f7}
.role b{display:block;font-family:var(--f-shell);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glow-c);margin-bottom:4px}
.role.v b{color:var(--glow-v)}
.flows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(24px,3vw,40px)}
.flow{position:relative;padding:24px 22px 26px;border-radius:24px;background:linear-gradient(170deg,rgba(18,52,100,.72),rgba(10,24,66,.82));border:1px solid rgba(70,240,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 50px -26px rgba(0,0,0,.7),0 0 46px -14px rgba(70,240,255,.45)}
.flow:nth-child(2){border-color:rgba(169,139,255,.45);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 50px -26px rgba(0,0,0,.7),0 0 46px -14px rgba(169,139,255,.5)}
.flow header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.flow h3{font-family:var(--f-shell);font-weight:700;font-size:1.2rem;line-height:1.25}
.flow .badge{color:#ffd37a;font-size:.62rem;flex:none}
.flow p{font-size:.92rem;color:#bcd6f2}
.nodes{position:relative;margin-top:20px;display:flex;flex-direction:column;gap:0}
.nodes li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:9px 0}
.nodes li::before{content:"";position:absolute;left:16px;top:-12px;bottom:calc(50% + 17px);width:2px;background:linear-gradient(var(--glow-c),var(--glow-v));opacity:.7}
.nodes li:first-child::before{display:none}
.nodes .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-shell);font-weight:700;font-size:.75rem;background:#06183a;border:2px solid var(--glow-c);color:var(--glow-c);box-shadow:0 0 16px rgba(70,240,255,.55)}
.nodes li.cl .dot{border-color:var(--glow-v);color:var(--glow-v);box-shadow:0 0 18px rgba(169,139,255,.7);animation:pulse 3s ease-in-out infinite}
.nodes li.hu .dot{border-color:var(--amber);color:var(--amber);box-shadow:0 0 16px rgba(255,181,71,.5)}
@keyframes pulse{50%{box-shadow:0 0 30px rgba(169,139,255,1)}}
.nodes span{font-size:.88rem;color:#e6f1ff}
.nodes span em{display:block;font-style:normal;font-family:var(--f-shell);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#7ea3cc}
.glacier .fine{margin-top:26px;font-size:.84rem;color:#8fb0d4;max-width:80ch}

/* ---------- 5 CAMP ---------- */
#camp{background:linear-gradient(180deg,#0a1030 0,#150f2e 35%,#1d1226 70%,#0c0815 100%);padding:clamp(40px,5vw,70px) 0 0;overflow:clip}
.fire-glow{position:absolute;left:50%;bottom:-10%;width:130vw;max-width:1500px;aspect-ratio:2/1;translate:-50% 0;background:radial-gradient(ellipse at 50% 100%,rgba(255,150,40,.6),rgba(255,90,30,.2) 38%,transparent 66%);animation:flicker 3.4s ease-in-out infinite alternate}
@keyframes flicker{0%{opacity:.75;transform:scale(.97)}45%{opacity:1}100%{opacity:.85;transform:scale(1.03)}}
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.embers::before{content:"";position:absolute;left:0;right:0;bottom:-20px;height:110%;background-image:radial-gradient(circle 2px,#ffb547 95%,transparent),radial-gradient(circle 1.5px,#ff7a30 95%,transparent),radial-gradient(circle 1px,#ffe0a0 95%,transparent);background-size:230px 310px,170px 260px,120px 190px;background-position:40px 0,120px 90px,10px 150px;animation:rise 14s linear infinite;opacity:.85;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
@keyframes rise{to{transform:translateY(-310px)}}
#camp .eyebrow{color:#ffb547}
.camp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
#camp .big{font-family:var(--f-shell);font-weight:800;font-size:clamp(3rem,9vw,7.5rem);line-height:.95;letter-spacing:-.04em;margin:14px 0 16px;background:linear-gradient(100deg,#ffd49a,#ff9c4d 55%,#ff6f6f);-webkit-background-clip:text;background-clip:text;color:transparent}
#camp .lede{color:#e7d9ee}
.notice{position:relative;padding:clamp(38px,4vw,50px) clamp(16px,2.2vw,28px) clamp(20px,2.4vw,28px);border-radius:16px;color:#fff6e4;background:repeating-linear-gradient(95deg,transparent 0 30px,rgba(40,20,5,.2) 30px 32px,rgba(255,220,160,.06) 32px 38px),linear-gradient(180deg,#8f5c2c,#6b4220 55%,#573416);box-shadow:inset 0 3px 0 rgba(255,220,160,.35),inset 0 -6px 0 rgba(30,14,2,.5),0 26px 40px -16px rgba(0,0,0,.7),0 0 60px -20px rgba(255,150,50,.5);rotate:1deg}
.notice::before,.notice::after{content:"";position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8d8e0,#6b6b78);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.notice::before{left:14px}.notice::after{right:14px}
.notice-title{position:absolute;top:-16px;left:50%;translate:-50% 0;white-space:nowrap;font-family:var(--f-title);font-weight:400;font-size:1.2rem;letter-spacing:.06em;color:#fff;padding:.25em 1.2em;border-radius:10px;background:linear-gradient(#a56d36,#7a4a22);box-shadow:inset 0 2px 0 rgba(255,220,160,.4),0 6px 0 #4a2c0e,0 10px 16px rgba(0,0,0,.4);text-shadow:0 2px 0 #4a2c0e}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{padding:12px 14px 14px;border-radius:4px;background:#f6ead0;color:#3b2512;box-shadow:0 6px 10px -4px rgba(0,0,0,.5);position:relative;rotate:var(--r,0deg)}
.fact:nth-child(1){--r:-1.2deg}.fact:nth-child(2){--r:.9deg}.fact:nth-child(3){--r:.6deg}.fact:nth-child(4){--r:-.8deg}
.fact::before{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9b8a,#c42a1a);box-shadow:0 2px 2px rgba(0,0,0,.4)}
.fact.wide{grid-column:1/-1}
.fact dt{font-family:var(--f-shell);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#a85a00;margin-bottom:2px}
.fact dd{margin:0;font-size:1rem;font-weight:600}
.fact dd a{color:#2a4f8f}
.fact dd .tbc{display:inline-block;margin-top:4px;font-size:.62rem;font-family:var(--f-shell);padding:.15em .6em;border-radius:99px;background:#ffe3b0;color:#7a4300;border:1px dashed #c98a2a}
.camp-foot{position:relative;margin-top:clamp(24px,4vw,56px)}
.scene{display:block;width:100%;height:auto;min-height:150px}
.scene .fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.15s ease-in-out infinite alternate}
.scene .fl2{animation-duration:.9s;animation-delay:-.3s}.scene .fl3{animation-duration:.75s;animation-delay:-.5s}.scene .fl4{animation-duration:.6s;animation-delay:-.2s}
@keyframes flick{0%{transform:scale(1,1) skewX(-3deg)}50%{transform:scale(.93,1.1) skewX(2deg)}100%{transform:scale(1.04,.95) skewX(4deg)}}
.legal{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding:18px var(--pad) 26px;background:#0c0815;font-size:.84rem;color:#b7a9c8;margin-top:-2px}
.legal img{height:22px;width:auto}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- reveal (progressive) ---------- */
.rv{opacity:1}

/* ---------- scroll-driven parallax ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes pxy{from{transform:translate3d(0,var(--from,60px),0)}to{transform:translate3d(0,var(--to,-60px),0)}}
    .px{animation:pxy linear both,var(--idle,none);animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal;will-change:transform}
    .px-a{--from:90px;--to:-90px}.px-b{--from:50px;--to:-50px}.px-c{--from:-40px;--to:60px}
    @keyframes rise-in{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
    .rv{animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gauge ol{padding:14px 12px 14px 14px;gap:18px}
  .gauge a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gauge a{gap:0}
  .gauge ol::before,.gauge ol::after{right:17px}
  .gauge small{display:none}
}
@media (max-width:980px){
  .hero-grid,.sky-grid,.peaks-grid,.camp-grid,.glacier .head{grid-template-columns:1fr}
  .portals{min-height:420px;max-width:520px}
  .flows{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .top nav{display:none}
}
@media (max-width:720px){
  html{scroll-padding-top:56px}
  .gauge{display:none}
  .chip-nav{display:flex;position:fixed;left:50%;top:10px;translate:-50% 0;z-index:70;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:99px;background:rgba(6,12,40,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.22);font-family:var(--f-shell);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;min-height:40px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
  .chip-nav .bar{width:54px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
  .chip-nav .bar i{display:block;height:100%;width:calc(var(--prog,0)*100%);background:linear-gradient(90deg,#ffb547,#46f0ff)}
  .top{padding:62px var(--pad) 0;justify-content:flex-start}
  .top .logo img{height:22px}
  #space{padding:120px 0 90px;min-height:auto}
  #sky{padding-top:60px}
  .hero h1{font-size:clamp(2.3rem,12vw,3.4rem)}
  .portals{min-height:340px}
  .planet-sky{--sz:150px}.planet-peak{--sz:130px;top:82px}
  .emblem{width:76px;right:2%;top:0}
  .scroll-hint{display:none}
  .reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none}
  .reel{scroll-snap-align:center}
  .sky-stage{min-height:300px;margin-top:10px}
  .island{right:-4%;width:82%}
  .ship{left:0;top:-6%;width:104px}
  
  .strike{border-radius:26px}
  .shots{grid-template-columns:1fr}
  .frame.tall{max-width:260px;justify-self:center}
  #peaks{padding-top:135px}
  .planks{grid-template-columns:1fr;gap:44px;margin-top:80px}
  .plank:nth-child(2){margin-top:0}
  .plank .arrow{right:50%;top:auto;bottom:-34px;translate:50% 0;rotate:90deg}
  .mammoth{left:-6%;width:150px;bottom:-14%}
  .card-pop{right:-2%;width:120px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5{grid-column:auto}
  .gallery .g1{grid-column:1/-1}.gallery .g5{grid-column:1/-1}
  .roles{grid-template-columns:1fr}
  .frame .chip{font-size:.58rem;left:10px;bottom:-10px;padding:.3em .65em}
  .facts{grid-template-columns:1fr}
  .scene{min-height:130px}
  .legal{flex-direction:column;align-items:flex-start}
  .notice{margin-top:14px;rotate:0deg}
  #camp .big{font-size:clamp(2.8rem,17vw,4.4rem)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .snow,.embers,.rays,.flake{display:none}
}

/* about */
.about p{color:#e0d3ea;margin-top:14px;max-width:60ch}
.about p.lede{color:#fff}
.about a:not(.btn){color:#ffd49a;text-underline-offset:3px}
.about .big{font-size:clamp(3rem,7vw,6rem)}
.about-cta{margin-top:22px!important}
.notice{margin-top:clamp(20px,3vw,40px)}
.fact dd{line-height:1.4}
.fact dd .maplink{display:inline-block;margin-top:6px;font-family:var(--f-shell);font-size:.78rem;font-weight:700;color:#2a4f8f}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,22px);margin-top:clamp(36px,5vw,64px)}
.principles li{position:relative;padding:22px 20px 22px;border-radius:20px;background:linear-gradient(170deg,rgba(255,190,110,.12),rgba(255,120,60,.05));border:1px solid rgba(255,181,71,.3);backdrop-filter:blur(6px)}
.principles .pi{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;margin-bottom:12px;font-size:1.1rem;color:#3a2300;background:radial-gradient(circle at 35% 30%,#ffe3a0,#ffb547 60%,#d98a1c);box-shadow:0 0 22px -4px rgba(255,181,71,.8)}
.principles h3{font-family:var(--f-title);font-weight:400;font-size:1.35rem;letter-spacing:.03em;color:#fff}
.principles p{margin-top:6px;font-size:.92rem;line-height:1.5;color:#d9c9e0}
@media (max-width:980px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.principles{grid-template-columns:1fr}.about .big{font-size:clamp(2.8rem,17vw,4.4rem)}}