/* =========================================================================
   Bourbon Saturdays — MOTION. The broadcast choreography layer (v3.1).
   Ported from the approved live showpiece: intro stinger, staggered hero
   reveal with the drawn red slab, Ken Burns hero drift, counter-scrolling
   town marquee, hover zooms, parallax road trip.

   Loads after prime.css. Every animation is gated:
   - html.tt-sting  → first front-page view this session (stinger plays,
     hero choreography runs on pure-CSS timers synced to the stinger).
   - Reduced motion → everything static, nothing hidden.
   ========================================================================= */

/* =========================================================================
   1. INTRO STINGER — mark slams in, red slab wipes, page reveals
   ========================================================================= */
.tt-stinger{display:none}

.tt-sting .tt-stinger{
  display:grid;place-items:center;position:fixed;inset:0;z-index:99999;
  background:var(--pr-ink,#0c0b0e);
  animation:ttStingOut .55s cubic-bezier(.77,0,.18,1) 1.55s forwards;
}
.tt-sting .tt-stinger__mark{
  font-family:var(--font-cond,"Barlow Condensed",sans-serif);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:.85;
  font-size:clamp(3rem,9vw,7rem);color:#fff;text-align:center;
  transform:scale(.86);opacity:0;
  animation:ttStingIn .55s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.tt-stinger__mark em{font-style:normal;color:var(--pr-red,#e11d2e)}
.tt-sting .tt-stinger__slab{
  position:absolute;left:0;top:50%;height:.9rem;width:100%;
  background:var(--pr-red,#e11d2e);transform:translateY(2.2em) scaleX(0);
  transform-origin:left center;
  animation:ttStingSlab .5s cubic-bezier(.77,0,.18,1) .55s forwards;
}
@keyframes ttStingIn{to{transform:none;opacity:1}}
@keyframes ttStingSlab{to{transform:translateY(2.2em) scaleX(1)}}
@keyframes ttStingOut{to{opacity:0;visibility:hidden}}

/* =========================================================================
   2. HERO CHOREOGRAPHY — pure CSS, timed to land as the stinger lifts.
   Only under html.tt-sting so repeat views load statically.
   ========================================================================= */
.tt-sting .tt-hero__eyebrow,
.tt-sting .tt-hero__line,
.tt-sting .tt-hero__text,
.tt-sting .tt-hero__controls,
.tt-sting .tt-kickoff,
.tt-sting .tt-hero__popular,
.tt-sting .tt-hero__index{
  opacity:0;transform:translateY(34px);
  animation:ttRise .85s cubic-bezier(.22,1,.36,1) forwards;
}
.tt-sting .tt-hero__eyebrow{animation-delay:1.55s}
.tt-sting .tt-hero__line:nth-child(1){animation-delay:1.6s}
.tt-sting .tt-hero__line:nth-child(2){animation-delay:1.72s}
.tt-sting .tt-hero__line:nth-child(3){animation-delay:1.84s}
.tt-sting .tt-hero__text{animation-delay:2.05s}
.tt-sting .tt-hero__controls{animation-delay:2.2s}
.tt-sting .tt-kickoff{animation-delay:2.32s}
.tt-sting .tt-hero__popular{animation-delay:2.4s}
.tt-sting .tt-hero__index{animation-delay:2.5s}
@keyframes ttRise{to{opacity:1;transform:none}}

/* The red slab under the last hero line — drawn, and BELOW the glyphs
   (replaces prime's inset box-shadow that could cross descenders). */
.tt-hero__line--gold{
  box-shadow:none !important;position:relative;display:inline-block;
  padding-bottom:.28em;margin-bottom:-.12em;
}
.tt-hero__line--gold::after{
  content:"";display:block !important;position:absolute;left:0;bottom:.02em;
  height:.12em;width:100%;background:var(--pr-red,#e11d2e);
}
.tt-sting .tt-hero__line--gold::after{
  width:0;animation:ttSlabDraw .7s cubic-bezier(.77,0,.18,1) 2.55s forwards;
}
@keyframes ttSlabDraw{to{width:100%}}

/* =========================================================================
   3. KEN BURNS — slow drift on the hero photograph
   ========================================================================= */
.tt-hero::before{
  content:"";position:absolute;inset:-2%;z-index:0;
  background:inherit;background-size:cover;background-position:center;
  animation:ttKenBurns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ttKenBurns{
  from{transform:scale(1.02) translateY(0)}
  to{transform:scale(1.1) translateY(-1.4%)}
}

/* =========================================================================
   4. TOWN MARQUEE — two counter-rolling rows of outlined type
   ========================================================================= */
.tt-marq{
  overflow:hidden;background:var(--pr-ink,#0c0b0e);
  border-top:1px solid var(--pr-hair,rgba(255,255,255,.18));
  border-bottom:1px solid var(--pr-hair,rgba(255,255,255,.18));
  padding:22px 0;
}
.tt-marq__row{
  display:flex;width:max-content;white-space:nowrap;align-items:baseline;
  animation:ttMarq 52s linear infinite;
}
.tt-marq__row--b{animation-direction:reverse;animation-duration:64s;margin-top:6px}
.tt-marq:hover .tt-marq__row{animation-play-state:paused}
.tt-marq__row span{
  font-family:var(--font-cond,"Barlow Condensed",sans-serif);font-weight:700;
  text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(2rem,3.6vw,3.4rem);padding:0 30px;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.45);
}
.tt-marq__row span.f{color:#fff;-webkit-text-stroke:0}
.tt-marq__row span.r{color:var(--pr-red,#e11d2e);-webkit-text-stroke:0}
@keyframes ttMarq{to{transform:translateX(-50%)}}

/* =========================================================================
   5. HOVER ZOOMS — photography leans in
   ========================================================================= */
.tt-week__card,.tt-dest,.tt-story,.tt-roadtrip__card,.tt-fire__card,
.tt-minicard{overflow:hidden}
.tt-week__media,.tt-dest__media,.tt-story__media,
.tt-minicard__media{
  transition:transform 1s cubic-bezier(.22,1,.36,1);will-change:transform;
}
.tt-week__card:hover .tt-week__media,
.tt-dest:hover .tt-dest__media,
.tt-story:hover .tt-story__media,
.tt-minicard:hover .tt-minicard__media{transform:scale(1.06)}

/* Road trip media: scaled for parallax headroom (JS drives translateY;
   no CSS transition here so the scroll-linked drift stays 1:1).
   The wrapper clips the scaled photo to its own grid column so it can
   never spill over the text column, and the body stacks above the
   transformed media (a transform creates its own paint layer). */
.tt-roadtrip__mediaw{position:relative;overflow:hidden;display:block}
.tt-roadtrip__mediaw .tt-roadtrip__media{
  position:absolute;inset:0;display:block;
  background-size:cover;background-position:center}
.tt-roadtrip__media{transform:scale(1.14);will-change:transform}
.tt-roadtrip__body{position:relative;z-index:2}
@media(max-width:820px){.tt-roadtrip__mediaw{aspect-ratio:16/9}}

/* =========================================================================
   6. REDUCED MOTION — everything lands instantly, nothing stays hidden
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .tt-stinger,.tt-sting .tt-stinger{display:none !important}
  .tt-sting .tt-hero__eyebrow,.tt-sting .tt-hero__line,.tt-sting .tt-hero__text,
  .tt-sting .tt-hero__controls,.tt-sting .tt-kickoff,.tt-sting .tt-hero__popular,
  .tt-sting .tt-hero__index{opacity:1;transform:none;animation:none}
  .tt-sting .tt-hero__line--gold::after{width:100%;animation:none}
  .tt-hero::before{animation:none}
  .tt-marq__row{animation:none}
  .tt-week__media,.tt-dest__media,.tt-story__media,
  .tt-minicard__media{transition:none}
  .tt-roadtrip__media{transform:none}
}

/* Small screens: calm the marquee down a touch. */
@media (max-width: 680px){
  .tt-marq{padding:14px 0}
  .tt-marq__row span{font-size:1.7rem;padding:0 18px}
}