/* =============================================================
   CRISPO — Coming Soon  (cinematic scroll rework)
   Brand DNA: navy #001830 · coral #F0531C · yellow #F5A800
   Home starts at NIGHT (dark) and breaks into DAY (light) at Locations.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&display=swap');

/* ----------  Tokens  ---------- */
:root{
  --navy:#001830; --navy-2:#0a2440;
  --coral:#f0531c; --coral-2:#ff6a35;
  --yellow:#f5a800; --yellow-2:#ffc23d;
  --cream:#fff4e2;

  --font-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);

  --pad:clamp(1.1rem,4vw,3.4rem);
  --maxw:1380px;
}

/* LIGHT = DAY */
:root,[data-theme="light"]{
  --bg:#fef1dc; --bg-grad-a:#fff7ec; --bg-grad-b:#ffe2b8; --bg-grad-c:#ffd08f;
  --ink:#0a1b30; --ink-soft:rgba(10,27,48,.62); --ink-faint:rgba(10,27,48,.30);
  --accent:#f0531c; --accent-ink:#fff;
  --surface:rgba(255,255,255,.55); --surface-line:rgba(10,27,48,.12);
  --glow:rgba(245,168,0,0); --glow-strong:rgba(245,168,0,0);
  --truck-shadow:rgba(120,70,0,.30); --sky-dots:rgba(10,27,48,.05);
  color-scheme:light;
}
/* DARK = NIGHT */
[data-theme="dark"]{
  --bg:#060d1a; --bg-grad-a:#0c1830; --bg-grad-b:#081123; --bg-grad-c:#050b16;
  --ink:#fdf2e3; --ink-soft:rgba(253,242,227,.66); --ink-faint:rgba(253,242,227,.32);
  --accent:#ff6a35; --accent-ink:#1a0a02;
  --surface:rgba(255,255,255,.06); --surface-line:rgba(255,255,255,.12);
  --glow:rgba(245,168,0,.18); --glow-strong:rgba(255,170,40,.42);
  --truck-shadow:rgba(0,0,0,.6); --sky-dots:rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ----------  Reset  ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background 1s var(--ease-soft),color .8s var(--ease-soft);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--coral);color:#fff}

/* ambient sky */
.sky{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-grad-a), transparent 60%),
    radial-gradient(140% 120% at 85% 110%, var(--bg-grad-c), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b) 55%, var(--bg-grad-c));
  transition:background 1s var(--ease-soft);
}
.sky::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--sky-dots) 1.2px, transparent 1.3px);
  background-size:26px 26px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 75%);
  opacity:.8;transition:opacity 1s var(--ease-soft);
}
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAVBAR — logo only, larger
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:flex-start;
  padding:clamp(.7rem,2.2vw,1.4rem) var(--pad);pointer-events:none;
}
.nav>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center}
.brand img{
  height:clamp(50px,6.4vw,92px);width:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
  transition:transform .5s var(--ease-out),filter .8s var(--ease-soft);
}
.brand:hover img{transform:rotate(-4deg) scale(1.05)}
/* two-tone logo follows the theme: cream wordmark at night, navy by day */
.brand .logo-dark{display:none}
[data-theme="dark"] .brand .logo-light{display:none}
[data-theme="dark"] .brand .logo-dark{display:block;filter:drop-shadow(0 0 20px rgba(255,170,40,.3))}

/* back button (locations page) */
.back-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:100px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.82rem,1vw,.95rem);
  color:var(--ink);background:var(--surface);
  border:1px solid var(--surface-line);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.back-btn svg{width:1.05em;height:1.05em}
.back-btn:hover{transform:translateX(-3px);background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px -10px var(--accent)}

/* pill button */
.btn-pill{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:100px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.85rem,1.1vw,1rem);
  letter-spacing:.01em;color:var(--accent-ink);background:var(--accent);
  box-shadow:0 10px 26px -8px var(--accent),inset 0 0 0 1px rgba(255,255,255,.18);
  overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.btn-pill svg{width:1.05em;height:1.05em}
.btn-pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;animation:ping 1.8s var(--ease-out) infinite}
.btn-pill:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px -8px var(--accent),inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease-out)}
.btn-pill:hover::after{transform:translateX(120%)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}

/* progress bar */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:45;background:transparent}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--coral));box-shadow:0 0 12px var(--coral)}

/* ============================================================
   PINNED STAGE
   ============================================================ */
.stage{position:relative;height:100vh;width:100%;overflow:hidden}
.stage__inner{position:absolute;inset:0}

/* ---- scroll hint (V chevron) ---- */
.scrollhint{
  position:absolute;left:50%;bottom:clamp(2rem,7vh,4.5rem);transform:translateX(-50%);
  z-index:8;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none;
}
.scrollhint .chev{width:22px;height:22px;border-right:2.5px solid var(--ink-soft);border-bottom:2.5px solid var(--ink-soft);transform:rotate(45deg);animation:bob 1.6s var(--ease-out) infinite}
@keyframes bob{0%{transform:rotate(45deg) translate(-3px,-3px);opacity:.3}50%{opacity:1}100%{transform:rotate(45deg) translate(3px,3px);opacity:.3}}

/* ---- animated CRISPO wordmark ---- */
.wm-layer{position:absolute;inset:0;display:grid;place-items:center;z-index:7;pointer-events:none}
.wordmark{
  display:flex;align-items:flex-start;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(3.6rem,17vw,13rem);color:var(--ink);
  will-change:transform,opacity;text-shadow:0 14px 50px rgba(0,0,0,.35);
}
.wordmark span{display:inline-block;will-change:transform,opacity}
.wordmark .dot{color:var(--coral)}

/* ---- truck rig (right side, static) ---- */
.rig{
  position:absolute;z-index:4;margin:0;
  width:min(58vw,640px);aspect-ratio:894/638;
  right:clamp(-6%,-2vw,0%);
  bottom:clamp(11vh,15vh,19vh);
  will-change:transform,opacity;
}
.rig .truck{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 30px var(--truck-shadow));
  will-change:opacity;z-index:2;
}
.rig .truck--off,.rig .truck--on{opacity:0}
.truck-glow{
  position:absolute;left:4%;top:30%;width:60%;height:42%;
  background:radial-gradient(closest-side,var(--glow-strong),transparent 72%);
  filter:blur(16px);opacity:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
}
.truck-floor{
  position:absolute;left:50%;bottom:7%;width:60%;height:5.5%;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--truck-shadow),transparent 70%);
  filter:blur(9px);z-index:1;opacity:.85;
}
.halo{
  position:absolute;left:50%;top:46%;width:92%;height:84%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--glow),transparent 70%);
  z-index:0;pointer-events:none;transition:opacity 1s var(--ease-soft);
}

/* warm pool of light that lifts "Coming Soon" out of the dark (no directional beam) */
.lightpool{
  position:absolute;z-index:2;opacity:0;pointer-events:none;
  left:clamp(-6rem,-2vw,1rem);bottom:clamp(8vh,13vh,18vh);
  width:min(70vw,760px);height:52vh;
  background:radial-gradient(closest-side,
    rgba(255,212,144,.50),
    rgba(255,194,114,.26) 42%,
    rgba(255,182,98,.09) 66%,
    transparent 80%);
  filter:blur(46px);mix-blend-mode:screen;
}

/* ---- Coming Soon (revealed by the light) ---- */
.comingsoon{
  position:absolute;z-index:5;opacity:0;pointer-events:none;
  left:clamp(1.3rem,7vw,6.5rem);bottom:clamp(13vh,18vh,24vh);text-align:left;
}
.comingsoon .cs-l1,.comingsoon .cs-l2{
  display:block;font-family:var(--font-display);font-weight:800;
  line-height:.84;letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(2.7rem,9.5vw,7.5rem);
  text-shadow:0 0 48px rgba(255,206,132,.6),0 0 18px rgba(255,188,100,.45),0 2px 2px rgba(0,0,0,.25);
}
.comingsoon .cs-l2{color:var(--coral-2)}
.comingsoon .cs-tag{
  display:block;margin-top:1.1rem;max-width:24ch;
  font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:.01em;
  font-size:clamp(.92rem,1.5vw,1.18rem);color:var(--ink-soft);text-shadow:none;
}

/* ============================================================
   HOMEPAGE — simplified Locations (Find Us) + footer (light)
   ============================================================ */
.findus{
  position:relative;z-index:5;min-height:92vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(4rem,12vh,9rem) var(--pad);
}
.findus .eyebrow{
  font-family:var(--font-display);font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  font-size:clamp(.72rem,1.4vw,.92rem);color:var(--accent);
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
}
.findus .eyebrow::before,.findus .eyebrow::after{content:"";width:clamp(18px,4vw,46px);height:2px;background:currentColor;opacity:.5;border-radius:2px}
.findus h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:.94;
  font-size:clamp(2.8rem,9vw,7rem);text-wrap:balance;
}
.findus h2 em{font-style:normal;color:var(--accent)}
.findus p{margin-top:1.2rem;max-width:40ch;color:var(--ink-soft);font-weight:500;font-size:clamp(1rem,1.6vw,1.25rem)}
.findus .btn-pill{margin-top:2.2rem}
.findus .map-dots{margin-top:1.6rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;color:var(--ink-faint);font-weight:600;font-size:.9rem;letter-spacing:.02em}

.foot{position:relative;z-index:5;text-align:center;padding:clamp(2rem,5vh,3rem) var(--pad) clamp(2rem,5vh,3rem);border-top:1px solid var(--surface-line)}
.foot .rights{color:var(--ink-faint);font-size:.82rem;letter-spacing:.04em}

/* reveal helper */
.reveal{opacity:0;transform:translateY(30px)}

/* ============================================================
   LOCATIONS PAGE  (light, no truck)
   ============================================================ */
.loc-supertitle{
  position:absolute;top:clamp(6rem,12vh,9rem);left:0;right:0;z-index:5;text-align:center;
  font-family:var(--font-display);font-weight:700;letter-spacing:.36em;text-transform:uppercase;
  font-size:clamp(.74rem,1.6vw,1rem);color:var(--accent);pointer-events:none;
}
.loc-supertitle .small{display:block;color:var(--ink-soft);letter-spacing:.2em;font-weight:500;font-size:.8em;margin-top:.7rem}

.city-wrap{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.city{position:absolute;text-align:center;opacity:0;display:flex;flex-direction:column;align-items:center}
.city .name{
  font-family:var(--font-display);font-weight:800;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(3.2rem,15vw,12rem);text-transform:uppercase;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 50%,var(--accent)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.city .tagline{margin-top:1rem;font-size:clamp(1.05rem,1.8vw,1.4rem);color:var(--ink-soft);font-weight:600;max-width:30ch}

.rail{position:fixed;right:clamp(1rem,3vw,2.4rem);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.85rem;pointer-events:none}
.rail li{display:flex;align-items:center;gap:.7rem;justify-content:flex-end;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink-faint);transition:color .4s var(--ease-out),transform .4s var(--ease-out)}
.rail li .tick{width:18px;height:2px;border-radius:2px;background:currentColor;transition:width .4s var(--ease-out)}
.rail li.active{color:var(--accent);transform:translateX(-4px)}
.rail li.active .tick{width:40px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media (max-width:720px){.rail{display:none}}

.pin{position:absolute;left:50%;top:26%;z-index:6;transform:translate(-50%,-100%);color:var(--accent);filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));opacity:0}
.pin svg{width:clamp(34px,5vw,52px);height:auto}

.loc-outro{position:absolute;inset:0;z-index:7;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;padding:0 var(--pad)}
.loc-outro h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,8vw,6rem);line-height:.95;letter-spacing:-.02em}
.loc-outro h2 em{font-style:normal;color:var(--accent)}
.loc-outro p{margin-top:1rem;color:var(--ink-soft);font-size:clamp(1rem,1.6vw,1.25rem);font-weight:500}

.loc-foot{position:relative;z-index:5;text-align:center;padding:clamp(3rem,9vh,7rem) var(--pad) clamp(2rem,5vh,3rem)}
.loc-foot .big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,5vw,3.2rem);letter-spacing:-.02em;line-height:1.02}
.loc-foot .big em{font-style:normal;color:var(--accent)}
.loc-foot .meta{margin-top:1.3rem;color:var(--ink-soft);font-size:.95rem}
.loc-foot .meta b{color:var(--ink)}
.loc-foot .rights{margin-top:1.6rem;color:var(--ink-faint);font-size:.82rem;letter-spacing:.04em}

/* ----------  reduced motion  ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.3s!important}
}

/* ----------  small screens  ---------- */
@media (max-width:600px){
  .rig{width:84vw;right:-10%;bottom:14vh}
  .comingsoon{bottom:15vh}
}