/* =========================================================
   STERRATO — VIOLA NEBULA  ·  GT BUTLER
   ========================================================= */
:root{
  --ink:#0a0510;
  --violet-deep:#160c28;
  --violet:#3d2a5c;
  --magenta:#8b4fa0;
  --lav:#c9a8e0;
  --orange:#ff6a1a;
  --cream:#f6f0ff;
  --mist:#cdb6ec;
  --line:rgba(201,174,240,0.18);

  /* live, scroll-driven background hue stops (updated by JS) */
  --bgA:#160c28;
  --bgB:#2a1547;

  --maxw:1500px;
  --easing:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:"Fraunces",Georgia,serif;
  background:var(--ink);
  color:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- live gradient field behind everything ---- */
#field{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(80% 70% at 20% 12%, color-mix(in oklab, var(--magenta) 38%, transparent), transparent 60%),
    radial-gradient(75% 70% at 85% 80%, color-mix(in oklab, var(--orange) 12%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bgA), var(--bgB) 60%, var(--ink));
  transition:background .2s linear;
}
#fieldGrain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:300px 300px;
}

/* =================== TYPOGRAPHY HELPERS =================== */
.kicker{
  font-family:"Space Mono",monospace; font-weight:700;
  font-size:clamp(11px,1vw,14px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--mist);
}
.kicker .o{color:var(--orange)}
.display{
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  line-height:.9; letter-spacing:.005em; color:var(--cream);
}
.display .thin{font-weight:300}
.serif-lead{
  font-family:"Fraunces",serif; font-weight:300;
  line-height:1.28; color:var(--lav);
  font-optical-sizing:auto;
}
.mono{font-family:"Space Mono",monospace}

/* =================== TOP NAV =================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,4vw,60px);
  mix-blend-mode:difference;
}
.nav .brand{font-family:"Space Mono",monospace;font-weight:700;letter-spacing:.34em;font-size:13px;text-transform:uppercase;color:#fff}
.nav .right{font-family:"Space Mono",monospace;font-weight:400;letter-spacing:.28em;font-size:12px;text-transform:uppercase;color:#fff}
.nav .right a{padding-left:26px;opacity:.85}

/* =================== PRELOADER =================== */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
}
#loader .lt{font-family:"Oswald",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(34px,7vw,86px);color:var(--cream)}
#loader .lt b{font-weight:700}
#loader .lbarwrap{width:min(360px,70vw);height:2px;background:rgba(201,174,240,.16);overflow:hidden}
#loader .lbar{height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--orange))}
#loader .lpct{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.3em;color:var(--mist)}

/* =================== HERO =================== */
.hero{position:relative;height:100svh;min-height:640px;width:100%;overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:
   radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(10,5,16,.55) 100%),
   linear-gradient(to top, rgba(10,5,16,.92) 2%, rgba(10,5,16,.15) 40%, rgba(10,5,16,.35) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,60px) clamp(40px,7vh,90px)}
.hero h1{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;color:var(--cream);
  line-height:.86;letter-spacing:-.01em;font-size:clamp(52px,11vw,168px);text-shadow:0 10px 80px rgba(0,0,0,.5)}
.hero h1 .thin{font-weight:200;display:block;font-size:.42em;letter-spacing:.12em;color:var(--lav);margin-bottom:.25em}
.hero__row{display:flex;flex-wrap:wrap;gap:20px 50px;align-items:baseline;margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.hero__row .it{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.hero__row .it b{color:var(--cream);font-weight:700}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mist);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue .ln{width:1px;height:46px;background:linear-gradient(var(--mist),transparent);position:relative;overflow:hidden}
.scrollcue .ln::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--orange);animation:cue 1.8s var(--easing) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

/* =================== SECTION SHELL =================== */
.section{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(90px,16vh,200px) clamp(20px,4vw,60px)}
.section--wide{max-width:100%}
.eyebrow{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.eyebrow .num{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.2em;color:var(--orange)}
.eyebrow .lbl{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--mist)}
.eyebrow .bar{flex:1;height:1px;background:var(--line)}

/* manifesto */
.manifesto{max-width:1100px}
.manifesto .big{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(28px,4.4vw,62px);line-height:1.14;color:var(--cream)}
.manifesto .big em{font-style:italic;color:var(--lav)}
.manifesto .big b{font-weight:600;color:var(--cream)}
.manifesto .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:46px;margin-top:64px}
.manifesto .cols p{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:var(--mist)}
.manifesto .cols h4{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.reveal-word{display:inline-block;overflow:hidden;vertical-align:top}
.reveal-word > span{display:inline-block;will-change:transform}

/* =================== SCRUB TURNTABLE =================== */
#scrub{position:relative;height:380vh}
.scrub__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
#scrubCanvas{position:absolute;inset:0;width:100%;height:100%}
.scrub__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(10,5,16,.7) 100%)}
.scrub__cap{position:absolute;z-index:3;pointer-events:none;max-width:min(560px,80vw)}
.scrub__cap .k{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.scrub__cap .h{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,76px);line-height:.92;color:var(--cream)}
.scrub__cap .h .thin{font-weight:200}
.scrub__cap .s{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(15px,1.3vw,19px);color:var(--lav);margin-top:16px;line-height:1.5}
.cap-1{left:clamp(20px,5vw,80px);top:18vh}
.cap-2{right:clamp(20px,5vw,80px);bottom:20vh;text-align:right}
.cap-3{left:clamp(20px,5vw,80px);bottom:20vh}
.scrub__hud{position:absolute;z-index:4;left:0;right:0;bottom:34px;display:flex;justify-content:center;gap:14px;align-items:center;pointer-events:none}
.scrub__hud .t{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.3em;color:var(--mist)}
.scrub__hud .track{width:min(260px,40vw);height:2px;background:rgba(201,174,240,.18);position:relative}
.scrub__hud .fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--orange))}

/* =================== SPECS =================== */
.specs{}
.specs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.specCell{background:linear-gradient(180deg, rgba(22,12,40,.6), rgba(10,5,16,.6));padding:clamp(26px,3vw,46px) clamp(22px,2.4vw,38px);min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.specCell .k{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist)}
.specCell .v{font-family:"Oswald",sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(40px,4.6vw,72px);line-height:.9;color:var(--cream);margin-top:auto}
.specCell .v b{font-weight:700}
.specCell .u{font-size:.4em;font-weight:400;color:var(--lav);letter-spacing:.04em}

/* =================== GALLERY (horizontal) =================== */
#gallery{position:relative;height:300vh}
.gal__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.gal__track{display:flex;gap:clamp(16px,2vw,34px);padding:0 8vw;will-change:transform}
.gal__item{position:relative;flex:0 0 auto;height:74svh;width:clamp(320px,52svh,640px);overflow:hidden;border:1px solid var(--line)}
.gal__item.tall{width:clamp(280px,40svh,460px)}
.gal__item img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.gal__item .cap{position:absolute;left:18px;bottom:16px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gal__head{position:absolute;z-index:5;left:8vw;top:12vh;pointer-events:none}

/* =================== DETAILS (split) =================== */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;margin-bottom:clamp(80px,12vh,160px)}
.detail:last-child{margin-bottom:0}
.detail--flip .detail__media{order:2}
.detail__media{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.detail__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.detail__body h3{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.6vw,58px);line-height:.95;color:var(--cream);margin:14px 0 18px}
.detail__body h3 .thin{font-weight:200;color:var(--lav)}
.detail__body p{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:var(--mist);max-width:46ch}
.detail__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);border:1px solid var(--line);padding:8px 14px}

/* =================== FILM =================== */
.film{max-width:1240px}
.film__frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:#000}
.film__frame video{width:100%;height:100%;object-fit:cover;display:block}
.film__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,5,16,.25);cursor:pointer;transition:opacity .5s}
.film__play .btn{width:90px;height:90px;border-radius:50%;border:1px solid rgba(246,240,255,.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.film__play .btn::after{content:"";border-left:20px solid var(--cream);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.film__play.hidden{opacity:0;pointer-events:none}

/* =================== EQUIPMENT =================== */
.equip__list{columns:2;column-gap:60px}
.equip__list li{list-style:none;font-family:"Fraunces",serif;font-weight:300;font-size:clamp(15px,1.15vw,18px);color:var(--mist);
  padding:15px 0;border-bottom:1px solid var(--line);break-inside:avoid;display:flex;gap:14px;align-items:baseline}
.equip__list li::before{content:"—";color:var(--orange);font-family:"Space Mono",monospace}

/* =================== OFFER / CONTACT =================== */
.offer{text-align:center;max-width:1000px}
.offer .price{font-family:"Oswald",sans-serif;font-weight:200;font-size:clamp(60px,11vw,170px);line-height:.9;color:var(--cream);letter-spacing:-.01em}
.offer .price b{font-weight:700}
.offer .note{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-top:18px}
.offer .sub{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(16px,1.4vw,21px);color:var(--lav);margin-top:22px;line-height:1.6}
.offer .cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.btn-lg{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:20px 38px;border:1px solid var(--lav);color:var(--cream);transition:.4s var(--easing);cursor:pointer}
.btn-lg:hover{background:var(--cream);color:var(--ink)}
.btn-lg.solid{background:var(--orange);border-color:var(--orange);color:#1a0a02}
.btn-lg.solid:hover{filter:brightness(1.12);background:var(--orange)}
.offer .meta{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-top:50px;border-top:1px solid var(--line);padding-top:34px}
.offer .meta div{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.offer .meta b{color:var(--cream);display:block;margin-top:6px;font-size:15px}

/* =================== FOOTER =================== */
.footer{border-top:1px solid var(--line);padding:60px clamp(20px,4vw,60px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;max-width:var(--maxw);margin:0 auto}
.footer .b{font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:22px;color:var(--cream)}
.footer .s{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}

/* =================== REVEAL BASE =================== */
[data-reveal]{opacity:0;transform:translateY(40px)}

/* =================== RESPONSIVE =================== */
@media (max-width:880px){
  .detail{grid-template-columns:1fr;gap:26px}
  .detail--flip .detail__media{order:0}
  .equip__list{columns:1}
  .nav .right a:first-child{display:none}
  .cap-1,.cap-2,.cap-3{top:auto;bottom:16vh;left:clamp(18px,5vw,40px);right:auto;text-align:left;max-width:84vw}
  .cap-2{bottom:30vh}
  .cap-3{bottom:16vh}
}
@media (max-width:600px){
  .nav{padding:20px 22px}
  .nav .brand{font-size:11px;letter-spacing:.26em}
  .nav .right{font-size:11px;letter-spacing:.2em}
  .scrollcue{display:none}
  .hero__inner{padding-bottom:40px}
  .hero h1{font-size:clamp(44px,15vw,78px)}
  .hero__row{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:22px;padding-top:18px}
  .hero__row .it{font-size:11px}
  .section{padding:66px 22px}
  .eyebrow{margin-bottom:24px;gap:12px}
  .manifesto .big{font-size:clamp(25px,6.6vw,40px)}
  .manifesto .cols{gap:34px;margin-top:44px}
  .specCell{min-height:150px}
  .scrub__cap .k{font-size:11px;margin-bottom:8px}
  .scrub__cap .h{font-size:clamp(30px,9vw,48px)}
  .scrub__cap .s{font-size:14px;margin-top:12px}
  .gal__head{left:22px;top:10vh}
  .detail__body h3{font-size:clamp(28px,8vw,44px)}
  .offer .price{font-size:clamp(54px,17vw,92px)}
  .offer .cta{flex-direction:column;gap:12px}
  .btn-lg{width:100%;text-align:center;padding:18px 28px}
  .offer .meta{gap:20px;flex-direction:column;align-items:center}
  .footer{flex-direction:column;align-items:flex-start;gap:14px;padding:48px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
}