/* ==================================================================
   VÉLOCE — The Drive · scroll-cinematic experience
   $aviv666k · Argentina
   ================================================================== */
:root{
  --bg:#08080A; --bg-2:#0C0C10; --ink:#F5F3EE; --muted:#9B9CA3; --muted-2:#6E6F76;
  --accent:#C9A24B; --accent-2:#E7C878; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --serif:"Fraunces",Georgia,serif; --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--accent); color:#12100A; }
a{ color:inherit; text-decoration:none; }
h1,h2{ font-family:var(--serif); font-weight:400; line-height:1; }
em{ font-style:italic; color:var(--accent-2); }

.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border:1px solid transparent; padding:14px 30px; border-radius:100px; transition:all .5s var(--ease); white-space:nowrap; }
.btn--solid{ background:var(--accent); color:#141007; border-color:var(--accent); }
.btn--solid:hover{ background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-2px); }
.btn--mini{ padding:9px 20px; font-size:11.5px; background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--mini:hover{ background:var(--accent); color:#141007; border-color:var(--accent); }
.eyebrow{ font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--accent); }

/* header */
.header{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px clamp(20px,4vw,48px); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand__mark{ width:28px; height:28px; color:var(--accent); }
.brand__word{ font-family:var(--serif); font-size:21px; letter-spacing:5px; }
.header__tag{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted-2); }
@media (max-width:720px){ .header__tag{ display:none; } }

/* loader */
.loader{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:var(--bg); transition:opacity .9s var(--ease), visibility .9s var(--ease); }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; width:min(80vw,320px); }
.loader__mark{ width:52px; height:52px; color:var(--accent); margin-bottom:26px; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.loader__kicker{ font-family:var(--serif); font-size:26px; letter-spacing:8px; margin-bottom:26px; }
.loader__bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .3s var(--ease); }
.loader__pct{ margin-top:16px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted-2); }

/* ── experience / pinned stage ── */
.experience{ position:relative; height:760vh; }         /* scroll length that drives the timeline */
.stage{ position:relative; height:100vh; width:100%; overflow:hidden; background:
    radial-gradient(120% 90% at 50% 32%, #16161c 0%, #0b0b0e 45%, #050506 100%); }
.stage__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage__vignette{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 100% at 50% 46%, transparent 52%, rgba(0,0,0,.55) 100%); }

/* captions */
.caps{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.cap{ position:absolute; left:0; right:0; bottom:clamp(84px,15vh,150px); text-align:center; padding:0 24px;
  opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.cap.is-active{ opacity:1; transform:none; }
.cap__k{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.cap__t{ font-size:clamp(30px,5.6vw,68px); letter-spacing:-.01em; text-shadow:0 4px 40px rgba(0,0,0,.6); }

/* opening hero title */
.stage__intro{ position:absolute; left:0; right:0; top:clamp(90px,18vh,180px); z-index:3; text-align:center; padding:0 24px; pointer-events:none; transition:opacity .6s var(--ease); }
.stage__kicker{ font-size:12px; letter-spacing:6px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.stage__title{ font-size:clamp(48px,9vw,132px); line-height:.92; letter-spacing:-.02em; text-shadow:0 6px 50px rgba(0,0,0,.5); }

/* progress + hint */
.stage__progress{ position:absolute; left:50%; transform:translateX(-50%); bottom:38px; width:min(60%,460px); height:2px; background:var(--line); z-index:4; }
.stage__progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(201,162,75,.6); }
.stage__hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:54px; z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted-2); transition:opacity .5s var(--ease); }
.stage__hint span{ font-size:10px; letter-spacing:4px; text-transform:uppercase; }
.stage__hint i{ width:1px; height:36px; background:linear-gradient(var(--muted-2),transparent); animation:drop 2.2s 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; } }

/* ── outro ── */
.outro{ position:relative; z-index:5; background:var(--bg); text-align:center; padding:clamp(100px,15vw,180px) clamp(20px,5vw,48px); max-width:820px; margin:0 auto; }
.outro__title{ font-size:clamp(34px,6vw,80px); letter-spacing:-.015em; margin:26px 0 46px; line-height:1.02; }
.specs{ list-style:none; max-width:560px; margin:0 auto 46px; text-align:left; }
.specs li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.specs li:last-child{ border-bottom:1px solid var(--line); }
.specs span{ color:var(--muted-2); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.specs strong{ font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.7vw,21px); }
.outro__cta{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.outro__note{ color:var(--muted-2); font-size:13px; letter-spacing:.5px; }

/* footer */
.footer{ position:relative; z-index:5; border-top:1px solid var(--line); background:var(--bg-2); padding:40px clamp(20px,5vw,48px); text-align:center; color:var(--muted-2); font-size:13px; }
.footer__row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; color:var(--ink); }
.footer__row .brand__word{ font-size:20px; }
.footer strong{ color:var(--accent-2); font-weight:400; }

@media (prefers-reduced-motion:reduce){
  .loader__mark,.stage__hint i{ animation:none; }
}