/* ==================================================================
   VÉLOCE MAISON — Private Acquisition · BMW M4 GT3 (G82)
   Scroll-cinematic private showroom.  $aviv666k · Argentina
   ================================================================== */
:root{
  --bg:#06070A; --bg-2:#0A0C11; --ink:#F3F5FA; --muted:#98A0AD; --muted-2:#666C78;
  --accent:#6E93C8; --accent-2:#AECBF0; --gold:#D8202D; --gold-2:#FF5A62;
  --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(--gold); 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(--gold-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:15px 34px; border-radius:100px; transition:all .5s var(--ease); white-space:nowrap; }
.btn--solid{ background:var(--gold); color:#0A0E16; border-color:var(--gold); }
.btn--solid:hover{ background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px); box-shadow:0 14px 40px rgba(216,32,45,.28); }
.btn--mini{ padding:9px 20px; font-size:11.5px; background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--mini:hover{ background:var(--gold); color:#0A0E16; border-color:var(--gold); }
.eyebrow{ font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); }

/* 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);
  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); }
.brand{ display:flex; align-items:baseline; gap:9px; }
.brand__mark{ width:28px; height:28px; color:var(--gold); align-self:center; }
.brand__word{ font-family:var(--serif); font-size:21px; letter-spacing:5px; }
.brand__sub{ font-family:var(--serif); font-style:italic; font-size:13px; letter-spacing:1px; color:var(--gold); }
.header__tag{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted-2); }
@media (max-width:760px){ .header__tag, .brand__sub{ 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,340px); }
.loader__mark{ width:52px; height:52px; color:var(--gold); 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:23px; letter-spacing:7px; 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(--gold),var(--gold-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:940vh; }        /* scroll length that drives the timeline */
.stage{ position:relative; height:100vh; width:100%; overflow:hidden; background:
    radial-gradient(120% 90% at 50% 42%, #0d1016 0%, #08090d 48%, #030405 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% 52%, transparent 46%, rgba(0,0,0,.62) 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; }
/* interior POV caption sits up top so it never covers the instrument cluster */
.cap[data-cap="4"]{ bottom:auto; top:clamp(90px,19vh,188px); }
.cap__k{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.cap__t{ font-size:clamp(28px,5.2vw,62px); letter-spacing:-.01em; text-shadow:0 4px 40px rgba(0,0,0,.75); }

/* opening hero title */
.stage__intro{ position:absolute; left:0; right:0; top:clamp(84px,16vh,168px); 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(--gold); margin-bottom:18px; }
.stage__title{ font-size:clamp(46px,8.4vw,124px); line-height:.92; letter-spacing:-.02em; text-shadow:0 6px 50px rgba(0,0,0,.55); }
.stage__lede{ max-width:440px; margin:22px auto 0; font-size:clamp(14px,1.6vw,16px); color:var(--ink); letter-spacing:.3px; text-shadow:0 2px 22px rgba(0,0,0,.85), 0 0 40px rgba(0,0,0,.6); }

/* 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(--gold),var(--gold-2)); box-shadow:0 0 12px rgba(216,32,45,.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; } }

/* ── outro ── */
.outro{ position:relative; z-index:5; background:var(--bg); text-align:center; padding:clamp(100px,15vw,180px) clamp(20px,5vw,48px); max-width:840px; margin:0 auto; }
.outro__title{ font-size:clamp(32px,5.6vw,74px); letter-spacing:-.015em; margin:26px 0 28px; line-height:1.04; }
.outro__intro{ max-width:600px; margin:0 auto 50px; color:var(--muted); font-size:clamp(14px,1.7vw,17px); letter-spacing:.2px; }
.specs{ list-style:none; max-width:580px; margin:0 auto 50px; text-align:left; }
.specs li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:17px 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:12.5px; 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(--gold-2); font-weight:400; }

/* ── scrollbar custom ── */
html{ scrollbar-width:thin; scrollbar-color:#3a2f1e #07080C; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#07080C; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold),#6e1620); border-radius:99px; border:2px solid #07080C; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-2); }

/* ── HUD: etiqueta de la vista + spec (aparece durante la inspección) ── */
.hud{ position:absolute; left:clamp(20px,4vw,52px); bottom:clamp(64px,10vh,96px); z-index:6; display:flex; flex-direction:column; gap:12px;
  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__label{ font-family:var(--serif); font-size:clamp(20px,2.4vw,30px); letter-spacing:.5px; color:var(--ink); text-shadow:0 2px 24px rgba(0,0,0,.6); }
.hud__line{ width:46px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.hud__meta{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .hud{ bottom:74px; } }

/* 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(--gold-2); transform:scale(1.25); }
.chapters button.is-active{ height:30px; background:linear-gradient(var(--gold),var(--gold-2)); border-color:transparent; box-shadow:0 0 14px rgba(216,32,45,.5); }
@media (max-width:760px){ .chapters{ display:none; } }

/* ── flare de apertura (canopy) ── */
.openflare{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(58% 42% at 50% 46%, rgba(255,90,98,.42), rgba(174,203,240,.10) 40%, transparent 70%);
  mix-blend-mode:screen; transition:opacity .5s linear; }

/* 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)*80ms); }
.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; } .specs li:nth-child(5){ --i:5; }

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