/* car.css — style 16, "the turntable".

   A dark showroom. The one move is a hard cut sequence: scrolling steps through
   five photographs taken from five positions around the same car, so it reads
   as the car rotating rather than as pictures fading. There is deliberately no
   crossfade anywhere in the spin.

   Under it, a dial that counts the angle, because the honest claim is half a
   turn, not a full one.

   Palette: near black, one cold white, and the cognac of the leather inside. */

:root{
  --black  :#08090B;
  --carbon :#121418;
  --steel  :#1C2026;
  --white  :#F3F4F6;
  --white-d:rgba(243,244,246,.62);
  --white-f:rgba(243,244,246,.34);
  --cognac :#B5652C;               /* the leather */
  --line   :rgba(243,244,246,.14);
  --pad    :clamp(22px,5vw,88px);
  --sans   :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --mono   :ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease   :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.03rem);line-height:1.66;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--white-f)}
/* tight, wide, mechanical. The opposite of the serif pages in this portfolio. */
.display{font-weight:600;line-height:.98;letter-spacing:-.035em;
  font-size:clamp(2.6rem,8vw,7rem);text-transform:uppercase}
.display em{font-style:normal;color:var(--cognac)}
.h2{font-weight:600;line-height:1.04;letter-spacing:-.025em;
  font-size:clamp(1.7rem,4vw,3.2rem);text-transform:uppercase}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(8,9,11,.86),rgba(8,9,11,0))}
.nav__brand{font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase}
.nav__brand span{color:var(--cognac)}
.nav__cta{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:0 20px;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .3s var(--ease),color .3s var(--ease)}
.nav__cta:hover{background:var(--white);color:var(--black)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
/* a spotlight, so the car sits in a pool of light on a dark floor */
.hero__scrim{position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 58% at 50% 52%,rgba(8,9,11,0) 0%,rgba(8,9,11,.72) 72%,rgba(8,9,11,.95) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(46px,9vh,110px);z-index:2}
.hero h1{margin:14px 0 16px}
.hero__sub{color:var(--white-d);max-width:44ch}

/* ---------- lead in ---------- */
.intro{padding:clamp(70px,13vh,160px) var(--pad);max-width:1080px;margin:0 auto}
.intro p{font-weight:600;line-height:1.08;letter-spacing:-.025em;
  font-size:clamp(1.6rem,4vw,3rem);text-transform:uppercase;max-width:19ch}
.intro p em{font-style:normal;color:var(--cognac)}
.intro small{display:block;margin-top:24px;font-size:1rem;color:var(--white-d);max-width:52ch;
  text-transform:none;letter-spacing:0}

/* ---------- THE TURNTABLE ---------- */
.spin{position:relative;background:var(--carbon)}
.spin__track{height:520vh}                 /* five frames, so give it room */
.spin__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.spin__stage{position:absolute;inset:0}
.spin__frame{position:absolute;inset:0;opacity:0}
.spin__frame.is-on{opacity:1}              /* hard cut, no transition on purpose */
/* contain, not cover. A turntable only reads if the whole car stays in frame
   and stays the same size, and cover was cutting the nose and tail off. */
.spin__frame img{width:100%;height:100%;object-fit:contain;
  padding:clamp(84px,15vh,150px) var(--pad) clamp(74px,13vh,120px)}
.spin__light{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 78% 66% at 50% 50%,rgba(8,9,11,0) 0%,rgba(8,9,11,.34) 76%,rgba(8,9,11,.78) 100%)}

.spin__copy{position:absolute;left:var(--pad);top:calc(var(--pad) + 46px);z-index:3;max-width:26ch}
.spin__copy h2{margin-top:10px}

/* the dial */
.spin__dial{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(34px,7vh,72px);
  z-index:3;display:flex;align-items:center;gap:18px}
.spin__arc{position:relative;flex:1 1 auto;height:1px;background:var(--line)}
/* --deg runs 0 to 180. Dividing a deg by a deg gives a plain number, which
   times 100% is a position along the bar. No container queries needed. */
.spin__arc i{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--cognac);
  left:calc((var(--deg,0deg) / 180deg) * 100%);transform:translateX(-50%)}
.spin__read{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--white-f);white-space:nowrap;min-width:11ch}

@media (max-width:700px){
  .spin__copy{max-width:none;right:var(--pad)}
}

/* ---------- spec strip ---------- */
.spec{padding:clamp(64px,11vh,140px) var(--pad);max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px)}
.spec div{border-top:1px solid var(--line);padding-top:15px}
.spec b{display:block;font-weight:600;font-size:clamp(1rem,1.7vw,1.25rem);letter-spacing:-.01em}
.spec span{display:block;margin-top:7px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white-f)}
@media (max-width:760px){ .spec{grid-template-columns:1fr 1fr} }

/* ---------- inside ---------- */
.inside{padding:0 var(--pad) clamp(64px,11vh,140px)}
.inside__wide img{width:100%;aspect-ratio:16/9;object-fit:cover}
.inside__pair{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(12px,2vw,26px);
  margin-top:clamp(12px,2vw,26px)}
.inside__pair img{width:100%;height:100%;object-fit:cover}
.inside__pair figure:first-child img{aspect-ratio:16/10}
.inside__pair figure:last-child img{aspect-ratio:4/5}
.inside figcaption{margin-top:11px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white-f)}
@media (max-width:700px){ .inside__pair{grid-template-columns:1fr} }

/* ---------- say ---------- */
.say{padding:clamp(20px,5vh,50px) var(--pad) clamp(70px,12vh,150px);max-width:1180px;margin:0 auto}
.say p{font-weight:600;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(1.7rem,4.6vw,3.4rem);text-transform:uppercase;max-width:18ch}
.say p em{font-style:normal;color:var(--cognac)}
.say small{display:block;margin-top:22px;font-size:1rem;color:var(--white-d);max-width:52ch}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--steel)}
.pano__track{height:220vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,0) 36%,rgba(8,9,11,.88) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(50px,9vh,110px);z-index:2;pointer-events:none}
.pano__copy h2{max-width:15ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:3px;padding:11px 20px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white-d)}
.pano__hint i{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:var(--white);color:var(--black)}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);padding:30px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--white-f);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  /* the turntable becomes an ordinary stack of five photographs */
  .spin__track{height:auto}
  .spin__sticky{position:static;height:auto;display:block}
  .spin__stage{position:static}
  .spin__frame{position:static;opacity:1}
  .spin__frame img{height:auto;aspect-ratio:16/10}
  .spin__light,.spin__dial{display:none}
  .spin__copy{position:static;padding:26px 0 18px;max-width:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--carbon);
  --lf-fg     :var(--white);
  --lf-accent :var(--cognac);
  --lf-line   :var(--line);
  --lf-muted  :var(--white-d);
}
.lead__title{font-weight:600;letter-spacing:-.025em;text-transform:uppercase}
.lead__btn{color:var(--black);font-weight:600}
.lead__field select option{background:var(--carbon);color:var(--white)}