/* ─────────────────────────────────────────────────────────────
   apex garage — Ferrari Enzo 2002   (site-25)
   3-slide presentation, scroll = playhead through scrubbed studio footage
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#18191b;
  --bg2:#242628;
  --ink:#f1f1f2;
  --ink-dim:#8a8d92;
  --ink-mute:#5d6065;
  --line:rgba(255,255,255,.22);
  --red:#d3102f;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,6.9vw,100px);
  --padt:clamp(20px,5.5vh,50px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
svg{display:block}
@media (pointer:coarse){body,button{cursor:auto}}

/* ── preloader ── */
.pre{position:fixed;inset:0;z-index:100;background:#0f0f10;display:grid;place-items:center;transition:none}
.pre__inner{width:min(300px,70vw)}
.pre__logo{font-weight:600;font-size:14px;line-height:1;letter-spacing:-.01em;margin-bottom:26px}
.pre__rail{height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.pre__rail i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.pre__meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-top:10px}
.pre__meta em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── cursor ── */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;pointer-events:none;z-index:90;transform:translate(-50%,-50%);mix-blend-mode:difference;opacity:0}
.cur-ring{position:fixed;left:0;top:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.28);pointer-events:none;z-index:89;transform:translate(-50%,-50%) scale(.6);opacity:0;filter:blur(3px)}
@media (pointer:coarse){.cur,.cur-ring{display:none}}

/* ── stage ── */
.stage{position:relative;height:100vh;height:100svh;width:100%;overflow:hidden;isolation:isolate}
.stage__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.stage__ground{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 100%,#2b2d30 0%,#1c1d1f 45%,#141416 100%);}
.stage__glow{position:absolute;left:-30vw;top:-10vh;width:80vw;height:130vh;
  background:radial-gradient(closest-side,rgba(215,16,48,.85),rgba(190,10,40,.35) 40%,rgba(120,0,25,0) 72%);
  filter:blur(24px);mix-blend-mode:screen;opacity:.85}
.stage__glow--top{left:auto;right:-30vw;top:-70vh;width:70vw;height:110vh;opacity:.18}
.stage__grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* film: two scroll-scrubbed clips stacked; black studio blends into the ground via a soft mask */
.stage__film{position:absolute;inset:0;z-index:1;overflow:hidden}
.film{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover;object-position:50% 52%;display:block;background:#000;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);
  will-change:opacity,filter}
.film--bay{opacity:0;left:46%;top:53%;width:82%;height:82%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect} /* slide 3: car sits upper-centre-left, clear of the spec stack */
.film[hidden]{display:none}
.film__floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(24,25,27,.85),rgba(24,25,27,0));pointer-events:none}
@media (max-aspect-ratio:1/1){
  .film{width:178vh;height:100%;object-fit:cover}
  .film--bay{left:50%;top:50%;width:150vh;height:84%}
}
/* the red glow bleeds over the footage like the reference (bg layer duplicated above the film) */
.stage__over{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}

/* HUD */
.hud{position:absolute;z-index:5;left:var(--pad);right:var(--pad);top:var(--padt);display:flex;align-items:center;gap:clamp(30px,4.6vw,66px)}
.hud__brand{display:flex;flex-direction:column;font-weight:600;font-size:clamp(11px,.85vw,13px);line-height:1;letter-spacing:-.01em}
.hud__brand span+span{margin-top:2px}
.hud__menu{width:14px;height:11px;display:flex;flex-direction:column;justify-content:space-between}
.hud__menu i{display:block;height:1.2px;background:var(--ink)}
.hud__right{margin-left:auto;display:flex;align-items:center;gap:clamp(30px,5.2vw,74px);font-size:11px;letter-spacing:.02em}
.hud__lang{display:flex;align-items:center;gap:6px}
.stage__contact{position:absolute;z-index:5;right:var(--pad);top:calc(var(--padt) + clamp(60px,10vh,88px));
  border:1px solid rgba(255,255,255,.7);border-radius:3px;font-size:10px;letter-spacing:.02em;padding:11px 20px;transition:background .3s,color .3s}
.stage__contact:hover{background:var(--ink);color:#111}
.stage__social{position:absolute;z-index:5;right:calc(var(--pad) - 6px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.stage__social a{width:12px;height:12px;display:block;color:rgba(255,255,255,.75)}
.stage__social svg{width:12px;height:12px;fill:currentColor}
.stage__lot{position:absolute;z-index:5;right:calc(var(--pad) - 4px);bottom:calc(var(--padt) + 62px);writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--ink-mute)}

/* slides */
.slides{position:absolute;inset:0;z-index:4;pointer-events:none}
.slide{position:absolute;inset:0}
.line{display:block;overflow:hidden}
.ln{display:block;will-change:transform,opacity}
.slide[data-i] .ln{transform:translateY(110%);opacity:0}
.slide[data-i="1"] .ln{transform:none;opacity:1}

.s1-title{position:absolute;left:var(--pad);top:calc(var(--padt) + clamp(56px,10.5vh,95px));font-weight:500;font-size:clamp(28px,2.9vw,42px);letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.s1-title b{font-weight:500}
.s1-title .outline{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75);margin-left:.08em}
.s1-title sup{font-size:.36em;font-weight:400;letter-spacing:0;vertical-align:top;position:relative;top:-.15em;margin-left:.2em;color:var(--ink)}
.s1-price{position:absolute;right:calc(var(--pad) + clamp(140px,10.5vw,152px));top:calc(var(--padt) + clamp(58px,10.5vh,90px));text-align:right;font-weight:500;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.02em;line-height:1.1}
.s1-price .cur-sym{font-size:.6em;vertical-align:top;position:relative;top:.05em;margin-right:.05em}
.s1-price .small{font-weight:400;font-size:9px;color:var(--ink-mute);letter-spacing:.02em;margin-top:6px}

.kicker{position:absolute;left:var(--pad);top:calc(var(--padt) + clamp(56px,10.5vh,95px));font-size:clamp(11px,.9vw,13px);font-weight:400;letter-spacing:-.005em}
.kicker .dim{color:var(--ink-mute);margin-left:.5em}
.kicker sup{font-size:.6em;vertical-align:top}
.s-title{position:absolute;left:var(--pad);top:calc(var(--padt) + clamp(70px,12.5vh,113px));font-weight:400;font-size:clamp(30px,3.15vw,46px);letter-spacing:-.03em;line-height:1}
.tag{position:absolute;left:var(--pad);bottom:calc(var(--padt) + clamp(56px,7vh,72px));font-weight:400;font-size:clamp(15px,1.5vw,22px);letter-spacing:-.02em;line-height:1.28}
.disc-label{position:absolute;left:calc(var(--pad) + clamp(150px,13.9vw,200px));bottom:calc(var(--padt) + 6px);width:140px;text-align:right;font-size:11px;font-weight:500;letter-spacing:.01em}

.specs{position:absolute;right:calc(var(--pad) + clamp(70px,8.5vw,120px));top:calc(var(--padt) + clamp(150px,27vh,240px));display:flex;flex-direction:column;gap:clamp(14px,3.5vh,32px)}
.spec dt{font-size:clamp(14px,1.25vw,18px);font-weight:400;letter-spacing:-.01em;line-height:1}
.spec dd{font-size:9px;color:var(--ink-dim);margin-top:6px;letter-spacing:.02em}

/* discover arrow */
.disc{position:absolute;z-index:6;left:calc(var(--pad) + clamp(150px,13.9vw,200px) + 142px);bottom:calc(var(--padt) - 10px);width:34px;height:34px;display:grid;place-items:center;color:var(--ink)}
.disc__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);transform:scale(.55);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.disc:hover .disc__ring{transform:scale(1);opacity:1}
.disc svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.disc:hover svg{transform:translateX(3px)}

/* pager */
.pager{position:absolute;z-index:6;right:calc(var(--pad) - 4px);bottom:calc(var(--padt) - 4px);display:flex;align-items:center;gap:20px}
.pager__num{font-size:11px;font-weight:500;width:2ch;font-variant-numeric:tabular-nums}
.pager__rail{width:clamp(70px,7vw,100px);height:1px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.pager__rail i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.333)}
.pager__icon{width:16px;height:16px;position:relative;margin-left:16px;color:rgba(255,255,255,.8)}
.pager__icon svg{position:absolute;inset:0;width:16px;height:16px;transition:opacity .4s,transform .4s}
.pager__icon .ic-up{opacity:0;transform:translateY(6px)}
.stage[data-slide="3"] .pager__icon .ic-scroll{opacity:0;transform:translateY(-6px)}
.stage[data-slide="3"] .pager__icon .ic-up{opacity:1;transform:none}

/* runway that gives the pin its scroll length */
.runway{height:300vh}

/* detail strip */
.detail{position:relative;z-index:2;background:#111112;display:grid;grid-template-columns:1.15fr 1fr;min-height:70vh;border-top:1px solid rgba(255,255,255,.06)}
.detail__media{position:relative;overflow:hidden;min-height:46vh}
.detail__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.detail__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(17,17,18,0) 60%,#111112 100%),linear-gradient(to top,#111112,rgba(17,17,18,0) 30%)}
.detail__copy{padding:clamp(48px,9vh,110px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:22px}
.detail__k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.detail__h{font-weight:400;font-size:clamp(24px,2.5vw,38px);letter-spacing:-.03em;line-height:1.08}
.detail__copy p{font-size:13px;line-height:1.6;color:var(--ink-dim);max-width:44ch}
.detail__facts{display:flex;gap:clamp(20px,3vw,44px);margin-top:8px}
.detail__facts dt{font-size:clamp(15px,1.3vw,19px);font-weight:400;letter-spacing:-.01em}
.detail__facts dd{font-size:9px;color:var(--ink-mute);margin-top:5px;letter-spacing:.03em}
.detail .rv{opacity:0;transform:translateY(18px)}

/* footer */
.foot{position:relative;z-index:2;background:#0f0f10;color:var(--ink);padding:clamp(60px,9vh,100px) var(--pad) 30px;border-top:1px solid rgba(255,255,255,.06)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1.2fr .8fr .8fr;gap:40px}
.foot__brand{font-weight:600;font-size:14px;line-height:1.05;margin-bottom:22px}
.foot__blurb{max-width:34ch;font-size:13px;line-height:1.55;color:var(--ink-dim)}
.foot__col h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;font-weight:500}
.foot__col a{display:block;font-size:13px;margin-bottom:9px;color:var(--ink);opacity:.85;transition:opacity .3s}
.foot__col a:hover{opacity:1}
.foot__col p{font-size:13px;line-height:1.55;color:var(--ink-dim)}
.foot__cta{margin-top:18px;border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:10px 16px;display:inline-block!important;font-size:11px}
.foot__cta span{display:inline-block;margin-left:6px;transition:transform .4s}
.foot__cta:hover span{transform:translateX(4px)}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:10px;color:var(--ink-mute);letter-spacing:.03em}

/* responsive */
@media (max-width:900px){
  :root{--pad:22px;--padt:22px}
  .hud{gap:22px}.hud__right{gap:22px}
  .stage__contact{top:auto;bottom:calc(var(--padt) + 100px);right:var(--pad);left:auto;padding:9px 14px}
  .stage__social,.stage__lot{display:none}
  .s1-title{top:70px}
  .s1-price{right:auto;left:var(--pad);top:120px;text-align:left}
  .kicker{top:70px}.s-title{top:88px}
  .specs{right:var(--pad);top:auto;bottom:calc(var(--padt) + 150px);gap:12px;text-align:right}
  .tag{bottom:calc(var(--padt) + 62px);font-size:16px}
  .disc-label{left:var(--pad);width:120px;text-align:left}
  .disc{left:calc(var(--pad) + 122px)}
  .pager__rail{width:56px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr}
  .stage__contact{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ln{transition:none!important}
}