/* rv.css — style 18, "the split".

   The screen splits down the middle and the two halves scroll in opposite
   directions. Nothing else in this portfolio moves two ways at once. It fits a
   toy hauler, where the garage is also a bedroom and the ramp is also a patio,
   so nothing in the vehicle has one job.

   Palette off the photographs: warm grey cabinetry, pale leather, and the
   violet LED cove lighting that runs right through the vehicle. */

:root{
  --night  :#0D0D11;
  --slate  :#16171C;
  --steel  :#22242B;
  --bone   :#EFEDE9;
  --bone-d :rgba(239,237,233,.64);
  --bone-f :rgba(239,237,233,.34);
  --violet :#8B62D6;               /* the LED cove */
  --tan    :#C8B79C;               /* the leather */
  --line   :rgba(239,237,233,.14);
  --pad    :clamp(20px,4.4vw,84px);
  --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(--night);color:var(--bone);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.03rem);line-height:1.68;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:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-f)}
.display{font-weight:600;line-height:1;letter-spacing:-.03em;
  font-size:clamp(2.4rem,7vw,5.8rem)}
.display em{font-style:normal;color:var(--violet)}
.h2{font-weight:600;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.6rem)}

/* ---------- 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(13,13,17,.88),rgba(13,13,17,0))}
.nav__brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase}
.nav__brand span{color:var(--violet)}
.nav__cta{font-family:var(--mono);font-size:.6rem;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(--bone);color:var(--night)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,17,.56) 0%,rgba(13,13,17,.06) 40%,rgba(13,13,17,.92) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(48px,9vh,112px);z-index:2}
.hero h1{margin:14px 0 16px}
.hero__sub{color:var(--bone-d);max-width:44ch}

/* ---------- lead in ---------- */
.intro{padding:clamp(70px,13vh,160px) var(--pad);max-width:1100px;margin:0 auto}
.intro p{font-weight:600;line-height:1.1;letter-spacing:-.025em;
  font-size:clamp(1.5rem,3.8vw,2.9rem);max-width:20ch}
.intro p em{font-style:normal;color:var(--violet)}
.intro small{display:block;margin-top:24px;font-size:1rem;color:var(--bone-d);max-width:54ch}

/* ---------- THE SPLIT ---------- */
.split{position:relative;background:var(--slate)}
.split__track{height:420vh}
.split__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,20px);
  padding:0 clamp(8px,1.4vw,20px)}
.split__col{will-change:transform}
.split__col figure{position:relative;margin-bottom:clamp(8px,1.4vw,20px)}
.split__col img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__col figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(180deg,rgba(13,13,17,0),rgba(13,13,17,.86));
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase}
/* the right hand column starts already scrolled, so the two never line up */
.split__col--down{padding-top:0}

.split__label{position:absolute;left:50%;top:calc(var(--pad) + 42px);transform:translateX(-50%);
  z-index:4;text-align:center;pointer-events:none;
  background:rgba(13,13,17,.72);border:1px solid var(--line);border-radius:100px;
  padding:9px 20px;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-d)}

@media (max-width:700px){
  /* two opposing columns on a phone is unreadable, so it becomes one ordinary
     column and the effect is simply switched off */
  .split__track{height:auto}
  .split__sticky{position:static;height:auto;grid-template-columns:1fr;
    padding:clamp(40px,7vh,80px) var(--pad)}
  .split__col{transform:none !important}
  .split__label{position:static;transform:none;display:inline-block;margin-bottom:22px}
}

/* ---------- what it turns into ---------- */
.turns{padding:clamp(70px,12vh,160px) var(--pad);max-width:1180px;margin:0 auto}
.turns__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);
  margin-top:clamp(22px,4vh,44px)}
.turns__grid div{border-top:1px solid var(--line);padding-top:15px}
.turns__grid b{display:block;font-weight:600;font-size:clamp(1rem,1.7vw,1.28rem);
  letter-spacing:-.01em}
.turns__grid span{display:block;margin-top:7px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-f)}
@media (max-width:700px){ .turns__grid{grid-template-columns:1fr} }

/* ---------- say ---------- */
.say{padding:clamp(10px,4vh,44px) var(--pad) clamp(70px,12vh,160px);max-width:1180px;margin:0 auto}
.say p{font-weight:600;line-height:1.08;letter-spacing:-.028em;
  font-size:clamp(1.6rem,4.4vw,3.2rem);max-width:19ch}
.say p em{font-style:normal;color:var(--tan)}
.say small{display:block;margin-top:22px;font-size:1rem;color:var(--bone-d);max-width:54ch}

/* ---------- 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(13,13,17,.6) 0%,rgba(13,13,17,0) 36%,rgba(13,13,17,.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:16ch;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:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-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(--bone);color:var(--night)}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(16px);
  transition:opacity .85s var(--ease),transform .85s 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(--bone-f);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .split__track{height:auto}
  .split__sticky{position:static;height:auto;grid-template-columns:1fr}
  .split__col{transform:none !important}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--slate);
  --lf-fg     :var(--bone);
  --lf-accent :var(--violet);
  --lf-line   :var(--line);
  --lf-muted  :var(--bone-d);
}
.lead__title{font-weight:600;letter-spacing:-.02em}
.lead__btn{color:var(--night);font-weight:600}
.lead__field select option{background:var(--slate);color:var(--bone)}