/* ============================================================
   AUTO MATRIX GLOBAL — UI layer

   LAYOUT RULE: the 3D camera always centres the car, so the
   centre of frame is never available for content. Every panel
   lives in a margin — left column, right column, top band or
   bottom band. On phones all panels collapse into the bottom
   band and the camera lifts the car into the upper frame.
   ============================================================ */

:root{
  --studio:#e9e9ec;
  --ink:#1b1d21;
  --ink-soft:#5c6068;
  --night:#05070c;
  --ease:cubic-bezier(.22,1,.36,1);

  --gutter:32px;
  --col:clamp(240px,24vw,330px);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--studio);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---------- canvas ---------- */
#stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;      /* dvh: no jump when mobile browser chrome hides */
  display:block;
  z-index:1;
}

/* ---------- scroll spacer ---------- */
/* Road film is deliberately short now — total page is ~10 screens */
#scroll-space{height:1000vh}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;
  background:var(--studio);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{
  font-size:clamp(11px,1.5vw,18px);
  font-weight:800;letter-spacing:.42em;text-indent:.42em;
  color:var(--ink);text-align:center;padding:0 20px;
}
.loader-bar{width:min(240px,42vw);height:1px;background:rgba(27,29,33,.18);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0%;background:var(--ink);transition:width .3s linear}
.loader-pct{font-size:10px;letter-spacing:.3em;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- fixed UI chrome ---------- */
#ui{position:fixed;inset:0;z-index:12;pointer-events:none}
#ui,#sections,#pricing{--ui-ink:var(--ink)}

.brand-corner{
  position:absolute;top:var(--gutter);left:var(--gutter);
  font-size:10px;font-weight:800;letter-spacing:.34em;
  color:var(--ui-ink);opacity:.55;
  text-decoration:none;pointer-events:auto;
  transition:opacity .3s;
}
.brand-corner:hover{opacity:1}

.chapter-marker{
  position:absolute;bottom:26px;left:var(--gutter);
  font-size:9.5px;letter-spacing:.32em;font-weight:600;
  color:var(--ui-ink);opacity:.5;
}

/* top right UI container */
.ui-top-right{
  position:absolute;top:calc(var(--gutter) - 6px);right:var(--gutter);
  display:flex;align-items:center;gap:16px;
  pointer-events:auto;z-index:20;
}

/* 3D Mode Toggle Switch */
.ui-3d-toggle{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;
  padding:5px 10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(128,128,128,.35);
  border-radius:999px;
  font-family:inherit;
  color:var(--ui-ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  backdrop-filter:blur(8px);
}
.ui-3d-toggle:hover{
  background:rgba(255,255,255,.14);
  border-color:currentColor;
  transform:translateY(-1px);
}
.ui-3d-badge{
  font-size:8px;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(90deg, #7FE7FF, #FF8FB1);
  color:#0B0C0F;
  padding:2px 5px;border-radius:3px;
}
.ui-3d-track{
  width:24px;height:13px;
  background:rgba(128,128,128,.3);
  border-radius:999px;
  position:relative;
  transition:background .3s ease;
}
.ui-3d-track.on{
  background:#4ec3e8;
}
.ui-3d-thumb{
  width:9px;height:9px;
  background:#fff;
  border-radius:50%;
  position:absolute;top:2px;left:2px;
  transition:transform .3s var(--ease);
}
.ui-3d-track.on .ui-3d-thumb{
  transform:translateX(11px);
}
.ui-3d-text{
  font-size:8.5px;letter-spacing:.22em;font-weight:700;
  display:flex;align-items:center;gap:4px;
}
.ui-3d-status{
  font-size:8px;color:#4ec3e8;letter-spacing:.1em;
}

#sound-toggle{
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
  background:none;border:0;padding:6px 4px;
  font-family:inherit;font-size:9px;letter-spacing:.3em;font-weight:700;
  color:var(--ui-ink);opacity:.55;
  transition:opacity .3s;
}
#sound-toggle:hover{opacity:1}
.eq{display:flex;align-items:flex-end;gap:2px;height:11px}
.eq i{width:2px;height:3px;background:currentColor;display:block}
#sound-toggle.on .eq i{animation:eq .9s ease-in-out infinite}
#sound-toggle.on .eq i:nth-child(2){animation-delay:.15s}
#sound-toggle.on .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.35em;font-weight:600;
  color:var(--ui-ink);opacity:.45;
  transition:opacity .6s var(--ease);
}
.scroll-hint.hidden{opacity:0}
.hint-line{width:1px;height:42px;background:rgba(128,128,128,.35);overflow:hidden}
.hint-line i{display:block;width:100%;height:14px;background:currentColor;animation:drop 1.9s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-16px)}100%{transform:translateY(46px)}}

.progress-rail{
  position:absolute;right:var(--gutter);bottom:26px;
  width:1px;height:110px;background:rgba(128,128,128,.28);
}
.progress-rail span{position:absolute;top:0;left:0;width:100%;height:0%;background:currentColor;color:var(--ui-ink)}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */

#sections{position:fixed;inset:0;z-index:9;pointer-events:none;color:var(--ui-ink)}

.sec{
  position:absolute;
  opacity:0;
  width:var(--col);
  transition:opacity .45s var(--ease);
  will-change:opacity;
}

.pos-left  {left:var(--gutter);  top:50%;transform:translateY(-50%)}
.pos-right {right:var(--gutter); top:50%;transform:translateY(-50%);text-align:right}
.pos-top   {left:50%;top:13vh;transform:translateX(-50%);width:min(760px,86vw);text-align:center}
.pos-center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,86vw);text-align:center}

.sec-kicker{
  font-size:9.5px;letter-spacing:.34em;font-weight:700;
  opacity:.55;margin-bottom:14px;
}
.sec-title{
  font-size:clamp(20px,2.3vw,32px);
  font-weight:300;letter-spacing:-.015em;line-height:1.12;
}
.sec-body{
  margin-top:14px;
  font-size:13.5px;line-height:1.65;opacity:.62;letter-spacing:.005em;
}
.sec-huge{
  font-size:clamp(40px,9vw,132px);
  font-weight:800;letter-spacing:.07em;line-height:1;
}

.sec-specs{list-style:none;display:flex;flex-direction:column;gap:15px}
.sec-specs li{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border-left:1px solid currentColor;padding-left:13px;
}
.pos-right .sec-specs li{border-left:0;border-right:1px solid currentColor;padding-left:0;padding-right:13px}
.sec-specs b{display:block;font-size:8.5px;letter-spacing:.28em;opacity:.5;margin-bottom:5px;font-weight:600}
.sec-specs span{font-size:12.5px;letter-spacing:.04em}

.sec-stats{display:flex;gap:32px}
.sec-stats b{display:block;font-size:clamp(26px,3.4vw,44px);font-weight:200;letter-spacing:-.02em;line-height:1}
.sec-stats span{display:block;margin-top:8px;font-size:8.5px;letter-spacing:.26em;opacity:.5;font-weight:600}

.final-line{font-size:clamp(18px,2.2vw,30px);font-weight:300;margin-bottom:26px}
.cta{
  pointer-events:auto;
  display:inline-block;
  padding:15px 34px;
  border:1px solid currentColor;
  color:inherit;text-decoration:none;
  font-size:10px;letter-spacing:.32em;font-weight:700;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.cta:hover{background:currentColor;color:var(--night)}
.cta-alt{
  background:rgba(255,255,255,0.06);
  border-color:rgba(128,128,128,0.4);
}
.cta-alt:hover{
  background:rgba(255,255,255,0.15);
  color:inherit;
}

/* ============================================================
   10 COVERAGE — pricing panel
   ============================================================ */

#pricing{
  position:fixed;
  left:50%;bottom:6vh;
  transform:translateX(-50%);
  z-index:11;
  opacity:0;
  pointer-events:none;
  width:min(860px,90vw);
  color:#f2f3f5;
  transition:opacity .4s var(--ease);
}
.pricing-head{text-align:center;margin-bottom:18px}
.pricing-head h3{font-size:clamp(16px,2vw,23px);font-weight:300;letter-spacing:-.01em;margin-top:8px}
.plan-parts{
  font-size:10.5px;letter-spacing:.14em;opacity:.5;margin-top:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.plan{
  pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;
  padding:17px 15px;text-align:left;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  color:inherit;font-family:inherit;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.plan:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.plan.active{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.plan-name{font-size:9.5px;letter-spacing:.3em;font-weight:700;opacity:.7}
.plan-price{font-size:clamp(16px,2.1vw,22px);font-weight:300;letter-spacing:-.01em}
.plan-desc{font-size:10.5px;line-height:1.5;opacity:.5}

.noscript{position:fixed;inset:0;display:grid;place-items:center;z-index:200;background:var(--studio)}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1024px){
  :root{--gutter:22px;--col:min(300px,38vw)}
  .sec-body{font-size:12.5px}
}

/* ============================================================
   PHONE — every panel moves to the bottom band.
   The camera compensates by lifting the car into the upper
   frame (see the portrait fit in updateCamera), so text and
   model never share the same pixels.
   ============================================================ */

@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  :root{--gutter:18px}

  #scroll-space{height:900vh}

  .brand-corner{font-size:8.5px;letter-spacing:.28em}
  .chapter-marker{font-size:8.5px;bottom:16px;letter-spacing:.26em}
  .progress-rail{right:14px;bottom:16px;height:64px}
  .ui-top-right{top:12px;right:14px;gap:8px}
  .ui-3d-toggle{padding:3px 7px;font-size:7.5px}
  .ui-3d-text{font-size:7.5px}
  #sound-toggle{font-size:8.5px;letter-spacing:.24em;padding:4px 2px}
  .scroll-hint{bottom:56px;font-size:8px}
  .hint-line{height:30px}

  /* all four desktop positions collapse into one bottom band */
  .sec,
  .pos-left,.pos-right,.pos-top,.pos-center{
    left:0;right:0;top:auto;
    bottom:0;
    transform:none;
    width:100%;
    text-align:left;
    padding:26px var(--gutter) calc(34px + env(safe-area-inset-bottom));
    /* scrim keeps type legible over whatever the render puts behind it */
    background:linear-gradient(to top,
      rgba(8,9,12,.90) 0%,
      rgba(8,9,12,.72) 45%,
      rgba(8,9,12,0)  100%);
    color:#f4f5f7;
  }

  /* the scrim is dark, so section text is always light on mobile
     regardless of what the 3D behind it is doing */
  #sections{color:#f4f5f7 !important}

  .pos-center{text-align:center}

  .sec-kicker{font-size:8.5px;letter-spacing:.28em;margin-bottom:9px;opacity:.6}
  .sec-title{font-size:clamp(19px,5.6vw,26px)}
  .sec-body{font-size:13px;line-height:1.55;margin-top:9px;opacity:.72;max-width:34em}
  .sec-huge{font-size:clamp(38px,13vw,62px);letter-spacing:.05em}

  .sec-specs{gap:10px}
  .sec-specs li{padding-left:11px}
  .pos-right .sec-specs li{border-left:1px solid currentColor;border-right:0;padding-left:11px;padding-right:0}
  .sec-specs b{font-size:8px;margin-bottom:3px}
  .sec-specs span{font-size:12px}

  .sec-stats{gap:26px}
  .sec-stats b{font-size:clamp(24px,8vw,34px)}

  .final-line{font-size:clamp(17px,5vw,22px);margin-bottom:20px}
  .cta{padding:13px 26px;font-size:9.5px;letter-spacing:.26em}

  /* pricing: full-width band, cards become compact rows */
  #pricing{
    left:0;right:0;bottom:0;
    transform:none;
    width:100%;
    padding:22px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,
      rgba(8,9,12,.92) 0%,
      rgba(8,9,12,.74) 50%,
      rgba(8,9,12,0)  100%);
  }
  .pricing-head{text-align:left;margin-bottom:14px}
  .pricing-head h3{font-size:17px;margin-top:6px}
  .plan-parts{font-size:10px}

  .plans{grid-template-columns:1fr;gap:7px}
  .plan{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .plan-name{font-size:9px;letter-spacing:.22em;flex:0 0 auto;min-width:78px}
  .plan-price{font-size:16px;margin-left:auto;order:3}
  .plan-desc{display:none}
}

/* very short viewports (landscape phones) — tighten the bottom band */
@media (max-height:520px){
  .sec{padding-top:14px;padding-bottom:16px}
  .sec-body{display:none}
  .sec-title{font-size:17px}
  #pricing{padding-top:12px}
  .pricing-head{margin-bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .hint-line i{animation:none}
  #sound-toggle.on .eq i{animation:none}
}