/* ===================================================================
   WOW FACTOR NATION GA — effects.css
   Modern motion layer: view transitions, stadium glow, spotlight cards,
   blur reveals, shine sweeps, scroll progress.
   =================================================================== */

/* ---------- Cross-document page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .26s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Scroll progress bar ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  z-index: 1200; pointer-events: none;
  box-shadow: 0 0 12px rgba(216,25,47,.5), 0 0 20px rgba(47,128,237,.3);
}

/* ---------- Aurora drift in heroes ---------- */
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: -15%;
  background:
    radial-gradient(620px 440px at 16% 28%, rgba(216,25,47,.095), transparent 62%),
    radial-gradient(680px 480px at 84% 70%, rgba(47,128,237,.07), transparent 62%),
    radial-gradient(520px 360px at 50% 100%, rgba(18,99,61,.11), transparent 64%);
  pointer-events: none; z-index: 0;
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2.5%, -2%) scale(1.06); }
  100% { transform: translate(-2%, 2.5%) scale(1.02); }
}

/* Watermark logo slow breathe */
body::before { animation: watermarkBreathe 16s ease-in-out infinite; }
@keyframes watermarkBreathe {
  50% { opacity: .055; transform: translate(-50%, -50%) scale(1.035); }
}

/* ---------- Reveals: add blur + a touch more travel ---------- */
[data-reveal] {
  filter: blur(10px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  will-change: opacity, transform, filter;
}
[data-reveal].in { filter: blur(0); }
.hero [data-reveal] { transform: translateY(44px) scale(.985); }
.hero [data-reveal].in { transform: none; }

/* ---------- Gradient text shimmer ---------- */
.grad-text {
  background-size: 200% 100%;
  animation: gradShift 7s ease-in-out infinite alternate;
}
@keyframes gradShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ---------- Buttons: shine sweep ---------- */
.btn { overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---------- Nav polish: gradient underline + hairline ---------- */
.nav-link::after { background: var(--grad); }
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,25,47,.58), rgba(47,128,237,.5), transparent);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.nav.scrolled::before { opacity: .8; }

/* ---------- Spotlight glow overlay (positioned by effects.js) ---------- */
.event-row { position: relative; }
.fx-glow {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(216,25,47,.1), rgba(47,128,237,.07) 45%, transparent 72%);
}
.card:hover .fx-glow, .team-panel:hover .fx-glow, .event-row:hover .fx-glow,
.commit-img-card:hover .fx-glow, .shop-band:hover .fx-glow,
.brand-record-inner:hover .fx-glow { opacity: 1; }

/* ---------- Hover glows tuned to the brand ---------- */
.card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14),
              0 0 44px rgba(216,25,47,.08), 0 0 70px rgba(47,128,237,.06);
}
.team-panel.tp-nation:hover   { box-shadow: 0 22px 52px rgba(0,0,0,.8), 0 0 50px rgba(216,25,47,.13); }
.team-panel.tp-american:hover { box-shadow: 0 22px 52px rgba(0,0,0,.8), 0 0 50px rgba(47,128,237,.12); }
.team-panel.tp-scout:hover    { box-shadow: 0 22px 52px rgba(0,0,0,.8), 0 0 50px rgba(18,99,61,.16); }
.commit-img-card { box-shadow: 0 0 0 rgba(216,25,47,0); transition: box-shadow .35s var(--ease); }
.commit-img-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.7), 0 0 30px rgba(216,25,47,.14); }

/* Event rows: date lights up in the gradient */
.event-row:hover .event-day, .event-row:hover .event-price {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Hero diamond: float + eased parallax ---------- */
.hero-diamond { transition: transform .35s ease-out; will-change: transform; }
.hero-diamond svg { animation: diamondFloat 9s ease-in-out infinite; }
@keyframes diamondFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Bases flash as the runner touches them. The runner rides the SVG's SMIL
   clock, which starts at window load — so effects.js adds .diamond-live on
   load and these delays count from the same moment.
   Runner loop = 7s from t=3s. CSS starts after SVG load, so these are nudged earlier to match visual contact. */
.diamond-live .base-1    { animation: baseFlashBlue 7s linear infinite 4.55s; }
.diamond-live .base-2    { animation: baseFlashPink 7s linear infinite 6.3s; }
.diamond-live .base-3    { animation: baseFlashBlue 7s linear infinite 8.05s; }
.diamond-live .base-home { animation: baseFlashPink 7s linear infinite 9.8s; }
@keyframes baseFlashPink {
  0%       { stroke: var(--pink); fill: rgba(216,25,47,.48); filter: drop-shadow(0 0 9px rgba(216,25,47,.82)); }
  9%, 100% { stroke: #fff; fill: rgba(255,255,255,.07); filter: none; }
}
@keyframes baseFlashBlue {
  0%       { stroke: var(--blue); fill: rgba(47,128,237,.44); filter: drop-shadow(0 0 9px rgba(47,128,237,.82)); }
  9%, 100% { stroke: #fff; fill: rgba(255,255,255,.07); filter: none; }
}

/* ---------- Back to top ---------- */
.fx-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1100;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1; color: #fff;
  background: rgba(10,10,14,.8);
  border: 1px solid var(--border-bright);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t), transform var(--t), visibility var(--t),
              background var(--t), border-color var(--t), box-shadow var(--t);
  cursor: pointer;
}
.fx-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.fx-top:hover {
  background: var(--grad); border-color: transparent;
  box-shadow: var(--glow-pink), var(--glow-blue);
  transform: translateY(-3px);
}
@media (max-width: 640px) { .fx-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; } }

/* ---------- Focus polish ---------- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---------- Reduced motion: strip it all ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .hero::before, .page-hero::before, body::before,
  .grad-text, .hero-diamond svg { animation: none !important; }
  [data-reveal] { filter: none; }
  .fx-glow { display: none; }
  /* SMIL keeps running under animation:none, so hide these outright */
  .diamond-runner, .mound-pulse { display: none; }
  .base-1, .base-2, .base-3, .base-home { animation: none !important; }
}