/* =========================================================================
   Bourbon Saturdays — "EXPERIENCE" layer: motion, depth & polish.
   Loads LAST. Progressive enhancement only — every effect degrades to the
   static design when JS is off or reduced-motion is requested.
   ========================================================================= */

/* ----- Scroll reveal ----------------------------------------------------- */
/* JS adds .tt-reveal only to below-the-fold elements, then .is-in when they
   enter the viewport. No JS = no class = fully visible. */
.tt-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.tt-reveal.is-in{opacity:1;transform:none}

/* ----- Hero entrance ----------------------------------------------------- */
@keyframes tt-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.tt-hero.is-ready .tt-hero__eyebrow {animation:tt-rise .60s .04s both}
.tt-hero.is-ready .tt-hero__title   {animation:tt-rise .75s .14s both}
.tt-hero.is-ready .tt-hero__text    {animation:tt-rise .70s .26s both}
.tt-hero.is-ready .tt-hero__controls{animation:tt-rise .70s .36s both}
.tt-hero.is-ready .tt-hero__popular {animation:tt-rise .70s .46s both}
.tt-hero.is-ready .tt-kickoff       {animation:tt-rise .80s .52s both}

/* Slow cinematic drift on the hero photo (subtle) */
.tt-hero.is-ready{animation:tt-herozoom 18s ease-out both}
@keyframes tt-herozoom{from{background-size:112% auto}to{background-size:100% auto}}

/* ----- Scroll cue (desktop only; injected by JS) ------------------------- */
.tt-scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;display:none}
@media(min-width:900px){.tt-scrollcue{display:block}}
.tt-scrollcue span{display:block;width:15px;height:15px;
  border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg);animation:tt-bounce 1.8s infinite}
@keyframes tt-bounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.45}
  50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}

/* ----- Button shine sweep ------------------------------------------------ */
.tt-btn--gold{position:relative;overflow:hidden}
.tt-btn--gold::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.tt-btn--gold:hover::after{left:150%}

/* ----- Depth on hover: cards lift with a soft red glow ------------------- */
.tt-fire__card,.tt-take,.tt-dest,.tt-lead__main,.tt-side,.tt-place{
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease}
.tt-fire__card:hover,.tt-take:hover{box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 0 1px rgba(225,29,46,.25)}
.tt-lead__main:hover{box-shadow:0 26px 60px rgba(0,0,0,.6)}

/* =========================================================================
   BY THE NUMBERS  — animated stat band
   ========================================================================= */
.tt-stats{background:linear-gradient(180deg,#0a0a0b,#101011);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  padding:clamp(2.2rem,5vw,3.4rem) 0;position:relative;overflow:hidden}
.tt-stats::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 42px,rgba(255,255,255,.014) 42px 44px)}
.tt-stats__kick{position:relative;text-align:center;margin-bottom:1.6rem;
  font-family:var(--font-cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.82rem;color:var(--hot)}
.tt-stats__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.tt-stat{padding:.8rem 1rem;text-align:center;position:relative}
.tt-stat + .tt-stat{border-left:1px solid var(--line-dark)}
.tt-stat__num{font-family:var(--font-black);font-weight:400;line-height:1;color:#fff;
  font-size:clamp(2.7rem,5.4vw,4.2rem);letter-spacing:.01em}
.tt-stat__num .u{color:var(--hot)}
.tt-stat__label{font-family:var(--font-cond);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.76rem;color:var(--silver-dim);margin-top:.55rem}
@media(max-width:720px){
  .tt-stats__grid{grid-template-columns:repeat(2,1fr);gap:1rem 0}
  .tt-stat:nth-child(odd){border-left:none}
  .tt-stat:nth-child(n+3){border-top:1px solid var(--line-dark);padding-top:1.4rem}
}

/* ----- Reduced motion: hard stop on everything --------------------------- */
@media (prefers-reduced-motion:reduce){
  .tt-reveal,.tt-reveal.is-in{opacity:1 !important;transform:none !important;transition:none !important}
  .tt-hero.is-ready,.tt-hero.is-ready *{animation:none !important}
  .tt-scrollcue{display:none !important}
  .tt-btn--gold::after{display:none}
}