/* ============== NIKE AIR MAX Dn — Monochrome Kinetic ============== */
:root{
  --ink:#0A0A0A;
  --carbon:#151515;
  --paper:#F7F7F5;
  --ash:#aab8c9;
  --volt:#5BD3FF;
  --edge:rgba(247,247,245,.10);
  --display:"Anton",-apple-system,sans-serif;
  --body:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overflow-x:clip;background:#070b12;color:var(--paper)}
body{font-family:var(--body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;cursor:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--volt)}
section{position:relative}
::selection{background:var(--volt);color:var(--ink)}

/* ---------- living light field ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(135% 120% at 50% -5%, #2a4d6f 0%, #1d3f5d 38%, #143049 70%, #0e2438 100%)}
.field__orb{position:absolute;border-radius:50%;filter:blur(88px);will-change:transform}
.field__orb--1{width:64vw;height:64vw;left:-12vw;top:-18vw;background:radial-gradient(circle,rgba(91,211,255,.24),transparent 66%);animation:drift1 26s ease-in-out infinite alternate}
.field__orb--2{width:58vw;height:58vw;right:-14vw;bottom:-20vw;background:radial-gradient(circle,rgba(48,116,206,.24),transparent 66%);animation:drift2 33s ease-in-out infinite alternate}
.field__orb--3{width:50vw;height:50vw;left:34vw;top:34vh;background:radial-gradient(circle,rgba(91,211,255,.13),transparent 62%);animation:drift3 39s ease-in-out infinite alternate}
.field__bloom{position:absolute;width:50vw;height:50vw;left:var(--mx,50%);top:var(--my,26%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(120,225,255,.13),transparent 60%);transition:left .6s cubic-bezier(.22,1,.36,1),top .6s cubic-bezier(.22,1,.36,1);will-change:left,top}
.field__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.16)}}
@keyframes drift2{to{transform:translate(-8vw,-6vh) scale(1.22)}}
@keyframes drift3{to{transform:translate(6vw,-9vh) scale(1.12)}}
/* content sits above the field */
main,.foot{position:relative;z-index:1}
/* per-section glows removed — the living field lights everything; clipped glows were drawing section-divider lines */
.hero__glow,.spin__glow,.shop__glow{display:none}

/* ---------- custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--volt);border-radius:50%;pointer-events:none;z-index:200;mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease),opacity .3s;will-change:transform}
.cursor__dot{position:absolute;top:50%;left:50%;width:4px;height:4px;background:var(--volt);border-radius:50%;transform:translate(-50%,-50%)}
.cursor.is-mag{width:62px;height:62px;background:rgba(91,211,255,.08)}
@media (hover:none),(pointer:coarse){.cursor{display:none}body{cursor:auto}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);transition:background .4s,padding .4s,backdrop-filter .4s}
.nav.is-stuck{background:rgba(8,12,20,.66);backdrop-filter:blur(16px);padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--edge)}
.nav__brand{display:flex;align-items:center}
.nav__swoosh{width:56px;height:auto;fill:var(--paper);transition:fill .3s}
.nav__brand:hover .nav__swoosh{fill:var(--volt)}
.nav__links{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav__links a{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.82;transition:opacity .25s,color .25s}
.nav__links a:hover{opacity:1;color:var(--volt)}
.nav__cta{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--volt);color:var(--ink);padding:11px 20px;border-radius:40px;transition:transform .3s var(--ease),box-shadow .3s}
.nav__cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(91,211,255,.28)}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px;z-index:120}
.nav__burger span{display:block;width:26px;height:2px;background:var(--paper);transition:.35s var(--ease)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- MOBILE MENU ---------- */
.menu{position:fixed;inset:0;z-index:90;background:rgba(6,10,18,.96);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s,transform .4s,visibility .4s}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu a{font-family:var(--display);font-size:clamp(2.6rem,12vw,5rem);text-transform:uppercase;letter-spacing:.01em;line-height:1.1;transition:color .25s}
.menu a:active{color:var(--volt)}
.menu__price{margin-top:26px;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:visible;padding:90px 20px 60px}
.hero__glow{position:absolute;top:46%;left:50%;width:120vw;max-width:1100px;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(91,211,255,.10) 0%,rgba(91,211,255,.04) 30%,transparent 62%);pointer-events:none}
.hero__eyebrow{font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ash);margin-bottom:.4em}
.hero__eyebrow span{color:var(--paper)}
.hero__title{font-family:var(--display);line-height:.95;letter-spacing:.01em;text-transform:uppercase;position:relative;z-index:3}
.hero__title .line{display:block;font-size:clamp(4.6rem,23vw,19rem)}
.hero__title .line--2{margin-top:0}
.hero__shoe{position:relative;z-index:2;width:min(86vw,860px);margin:-7vw 0 -4vw;filter:drop-shadow(0 38px 80px rgba(2,10,22,.55));will-change:transform}
.hero__shoe img{width:100%}
.hero__sub{position:absolute;top:calc(100svh - 54px);left:clamp(20px,4vw,56px);z-index:3;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--paper);letter-spacing:.02em;max-width:42vw}
.hero__scroll{position:absolute;top:calc(100svh - 78px);bottom:auto;right:clamp(20px,4vw,56px);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ash);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase}
.hero__scroll i{width:1px;height:42px;background:linear-gradient(var(--volt),transparent);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- HORIZONTAL PULL ---------- */
.pull{background:transparent;overflow:hidden}
.pull__track{display:flex;align-items:center;height:100svh;width:max-content;padding:0 8vw;gap:6vw;will-change:transform}
.pull__panel{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.pull__panel--word h2{font-family:var(--display);font-size:clamp(4rem,16vw,15rem);line-height:.95;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.pull__panel--shoe{flex-direction:column;gap:1.2rem;text-align:center}
.pull__panel--shoe img{width:min(60vw,620px);filter:drop-shadow(0 28px 70px rgba(2,10,22,.5))}
.pull__caption{font-size:clamp(1rem,1.4vw,1.25rem);color:var(--ash);letter-spacing:.01em;line-height:1.45}

/* ---------- 360 SPIN ---------- */
.spin{background:transparent}
.spin__stage{position:relative;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.spin__glow{position:absolute;top:52%;left:50%;width:80vw;max-width:900px;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(91,211,255,.09),transparent 60%);pointer-events:none}
.spin__canvas{position:relative;z-index:3;width:min(82vw,820px);height:auto;aspect-ratio:4/3}
.spin__floor{position:absolute;bottom:13%;left:50%;width:min(60vw,560px);height:60px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(8px);z-index:2}
.spin__title{position:absolute;top:11%;left:clamp(20px,5vw,72px);font-family:var(--display);font-size:clamp(2rem,5vw,4.6rem);line-height:.95;text-transform:uppercase;z-index:4;pointer-events:none}
.spin__callouts{position:absolute;right:clamp(20px,5vw,72px);bottom:18%;list-style:none;display:flex;flex-direction:column;gap:14px;z-index:4;text-align:right}
.callout{font-size:.9rem;letter-spacing:.04em;color:var(--paper);opacity:0;transform:translateX(14px);transition:opacity .4s,transform .4s}
.callout.on{opacity:1;transform:none}
.callout span{display:inline-block;color:var(--volt);font-weight:700;margin-right:8px}
.spin__hint{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);z-index:4}

/* ---------- FEATURE CHAPTERS ---------- */
.feat{background:transparent;padding:clamp(80px,12vw,180px) clamp(20px,5vw,80px);display:flex;flex-direction:column;gap:clamp(80px,12vw,170px)}
.feat__row{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:clamp(30px,5vw,72px)}
.feat__row--rev{grid-template-columns:1.06fr 1fr}
.feat__row--rev .feat__media{order:2}
.feat__media{position:relative;display:flex;align-items:center;justify-content:center}
.feat__media img{width:100%;max-width:620px;position:relative;z-index:2;filter:drop-shadow(0 28px 70px rgba(2,10,22,.5));will-change:transform}
.feat__halo{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(91,211,255,.16),transparent 58%);z-index:1}
.feat__halo--cool{background:radial-gradient(circle at 50% 55%,rgba(247,247,245,.10),transparent 58%)}
.feat__kicker{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--volt);margin-bottom:1rem}
.feat__copy h3{font-family:var(--display);font-size:clamp(3.3rem,8vw,7rem);line-height:.95;text-transform:uppercase;margin-bottom:1.3rem}
.feat__body{font-size:clamp(1rem,1.25vw,1.18rem);color:var(--ash);max-width:46ch;line-height:1.6}

/* ---------- SPEC RAIL ---------- */
.specs{background:transparent;padding:clamp(80px,12vw,170px) clamp(20px,5vw,80px);display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(40px,6vw,90px);align-items:center}
.specs__head{font-family:var(--display);font-size:clamp(3.6rem,9vw,9rem);line-height:.95;text-transform:uppercase;margin:0}
.specs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,56px) clamp(24px,4vw,56px)}
.spec{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--edge);padding-top:clamp(16px,1.6vw,24px)}
.spec__val{display:flex;align-items:baseline;gap:.04em}
.spec__n{font-family:var(--display);font-size:clamp(3.2rem,8vw,8rem);line-height:.9;color:var(--paper)}
.spec__suf{font-family:var(--display);font-size:clamp(1.8rem,4.6vw,4.4rem);line-height:.9;color:var(--volt);margin:0}
.spec__l{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:.6em}

/* ---------- GALLERY MARQUEE ---------- */
.gallery{background:transparent;padding:clamp(40px,7vw,90px) 0;overflow-x:clip;overflow-y:visible}
.gallery__marquee{display:flex;width:max-content;animation:marq 32s linear infinite}
.gallery__set{display:flex;align-items:center}
.gallery__set img{width:clamp(220px,26vw,400px);padding:0 2vw;opacity:.85;filter:drop-shadow(0 20px 36px rgba(0,0,0,.5))}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SHOP CTA ---------- */
.shop{background:transparent;min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px;overflow:hidden}
.shop__glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(91,211,255,.10),transparent 55%);pointer-events:none}
.shop__kicker{position:relative;z-index:2;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);margin-bottom:.6em}
.shop__title{position:relative;z-index:2;font-family:var(--display);font-size:clamp(4rem,17vw,15rem);line-height:.95;text-transform:uppercase}
.shop__price{position:relative;z-index:2;font-family:var(--display);font-size:clamp(2rem,4vw,3.4rem);color:var(--volt);margin:.7em 0 1.25em}
.shop__btn{position:relative;z-index:2;display:inline-flex;align-items:center;background:var(--paper);color:var(--ink);
  font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;padding:18px 44px;border-radius:50px;
  transition:transform .35s var(--ease),background .3s,color .3s;will-change:transform}
.shop__btn:hover{background:var(--volt)}
.shop__note{position:relative;z-index:2;margin-top:2em;font-size:.82rem;color:var(--ash);letter-spacing:.04em}

/* ---------- FOOTER ---------- */
.foot{background:transparent;padding:clamp(40px,6vw,70px) clamp(20px,5vw,80px) 40px}
.foot__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:30px}
.foot__swoosh{width:60px;fill:var(--paper)}
.foot__nav{display:flex;gap:26px}
.foot__nav a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);transition:color .25s}
.foot__nav a:hover{color:var(--volt)}
.foot__fine{font-size:.72rem;color:#93a3b5;line-height:1.6;max-width:60ch}

/* ---------- reveal util ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============== RESPONSIVE ============== */
@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .feat__row,.feat__row--rev{grid-template-columns:1fr;gap:30px}
  .feat__row--rev .feat__media{order:0}
  .specs{grid-template-columns:1fr;gap:40px}
  .specs__grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .spin__title{font-size:clamp(3rem,15vw,6rem);line-height:.95;top:6%;left:0;right:0;text-align:center;padding:0 16px}
  .spin__callouts{bottom:21%;right:auto;left:50%;transform:translateX(-50%);text-align:center;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 18px}
  .callout{font-size:.78rem}
  .hero__shoe{margin:-3vw 0 0}
  /* hero: revert sub to flow + scroll cue centered on phone */
  .hero__sub{position:static;top:auto;bottom:auto;left:auto;max-width:none;margin-top:.4em}
  .hero__scroll{top:auto;bottom:22px;left:50%;right:auto;transform:translateX(-50%)}
  /* horizontal pull -> vertical reveal on mobile */
  .pull{overflow:visible}
  .pull__track{flex-direction:column;height:auto;width:100%;gap:64px;padding:90px 8vw;transform:none!important}
  .pull__panel--word h2{white-space:normal;font-size:clamp(3rem,15vw,6rem)}
  .pull__panel--shoe img{width:min(78vw,440px)}
}
@media (max-width:480px){
  .hero__title .line{font-size:clamp(4rem,26vw,7rem)}
  .specs__grid{grid-template-columns:1fr 1fr}
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .gallery__marquee{animation:none}
  .hero__scroll i{animation:none}
}