/* Aether Glass — stylesheet (polish pass) */

:root{
  --ink:#0B0C0E;
  --ink-2:#14161A;
  --ink-3:#1E2128;
  --paper:#F1ECE4;
  --paper-2:#E6DFD4;
  --mist:#BDB7AC;
  --rule:rgba(11,12,14,.14);
  --rule-inv:rgba(241,236,228,.14);
  --accent:oklch(74% 0.09 235);
  --accent-warm:oklch(80% 0.07 60);
  --accent-vivid:oklch(68% 0.18 25);
  --sans:'Bricolage Grotesque','Söhne',system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --serif:'Newsreader',ui-serif,Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}

/* Type */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.eyebrow{display:inline-flex;gap:12px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;}

/* Layout */
.wrap{max-width:1440px;margin:0 auto;padding:0 48px;}
@media (max-width:720px){ .wrap{padding:0 24px;} }

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 48px;display:flex;align-items:center;justify-content:space-between;
  background:color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.nav.inv{
  background:color-mix(in oklab, var(--ink) 74%, transparent);
  color:var(--paper);border-bottom-color:var(--rule-inv);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.brand .mark{
  width:22px;height:22px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 35%, #fff 0%, #BDB7AC 45%, #0B0C0E 80%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 0 18px rgba(159,180,204,.3);
}
.nav.inv .brand .mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 0 18px rgba(159,180,204,.5);}
.nav-links{display:flex;gap:32px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 18px;border:1px solid currentColor;border-radius:999px;opacity:.9;
  transition:all .25s ease;
}
.nav-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);opacity:1;}
.nav.inv .nav-cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
@media (max-width:820px){.nav-links{display:none;} .nav{padding:14px 24px;}}

/* HERO */
.hero{
  position:relative;min-height:100vh;padding:140px 0 80px;
  display:grid;grid-template-rows:1fr auto;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 72% 28%, oklch(80% 0.06 230 / .35), transparent 60%),
    radial-gradient(700px 500px at 12% 85%, oklch(82% 0.05 60 / .22), transparent 60%),
    var(--paper);
}
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:112px 112px;
  mask-image:radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:80px;align-content:end;}

/* DISPLAY TYPE — Bricolage Grotesque, not italic echoes */
.hero h1{
  font-family:var(--sans);font-weight:400;font-optical-sizing:auto;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size:clamp(64px, 10.5vw, 172px);
  line-height:.9;letter-spacing:-.035em;
  margin:0;color:var(--ink);
}
.hero h1 .line-b{font-weight:500;}
.hero h1 .accent{color:var(--accent);font-weight:400;}

/* hero meta */
.hero-meta{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px;
  border-top:1px solid var(--rule);padding-top:20px;margin-top:40px;
}
.hero-meta .col{display:flex;flex-direction:column;gap:4px;}
.hero-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;}
.hero-meta .v{font-family:var(--sans);font-size:22px;line-height:1.1;font-weight:500;letter-spacing:-.01em;}
@media (max-width:720px){.hero-meta{grid-template-columns:1fr 1fr;}}

.hero-sub{
  display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  padding:44px 0 0;
}
.hero-sub p{max-width:480px;font-size:16px;line-height:1.6;opacity:.72;margin:0;font-family:var(--body);}
.hero-cta{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border:1px solid var(--ink);border-radius:999px;
  transition:all .3s cubic-bezier(.2,.6,.2,1);font-weight:500;
}
.hero-cta:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.hero-cta .arrow{width:18px;height:1px;background:currentColor;position:relative;}
.hero-cta .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}

/* hero floating lens */
.hero-lens{
  position:absolute;z-index:1;right:-6%;top:14%;
  width:min(56vw, 760px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,.7), transparent 45%),
    radial-gradient(circle at 65% 65%, oklch(78% 0.08 230 / .4), transparent 60%),
    conic-gradient(from 120deg, oklch(82% 0.05 230 / .1), oklch(92% 0.02 280 / .25), oklch(80% 0.05 60 / .12), oklch(82% 0.05 230 / .1));
  border:1px solid rgba(11,12,14,.06);
  box-shadow:0 40px 80px rgba(11,12,14,.08), inset 0 0 120px oklch(78% 0.08 230 / .25);
  animation:floaty 22s ease-in-out infinite;
}
.hero-lens::after{
  content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(11,12,14,.06);
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.4), transparent 55%);
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-18px) rotate(3deg);}
}

/* scroll hint — moved to right to not conflict */
.scroll-hint{
  position:absolute;right:48px;bottom:40px;z-index:3;
  display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;
}
.scroll-hint .line{width:36px;height:1px;background:currentColor;position:relative;overflow:hidden;}
.scroll-hint .line::after{content:"";position:absolute;left:-100%;top:0;width:50%;height:100%;background:var(--ink);animation:sweep 2.8s ease-in-out infinite;}
@keyframes sweep{0%{left:-50%;}100%{left:100%;}}
@media (max-width:720px){.scroll-hint{display:none;}}

/* MARQUEE — simpler, no red-italic echo */
.marquee{
  border-block:1px solid var(--rule);
  padding:24px 0;overflow:hidden;white-space:nowrap;
  font-family:var(--sans);font-weight:400;font-size:48px;line-height:1;letter-spacing:-.025em;
}
.marquee-track{display:inline-flex;gap:64px;animation:slide 48s linear infinite;}
.marquee .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);vertical-align:middle;margin:0 40px 6px;opacity:.3;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTION */
section{position:relative;}
.section{padding:160px 0;position:relative;}
.section.dark{background:var(--ink);color:var(--paper);}
.section.paper-2{background:var(--paper-2);}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:80px;margin-bottom:96px;align-items:end;}
.section-head h2{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(44px,6.5vw,96px);line-height:.98;letter-spacing:-.03em;margin:0;
}
.section-head h2 .accent{color:var(--accent);}
.section-head .desc{font-size:16px;line-height:1.6;max-width:540px;opacity:.72;margin-top:16px;font-family:var(--body);}
@media (max-width:820px){.section-head{grid-template-columns:1fr;gap:24px;} .section{padding:100px 0;}}

/* NODES */
.nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.node{
  position:relative;padding:32px;border:1px solid var(--rule-inv);border-radius:4px;
  min-height:540px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  transition:transform .5s cubic-bezier(.2,.6,.2,1), border-color .3s;
}
.node:hover{transform:translateY(-4px);border-color:rgba(241,236,228,.28);}
.node .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;}
.node .node-title{font-family:var(--sans);font-weight:400;font-size:36px;line-height:1;letter-spacing:-.025em;margin-top:12px;}
.node .node-title .accent{color:var(--accent);font-weight:500;}
.node .desc{font-size:14px;line-height:1.6;opacity:.65;margin-top:14px;max-width:360px;font-family:var(--body);}
.node .viz{
  flex:1;margin:28px -12px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border-radius:4px;
  min-height:200px;
}
.node.anchor-node .viz{min-height:0;margin:28px -12px 0;}
.node .specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:20px;border-top:1px solid var(--rule-inv);}
.node .spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;}
.node .spec .v{font-family:var(--sans);font-weight:500;font-size:17px;margin-top:3px;letter-spacing:-.01em;}

/* Glasses viz */
.viz-glasses{width:100%;height:100%;position:relative;}
.viz-glasses svg{width:100%;height:100%;}
.viz-glasses .scan{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%, oklch(78% 0.08 230 / .28) 50%, transparent 100%);
  animation:scanMove 4.5s cubic-bezier(.45,.05,.55,.95) infinite;
  mix-blend-mode:screen;
}
@keyframes scanMove{
  0%{transform:translateY(-100%);}
  50%{transform:translateY(100%);}
  50.01%{transform:translateY(-100%);}
  100%{transform:translateY(-100%);}
}

/* Engine — shader canvas */
.viz-engine{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;padding:20px;}
.viz-engine .slab{
  width:100%;aspect-ratio:1.5;border-radius:14px;position:relative;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04);
  background:#0a0a0f;
}
.viz-engine canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.viz-engine .slab::after{
  content:"AETHER";position:absolute;right:14px;bottom:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.5);
  mix-blend-mode:overlay;z-index:2;
}

/* Anchor — compact, watch-left-of-title layout */
.node.anchor-node{
  grid-column:span 1;
}
.node.anchor-node .anchor-head{
  display:flex;align-items:center;gap:20px;
}
.anchor-dial-wrap{
  flex:0 0 86px;height:86px;position:relative;
}
.anchor-dial{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #F1E7CE 0%, #C9B57C 70%, #9F8A54 100%);
  border:3px solid #D9CFB9;
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;
}
.anchor-dial .hand{
  position:absolute;left:50%;top:50%;transform-origin:bottom center;
  background:#2a1f10;border-radius:1px;
}
.anchor-dial .hand.hour{width:2px;height:22px;margin-left:-1px;margin-top:-22px;animation:hourTick 40s linear infinite;}
.anchor-dial .hand.minute{width:1.5px;height:30px;margin-left:-.75px;margin-top:-30px;animation:minuteTick 10s linear infinite;}
.anchor-dial .hand.second{width:1px;height:34px;margin-left:-.5px;margin-top:-34px;background:oklch(70% 0.17 25);animation:secondTick 2.5s linear infinite;}
@keyframes hourTick{to{transform:translate(0) rotate(360deg);}}
@keyframes minuteTick{to{transform:translate(0) rotate(360deg);}}
@keyframes secondTick{to{transform:translate(0) rotate(360deg);}}
.anchor-dial::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:#2a1f10;transform:translate(-50%,-50%);z-index:5;
}
.anchor-pulse{
  position:absolute;inset:-8px;border-radius:50%;border:1px solid oklch(78% 0.08 230 / .45);
  animation:pulseOut 2.4s ease-out infinite;
}
.anchor-pulse.b{animation-delay:1.2s;}
@keyframes pulseOut{
  0%{transform:scale(.85);opacity:.8;}
  100%{transform:scale(1.35);opacity:0;}
}

/* Anchor node — inline variant (watch left of title) */
.node.anchor-node{min-height:auto;padding-bottom:32px;}
.node.anchor-node .viz{display:none;} /* no big viz */

@media (max-width:980px){.nodes{grid-template-columns:1fr;} .node{min-height:auto;}}

/* SPATIAL */
.spatial{
  position:relative;min-height:100vh;
  background:
    radial-gradient(900px 600px at 28% 32%, oklch(78% 0.09 230 / .12), transparent 60%),
    var(--ink);
  color:var(--paper);overflow:hidden;
}
.spatial .wrap{padding-top:140px;padding-bottom:140px;}

/* HARDWARE sticky chapter */
.hw{padding:0;position:relative;}
.hw-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
}
.hw-track{height:340vh;position:relative;}
.hw-image{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(1.04);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.hw-image img{
  width:min(84vw, 1120px);height:auto;object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.22));
}
.hw-image.is-active{opacity:1;transform:scale(1);}
.hw-caption{
  position:absolute;bottom:8vh;left:0;right:0;padding:0 48px;
}
.hw-caption .slot{
  opacity:0;transform:translateY(16px);transition:all .7s cubic-bezier(.2,.6,.2,1);
  position:absolute;inset:auto 48px 0 48px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;pointer-events:none;
}
.hw-caption .slot.is-active{opacity:1;transform:translateY(0);}
.hw-caption .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;}
.hw-caption .title{font-family:var(--sans);font-size:clamp(32px,4.2vw,60px);font-weight:400;line-height:1;letter-spacing:-.028em;margin-top:8px;}
.hw-caption .desc{font-size:15px;line-height:1.6;opacity:.72;max-width:440px;font-family:var(--body);}

/* progress rail */
.hw-rail{
  position:absolute;left:48px;bottom:8vh;display:flex;flex-direction:column;gap:8px;z-index:3;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}
.hw-rail .step{opacity:.3;transition:opacity .4s;display:flex;gap:10px;align-items:center;}
.hw-rail .step.is-active{opacity:1;}
.hw-rail .step .bar{width:36px;height:1px;background:currentColor;}

/* COLLECTION — grid, not horizontal scroll */
.strip{padding:140px 0;}
.strip-head{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:64px;}
.strip-head h3{font-family:var(--sans);font-weight:400;font-size:clamp(40px,5.5vw,76px);margin:0;line-height:1;letter-spacing:-.03em;}
.strip-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:340px 340px;gap:20px;}
.strip-card{
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--ink);color:var(--paper);
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.strip-card:hover{transform:translateY(-6px);}
.strip-card:nth-child(1){grid-row:span 2;}
.strip-card:nth-child(4){grid-column:span 2;}
.strip-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.strip-card:hover img{transform:scale(1.04);}
.strip-card .over{
  position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.65));
}
.strip-card .over .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;}
.strip-card .over .title{font-family:var(--sans);font-weight:400;font-size:30px;line-height:1.02;max-width:90%;letter-spacing:-.025em;}
@media (max-width:820px){.strip-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,240px);} .strip-card:nth-child(1),.strip-card:nth-child(4){grid-row:auto;grid-column:auto;}}

/* INTEGRITY */
.integrity{padding:160px 0;background:var(--ink);color:var(--paper);}
.integrity h2{font-family:var(--sans);font-weight:400;font-size:clamp(56px,8vw,128px);line-height:.92;letter-spacing:-.035em;margin:0;max-width:14ch;}
.integrity h2 .accent{color:var(--accent);}
.integrity .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:120px;padding-top:40px;border-top:1px solid var(--rule-inv);}
.stat .n{font-family:var(--sans);font-weight:400;font-size:72px;line-height:1;letter-spacing:-.035em;}
.stat .n sub{font-family:var(--mono);font-size:13px;letter-spacing:.14em;opacity:.6;margin-left:5px;vertical-align:baseline;text-transform:uppercase;font-weight:400;}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-top:14px;}
@media (max-width:820px){.integrity .stat-row{grid-template-columns:1fr 1fr;}}

/* FOOTER */
footer{background:var(--ink);color:var(--paper);padding:80px 0 40px;border-top:1px solid var(--rule-inv);}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;}
.foot-brand .wordmark{font-family:var(--sans);font-weight:400;font-size:72px;line-height:1;letter-spacing:-.035em;margin:0;}
.foot-brand p{max-width:340px;opacity:.7;font-size:14px;line-height:1.6;margin-top:16px;font-family:var(--body);}
.foot-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:0 0 16px;font-weight:500;}
.foot-col a{display:block;padding:6px 0;opacity:.85;font-size:14px;font-family:var(--body);}
.foot-col a:hover{opacity:1;}
.foot-btm{display:flex;justify-content:space-between;margin-top:80px;padding-top:24px;border-top:1px solid var(--rule-inv);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;} .foot-btm{flex-direction:column;gap:12px;}}

/* reveals */
[data-reveal]{opacity:0;transform:translateY(28px);transition:all .9s cubic-bezier(.2,.6,.2,1);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}