/* ==================================================================
   APEX — Private Motorcar Gallery · 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,h3{ 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; } }

/* shared section rhythm */
.feature,.process,.outro{ position:relative; z-index:5; background:var(--bg); text-align:center; }
.feature{ padding:clamp(90px,13vw,150px) clamp(20px,5vw,48px) clamp(70px,9vw,110px); max-width:900px; margin:0 auto; }
.feature__title{ font-size:clamp(38px,7vw,90px); letter-spacing:-.015em; margin:22px 0 26px; line-height:1.0; }
.feature__lede{ max-width:600px; margin:0 auto 44px; color:var(--muted); font-size:clamp(15px,1.7vw,18px); }

/* spec list */
.specs{ list-style:none; max-width:620px; margin:0 auto 44px; 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(15px,1.7vw,20px); text-align:right; }

.feature__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px; margin-bottom:18px; }
.price{ text-align:left; }
.price__k{ display:block; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px; }
.price__v{ display:block; font-family:var(--serif); font-size:clamp(24px,3vw,34px); color:var(--accent-2); }
.feature__note{ color:var(--muted-2); font-size:12.5px; letter-spacing:.4px; }

/* ── collection ── */
.collection{ position:relative; z-index:5; background:var(--bg-2); border-top:1px solid var(--line); padding:clamp(80px,11vw,140px) clamp(20px,5vw,64px); }
.collection__head{ max-width:820px; margin:0 auto clamp(48px,6vw,72px); text-align:center; }
.collection__title{ font-size:clamp(32px,5.2vw,62px); letter-spacing:-.015em; margin:20px 0 22px; line-height:1.02; }
.collection__lede{ max-width:560px; margin:0 auto; color:var(--muted); font-size:clamp(14px,1.6vw,17px); }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); max-width:1200px; margin:0 auto; }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }

.card{ position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0a0a0d; transition:transform .5s var(--ease), border-color .5s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.card.is-featured{ border-color:rgba(201,162,75,.4); }
.card__art{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.55) 100%); }
/* silhouette gloss line shared across cards */
.card__art::before{ content:""; position:absolute; left:-10%; right:-10%; bottom:26%; height:38%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.14), transparent 70%);
  transform:skewY(-4deg); }
.art--lambo{ background:linear-gradient(135deg,#8fe000 0%,#3f7a05 55%,#0c1a02 100%); }
.art--mclaren{ background:linear-gradient(135deg,#ff7a1a 0%,#8a3600 55%,#170a03 100%); }
.art--ferrari{ background:linear-gradient(135deg,#e8112d 0%,#7a0714 55%,#180205 100%); }
.art--bugatti{ background:linear-gradient(135deg,#2e6ec2 0%,#12305e 55%,#03080f 100%); }
.art--merc{ background:linear-gradient(135deg,#b7c4cc 0%,#4d6a72 50%,#0a1417 100%); }
.art--bmw{ background:linear-gradient(135deg,#5b636b 0%,#2a2f34 55%,#08090b 100%); }
.card__badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:5px 11px; border-radius:100px; background:var(--accent); color:#141007; font-weight:400; }
.card__body{ padding:20px 22px 22px; }
.card__marque{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.card__name{ font-size:clamp(20px,2.3vw,26px); margin-bottom:10px; }
.card__spec{ color:var(--muted); font-size:13px; margin-bottom:18px; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.card__price{ font-family:var(--serif); font-size:clamp(15px,1.8vw,19px); color:var(--ink); }
.card__status{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:100px; border:1px solid var(--line-2); }
.card__status.available{ color:#8fe0a0; border-color:rgba(143,224,160,.35); }
.card__status.reserved{ color:var(--muted-2); }
.card__status.enquire{ color:var(--accent-2); border-color:rgba(231,200,120,.35); }

/* ── process ── */
.process{ padding:clamp(80px,11vw,140px) clamp(20px,5vw,48px); max-width:1080px; margin:0 auto; }
.process__title{ font-size:clamp(32px,5.2vw,62px); letter-spacing:-.015em; margin:20px 0 clamp(44px,6vw,66px); line-height:1.02; }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px); text-align:left; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.steps li{ padding-top:22px; border-top:1px solid var(--line-2); }
.steps__n{ font-family:var(--serif); font-size:14px; letter-spacing:2px; color:var(--accent); }
.steps h3{ font-size:clamp(19px,2vw,23px); margin:12px 0 10px; }
.steps p{ color:var(--muted); font-size:14px; }

/* ── outro ── */
.outro{ 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; }
.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); flex-wrap:wrap; }
.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; }
}