/* =====================================================================
   v5.27.4 — Fan-crowd imagery on the homepage hero.
   Layers AI-generated fan photos behind the existing v527 orbs canvas,
   adds a slow Ken-Burns zoom + crossfade between 3 hero images, and
   drops a "fan strip" gallery row below the stats ticker.
   Designed to play nicely with v527-polish.css. Z-stack:
     mc-bg          (existing tint)             z = base
     v5274-fan-bg   (new — photo crossfade)     z = 0
     v527-hero-gradient (existing radial bloom) z = 1
     v527-hero-canvas   (existing orbs)         z = 2
     mc-stage           (existing content)      z = 3
   ===================================================================== */

/* --- 1. Photo background layer -------------------------------------- */
.v5274-fan-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* darken so foreground text stays readable */
  background: #050a0d;
}

.v5274-fan-bg .v5274-fan-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1800ms ease-in-out;
  filter: saturate(1.1) contrast(1.05);
  animation: v5274-kenburns 22s ease-in-out infinite alternate;
}

.v5274-fan-bg .v5274-fan-frame.is-active {
  opacity: 1;
}

@keyframes v5274-kenburns {
  0%   { transform: scale(1.05) translate(-1%, -0.5%); }
  50%  { transform: scale(1.12) translate( 0.5%,  1%); }
  100% { transform: scale(1.18) translate(-0.5%, 0.5%); }
}

/* Dark vignette + brand-color wash so the photo never overwhelms the UI */
.v5274-fan-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(5,10,13,0) 0%, rgba(5,10,13,0.55) 55%, rgba(5,10,13,0.92) 100%),
    linear-gradient(180deg, rgba(5,10,13,0.35) 0%, rgba(5,10,13,0.15) 35%, rgba(5,10,13,0.7) 100%),
    linear-gradient(180deg, rgba(30,219,138,0.08) 0%, rgba(46,138,255,0.04) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Make sure the orbs canvas + gradient still sit ABOVE the photo */
.v527-hero-canvas { z-index: 3 !important; }
.v527-hero-gradient { z-index: 3 !important; mix-blend-mode: screen; opacity: 0.7 !important; }

/* Stage content above everything */
.mode-chooser .mc-stage,
#vflModeChooser .mc-stage {
  position: relative;
  z-index: 5;
}

/* --- 2. Fan strip gallery ------------------------------------------- */
.v5274-fan-strip {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1.4fr;
  gap: 14px;
  margin: 22px auto 6px;
  width: min(1100px, 92vw);
  position: relative;
  z-index: 5;
}

.v5274-fan-tile {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a1014 center/cover no-repeat;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transform: translateZ(0);
  transition: transform 480ms cubic-bezier(.2,.7,.2,1), box-shadow 480ms;
}

.v5274-fan-tile:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 26px 52px rgba(0,0,0,0.65),
    0 0 0 1px rgba(30,219,138,0.35) inset;
}

.v5274-fan-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}

.v5274-fan-tile .v5274-fan-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--ff-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3fff8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.v5274-fan-tile .v5274-fan-label .lbl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1edb8a;
  box-shadow: 0 0 10px #1edb8a;
  margin-right: 8px;
  vertical-align: middle;
  animation: v5274-pulse 1.6s ease-in-out infinite;
}

@keyframes v5274-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}

/* The lead tile (left) gets richer chrome */
.v5274-fan-tile.is-lead {
  grid-row: span 1;
  aspect-ratio: 16 / 9;
}

.v5274-fan-tile.is-lead .v5274-fan-label {
  font-size: 15px;
}

/* --- 3. Punchier hero title for v5.27.4 ----------------------------- */
.mode-chooser .mc-title,
#vflModeChooser .mc-title {
  text-shadow:
    0 4px 24px rgba(0,0,0,0.85),
    0 1px 2px rgba(0,0,0,0.6);
}

.mode-chooser .mc-sub,
#vflModeChooser .mc-sub {
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

/* --- 4. Mobile tuning ----------------------------------------------- */
@media (max-width: 760px) {
  .v5274-fan-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px auto 4px;
    width: 92vw;
  }
  .v5274-fan-tile:not(.is-lead) { display: none; }
  .v5274-fan-tile.is-lead { aspect-ratio: 16 / 9; }
}

/* --- 5. Reduce motion respect --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v5274-fan-bg .v5274-fan-frame { animation: none; }
  .v5274-fan-tile { transition: none; }
}