/* =====================================================================
   Junk Jaunt — page-specific styles (Silicon Prairie theme + a small
   vintage-blue accent, sparingly used, as a nod to the event's real
   truck-and-highway branding without departing from the site palette)
   ===================================================================== */
:root{
  --jj-blue: #3B5B72;
  --jj-blue-2: #2E4759;
}

/* ---- Hero ---- */
.jj-hero{ position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; }
/* scaled up so the cursor-parallax can move it without exposing edges */
.jj-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1); will-change:transform; }
.jj-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(254,245,231,.20) 0%, rgba(254,245,231,.08) 35%, rgba(254,245,231,.60) 85%, var(--cream) 100%);
}
.jj-hero__content{ position:relative; z-index:1; padding:clamp(7rem,15vh,10rem) var(--pad) clamp(3rem,6vh,4rem); max-width:var(--maxw); margin:0 auto; width:100%; will-change:transform; }
.jj-hero__title{ font-family:var(--serif); font-weight:500; color:var(--forest); font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.02; max-width:14ch; text-shadow:0 2px 30px rgba(254,245,231,.6); }
.jj-hero__lede{ margin-top:1.4rem; max-width:52ch; color:var(--ink); font-size:clamp(1.05rem,1.4vw,1.25rem); text-shadow:0 1px 18px rgba(254,245,231,.55); }
.jj-hero__stats{ display:flex; gap:clamp(2rem,5vw,4rem); margin-top:clamp(2.5rem,5vw,3.5rem); flex-wrap:wrap; }
.jj-stat{ display:flex; flex-direction:column; }
.jj-stat__num{ font-family:var(--serif); font-weight:600; color:var(--red); font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; }
.jj-stat__label{ margin-top:.3rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- Intro ---- */
.jj-intro{ background:var(--cream); }
.jj-intro__text{ max-width:var(--maxw); margin:0 auto; }
.jj-intro__text .display{ max-width:14ch; }
.jj-intro__text p{ margin-top:1.4rem; max-width:64ch; }

/* ---- 3D route centerpiece ---- */
.jj-route{ position:relative; background:var(--forest-deep); }
.jj-route__pin{ position:relative; height:100vh; overflow:hidden; display:grid; place-items:center; }
.jj-route__canvas{ position:absolute; inset:0; width:100%; height:100%; }

.jj-route__hint{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:2;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
  opacity:.85; transition:opacity .5s var(--ease); pointer-events:none;
  display:flex; align-items:center; gap:.6rem;
}
.jj-route__hint::after{ content:''; width:34px; height:1px; background:var(--gold); }
.jj-route.is-scrolling .jj-route__hint{ opacity:0; }

.jj-route__progress{
  position:absolute; bottom:0; left:0; width:100%; height:3px; z-index:2;
  background:rgba(254,245,231,.15);
}
.jj-route__progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--red), var(--gold)); transition:width .05s linear; }

.jj-route__fallback{ display:none; position:relative; z-index:1; padding:clamp(3rem,8vh,5rem) var(--pad); max-width:640px; text-align:center; color:var(--cream); }
.jj-route__fallback h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.5rem; }
.jj-route__list{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.jj-route__list li{
  background:rgba(254,245,231,.08); border:1px solid rgba(254,245,231,.18); border-radius:100px;
  padding:.5rem 1.1rem; font-size:.92rem; color:rgba(254,245,231,.9);
}
.jj-route--fallback .jj-route__canvas,
.jj-route--fallback .jj-route__hint,
.jj-route--fallback .jj-route__progress{ display:none; }
.jj-route--fallback .jj-route__pin{ height:auto; min-height:0; padding:0; }
.jj-route--fallback .jj-route__fallback{ display:block; }

/* ---- Floating town markers (projected from 3D each frame) ---- */
.jj-markers{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.jj-marker{
  position:absolute; top:0; left:0; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  background:none; border:none; cursor:pointer; padding:.4rem;
  transition:opacity .25s ease;
  will-change:transform;
}
.jj-marker__name{
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.06em;
  color:var(--forest); background:var(--cream); border:1px solid var(--tan-line);
  border-radius:100px; padding:.32rem .8rem; white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.jj-marker:hover .jj-marker__name{ background:var(--forest); color:var(--cream); transform:translateY(-2px); }
.jj-marker__dot{
  order:2; width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 3px rgba(254,245,231,.55);
}

/* ---- Mile counter HUD ---- */
.jj-route__mile{
  position:absolute; top:5.4rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--serif); font-weight:600; font-size:clamp(.9rem,1.4vw,1.1rem);
  letter-spacing:.24em; color:var(--cream); pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

/* ---- Town info panel (populated by JS on marker click) ---- */
.jj-town-panel{
  position:absolute; z-index:3; right:clamp(1rem,4vw,3rem); bottom:clamp(5rem,10vh,7rem);
  width:min(320px, calc(100vw - 2rem));
  background:var(--sand); border:1px solid var(--tan-line); border-radius:8px;
  padding:1.6rem 1.8rem; box-shadow:0 30px 60px -25px rgba(0,0,0,.5);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.jj-town-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.jj-town-panel__close{
  position:absolute; top:.6rem; right:.8rem; background:none; border:none; font-size:1.3rem;
  color:var(--ink-soft); cursor:pointer; line-height:1;
}
.jj-town-panel__eyebrow{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:.5rem; }
.jj-town-panel__name{ font-family:var(--serif); font-weight:500; color:var(--forest); font-size:1.5rem; }

/* ---- Ask Charlotte CTA ---- */
.jj-charlotte{ background:var(--forest-deep); color:var(--cream); text-align:center; padding:clamp(5rem,14vh,9rem) var(--pad); }
.jj-charlotte__inner{ max-width:600px; margin:0 auto; }
.jj-charlotte__title{ font-family:var(--serif); font-weight:500; color:var(--cream); font-size:clamp(2.2rem,6vw,3.6rem); margin:.8rem 0 1.2rem; }
.jj-charlotte p{ color:rgba(254,245,231,.85); margin:0 auto 1.8rem; }
.jj-charlotte__num{ display:inline-block; font-family:var(--serif); font-weight:600; color:var(--gold); font-size:clamp(2.6rem,7vw,4.4rem); line-height:1; transition:color .3s var(--ease); }
.jj-charlotte__num:hover{ color:#F2D38C; }
/* video card below the phone number — vintage route-map poster, click to play */
.jj-video__prompt{ margin:clamp(3rem,6vw,4rem) auto 0; color:var(--gold); font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.6vw,1.3rem); }
.jj-charlotte__video{ max-width:300px; margin-top:1.2rem; box-shadow:0 24px 60px -24px rgba(0,0,0,.55); cursor:pointer; }

/* scrim so the light map poster reads as a video thumbnail (fades on play) */
.jj-charlotte__video::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(30,44,25,.28) 0%, rgba(30,44,25,0) 34%, rgba(30,44,25,.62) 100%);
  transition:opacity .5s var(--ease);
}
.jj-charlotte__video.is-playing::after{ opacity:0; }

/* pulsing ring draws the eye to the play button */
.jj-charlotte__video .clp-video__play{ z-index:3; }
.jj-charlotte__video .clp-video__play::before{
  content:''; position:absolute; inset:-12px; border-radius:50%; border:2px solid var(--cream);
  opacity:.7; animation:jjPlayPulse 2.2s var(--ease) infinite; pointer-events:none;
}
.jj-charlotte__video.is-playing .clp-video__play::before{ display:none; }
@keyframes jjPlayPulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ opacity:0; } 100%{ transform:scale(1.65); opacity:0; } }

/* explicit label at the bottom of the card */
.jj-video__label{
  position:absolute; left:0; right:0; bottom:1.1rem; z-index:3; pointer-events:none; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--cream);
  text-shadow:0 2px 12px rgba(0,0,0,.7); transition:opacity .4s var(--ease);
}
.jj-video__label b{ font-family:var(--serif); font-weight:500; font-size:1rem; line-height:1.2; padding:0 .8rem; }
.jj-video__label span{ font-size:.72rem; font-weight:700; letter-spacing:.14em; background:var(--red); color:var(--cream); padding:.2rem .6rem; border-radius:100px; }
.jj-charlotte__video.is-playing .jj-video__label{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .jj-charlotte__video .clp-video__play::before{ animation:none; } }

@media (max-width:760px){
  .jj-route__pin{ height:100svh; }
}