/* ==================================================================
   VÉLOCE — The Road · Bugatti Tourbillon
   Scroll-cinematic drive experience.  $aviv666k · Argentina
   ================================================================== */
:root{
  --bg:#06070A; --bg-2:#0A0C11; --ink:#F3F5FA; --muted:#98A0AD; --muted-2:#666C78;
  --accent:#6E93C8; --accent-2:#AECBF0; --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:#0A0E16; }
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:.05; 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:#0A0E16; 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:#0A0E16; 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:820vh; }         /* scroll length that drives the timeline */
.stage{ position:relative; height:100vh; width:100%; overflow:hidden; background:
    radial-gradient(120% 90% at 50% 40%, #101319 0%, #090b0f 48%, #040507 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% 50%, transparent 50%, rgba(0,0,0,.6) 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,.7); }

/* 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,.55); }

/* 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(110,147,200,.7); }
.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; } }

/* speed streaks overlay (fades in with velocity) */
.speedlines{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .4s linear;
  background:
    repeating-linear-gradient(90deg, transparent 0 7%, rgba(174,203,240,.05) 7.2%, transparent 7.6% 14%);
  mix-blend-mode:screen; }

/* ── 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; }
}

/* ── ignición: botón de arranque (auto-drive sin scroll) ── */
.ignition{ position:absolute; left:50%; top:63%; transform:translate(-50%,-50%); z-index:6;
  width:132px; height:132px; border-radius:50%; border:none; cursor:pointer; padding:0; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 36%, #2a0d10 0%, #150a0c 58%, #0a0708 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition:opacity .6s var(--ease), transform .45s var(--ease), visibility .6s var(--ease); }
.ignition::before{ content:""; position:absolute; inset:-10px; border-radius:50%;
  box-shadow:0 0 34px 6px rgba(214,40,40,.42); animation:ign-pulse 2.4s ease-in-out infinite; }
.ignition__ring{ position:absolute; inset:9px; border-radius:50%; border:2px solid rgba(214,40,40,.55); box-shadow:inset 0 0 18px rgba(214,40,40,.35); }
.ignition__core{ position:relative; display:flex; flex-direction:column; align-items:center; line-height:1.06; color:#ff6a6a; text-shadow:0 0 12px rgba(214,40,40,.7); }
.ignition__label{ font-family:var(--sans); font-size:10.5px; letter-spacing:3px; text-transform:uppercase; font-weight:400; }
.ignition__label--lg{ font-size:19px; letter-spacing:4px; font-weight:500; color:#ff8080; }
.ignition:hover{ transform:translate(-50%,-50%) scale(1.05); }
.ignition:active{ transform:translate(-50%,-50%) scale(.96); }
.ignition.is-off{ opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(.55); pointer-events:none; }
@keyframes ign-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (max-width:720px){ .ignition{ width:112px; height:112px; top:66%; } .ignition__label--lg{ font-size:16px; } }

/* ── reproductor flotante de Spotify ── */
.spotify{ position:fixed; left:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,26px); z-index:55;
  width:326px; max-width:calc(100vw - 28px); border-radius:14px; overflow:hidden; background:#0b0c10;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 1px var(--line-2); transition:transform .5s var(--ease); }
.spotify__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 13px; border:0; background:linear-gradient(180deg,#101319,#0b0c10); color:var(--ink); cursor:pointer; font-family:var(--sans); }
.spotify__now{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.spotify__now b{ color:var(--accent-2); font-weight:500; letter-spacing:1.5px; }
.spotify__eq{ display:inline-flex; gap:2px; align-items:flex-end; height:12px; }
.spotify__eq i{ width:2.5px; background:var(--accent); border-radius:2px; animation:eq 1s ease-in-out infinite; }
.spotify__eq i:nth-child(2){ animation-delay:.2s; } .spotify__eq i:nth-child(3){ animation-delay:.4s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:12px; } }
.spotify__chev{ color:var(--muted-2); font-size:13px; transition:transform .4s var(--ease); }
.spotify iframe{ display:block; width:100%; height:80px; border:0; transition:height .4s var(--ease); }
.spotify.is-min iframe{ height:0; }
.spotify.is-min .spotify__chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .spotify__eq i,.ignition::before{ animation:none; } }

/* ══════════ pulido premium: HUD, capítulos, cine, header, reveals ══════════ */

/* scrollbar custom — detalle de agencia */
html{ scrollbar-width:thin; scrollbar-color:#2A3547 #07080C; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#07080C; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent),#3A517A); border-radius:99px; border:2px solid #07080C; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-2); }

/* header al scrollear: fino, con blur y línea */
.header{ transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; }
.header.is-scrolled{ background:rgba(6,7,10,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding-top:14px; padding-bottom:14px; border-bottom-color:var(--line); }

/* HUD velocímetro */
.hud{ position:absolute; right:clamp(20px,4vw,52px); bottom:clamp(64px,10vh,96px); z-index:6; display:flex; align-items:baseline; gap:10px;
  opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none; }
.hud.is-on{ opacity:1; transform:none; }
.hud__n{ font-family:var(--sans); font-weight:300; font-size:clamp(44px,5.4vw,74px); letter-spacing:4px; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; text-shadow:0 0 24px rgba(174,203,240,.35); }
.hud__u{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); }
@media (max-width:720px){ .hud{ bottom:76px; } .hud__n{ font-size:40px; } }

/* dots de capítulos */
.chapters{ position:absolute; right:clamp(16px,2.6vw,34px); top:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:14px; }
.chapters button{ width:10px; height:10px; border-radius:99px; border:1px solid var(--line-2); background:transparent; cursor:pointer; padding:0;
  transition:all .45s var(--ease); }
.chapters button:hover{ border-color:var(--accent-2); transform:scale(1.25); }
.chapters button.is-active{ height:30px; background:linear-gradient(var(--accent),var(--accent-2)); border-color:transparent; box-shadow:0 0 14px rgba(110,147,200,.5); }
@media (max-width:720px){ .chapters{ display:none; } }

/* letterbox cinemático durante el auto-drive */
.cine i{ position:fixed; left:0; right:0; height:0; background:#000; z-index:45; transition:height .9s var(--ease); pointer-events:none; }
.cine i:first-child{ top:0; } .cine i:last-child{ bottom:0; }
body.is-auto .cine i{ height:6.5vh; }

/* ignición: estado "starting" — el anillo gira antes de arrancar */
.ignition.is-starting .ignition__ring{ border-color:rgba(255,156,156,.9); border-top-color:transparent; animation:ign-spin .55s linear infinite; }
.ignition.is-starting .ignition__core{ animation:ign-blink .25s linear infinite; }
@keyframes ign-spin{ to{ transform:rotate(360deg); } }
@keyframes ign-blink{ 50%{ opacity:.55; } }

/* outro: reveals editoriales */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv-in{ opacity:1; transform:none; }
.specs li.rv{ transition-delay:calc(var(--i,0)*90ms); }
.specs li:nth-child(1){ --i:1; } .specs li:nth-child(2){ --i:2; } .specs li:nth-child(3){ --i:3; } .specs li:nth-child(4){ --i:4; }

/* spotify: micro-interacción */
.spotify:hover{ transform:translateY(-4px); }

@media (prefers-reduced-motion:reduce){
  .cine i, .rv{ transition:none; }
  .ignition.is-starting .ignition__ring, .ignition.is-starting .ignition__core{ animation:none; }
}