/* =========================================================================
   Bourbon Saturdays — "SHOWCASE" layer: interactive map, cinematic hero,
   tactile micro-interactions, scrollytelling reveals.
   Loads LAST. Every effect is progressive & guarded in JS.
   ========================================================================= */

/* ============================ INTERACTIVE SEC MAP ======================== */
.tt-map__stage{display:grid;grid-template-columns:1fr 320px;gap:1px;margin-top:1.6rem;width:100%;
  background:var(--line-dark);border:1px solid var(--line-dark)}
.tt-map__field{position:relative;aspect-ratio:1001/656;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 40%,#12151b 0%,#0a0b0d 60%,#070809 100%)}
/* Projected SEC state outline */
.tt-map__geo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.tt-map__geo path{fill:rgba(255,255,255,.022);stroke:rgba(198,200,203,.30);stroke-width:1;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tt-map__glow{position:absolute;left:46%;top:44%;width:60%;height:70%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(225,29,46,.16),transparent 62%);filter:blur(10px);pointer-events:none}
.tt-map__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(120% 100% at 50% 45%,#000 55%,transparent 100%)}

.tt-map__pin{position:absolute;transform:translate(-50%,-50%);appearance:none;background:none;border:0;
  cursor:pointer;padding:0;z-index:2;line-height:0}
.tt-map__dot{position:relative;display:block;width:13px;height:13px;border-radius:50%;
  background:#c6c8cb;box-shadow:0 0 0 3px rgba(198,200,203,.14),0 0 12px rgba(198,200,203,.35);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.tt-map__dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--c);opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
.tt-map__pin:hover .tt-map__dot,.tt-map__pin:focus-visible .tt-map__dot,.tt-map__pin.is-active .tt-map__dot{
  background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 20px var(--c);
  transform:scale(1.25)}
.tt-map__pin.is-active .tt-map__dot::after{opacity:.9;animation:tt-ping 1.6s ease-out infinite}
@keyframes tt-ping{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(2.4)}}
.tt-map__tip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%) translateY(4px);
  font-family:var(--font-cond);font-weight:700;letter-spacing:.1em;font-size:11px;color:#fff;white-space:nowrap;
  background:rgba(8,9,10,.9);border:1px solid var(--line-dark);padding:2px 7px;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.tt-map__pin:hover .tt-map__tip,.tt-map__pin:focus-visible .tt-map__tip,.tt-map__pin.is-active .tt-map__tip{
  opacity:1;transform:translateX(-50%) translateY(0)}

.tt-map__card{position:relative;z-index:4;display:flex;flex-direction:column;justify-content:center;
  background:#0b0c0e;border-left:4px solid var(--c);padding:26px 24px;transition:border-color .3s ease}
.tt-map__card-accent{display:block;width:34px;height:4px;background:var(--c);margin-bottom:12px;transition:background .3s}
.tt-map__card-school{font-family:var(--font-cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.74rem;color:var(--c)}
.tt-map__card-town{font-family:var(--font-black);font-weight:400;text-transform:uppercase;line-height:.92;
  font-size:clamp(1.7rem,2.6vw,2.3rem);color:#fff;margin:.15rem 0 .5rem}
.tt-map__card-game{display:block;font-family:var(--font-cond);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;font-size:.78rem;color:var(--silver-dim);margin-bottom:1rem}
.tt-map__card-cta{width:100%;justify-content:center}
.tt-map__hint{margin-top:1rem;text-align:center;font-family:var(--font-cond);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--silver-dim)}

@media(max-width:720px){
  .tt-map__stage{grid-template-columns:1fr}
  /* keep the map's own aspect ratio so pins stay aligned; card stacks below */
  .tt-map__card{padding:20px}
}

/* ============================ CINEMATIC HERO ============================= */
.tt-embers{position:absolute;inset:0;z-index:1;pointer-events:none}
.tt-hero__inner{position:relative;z-index:3}
.tt-hero__scrim{z-index:0}
/* mouse-parallax on the texture + ghost wordmark (vars set by JS) */
.tt-hero{--mx:0;--my:0}
.tt-hero::before{transform:translate3d(calc(var(--mx) * 12px),calc(var(--my) * 12px),0);transition:transform .2s ease-out}
.tt-hero::after{transform:translate3d(calc(var(--mx) * -20px),calc(var(--my) * -12px),0);transition:transform .25s ease-out}

/* ============================ TACTILE ==================================== */
/* Cursor spotlight (desktop; injected by JS) */
.tt-spotlight{position:fixed;inset:0;z-index:65;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(200px circle at var(--x,-200px) var(--y,-200px),rgba(225,29,46,.10),transparent 60%)}
/* Tilt targets get GPU hints */
.tt-fire__card,.tt-dest,.tt-take,.tt-lead__main{will-change:transform;transform-style:preserve-3d}
/* Glass on the kickoff card too */
.tt-kickoff{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ============================ SCROLLYTELLING ============================= */
/* Word-by-word headline reveal (JS wraps words). */
.tt-words .tt-word{display:inline-block;overflow:hidden;vertical-align:top}
.tt-words .tt-word > span{display:inline-block;transform:translateY(112%);
  transition:transform .62s cubic-bezier(.22,1,.36,1)}
.tt-words.is-words .tt-word > span{transform:none}

@media (prefers-reduced-motion:reduce){
  .tt-embers,.tt-spotlight{display:none !important}
  .tt-hero::before,.tt-hero::after{transform:none !important}
  .tt-words .tt-word > span{transform:none !important;transition:none !important}
  .tt-map__pin.is-active .tt-map__dot::after{animation:none !important}
}

/* Old browsers without color-mix still get a solid ring */
@supports not (background: color-mix(in srgb, red 20%, transparent)){
  .tt-map__pin:hover .tt-map__dot,.tt-map__pin.is-active .tt-map__dot{box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 20px var(--c)}
}