/* ============================================================
   hero.css — R163: SEASONAL HERO ("Jalkapallon MM-kisat 2026")
   Temporary football–World-Cup themed hero: a full-bleed stadium
   background behind the existing text + mascot, with a dark scrim
   so the headline, sub-copy, CTAs and mascot stay razor-sharp.

   ── SWAP THE PHOTO IN (WC look) ─────────────────────────────
   1. Put the file at  assets/hero-stadion.jpg
   2. Change the ONE line marked  *** PHOTO ***  below to:
        --hero-img: url('/assets/hero-stadion.jpg');
   Until then a night-stadium gradient placeholder renders.

   ── REVERT AFTER THE TOURNAMENT (one of) ────────────────────
   • Point --hero-img at the next season's image, OR
   • Remove the  <link ... hero.css>  from index.html to fall
     back to the original gradient hero. Nothing else depends
     on this file, so reverting is clean.
   ============================================================ */
:root{
  /* *** PHOTO *** — the seasonal football-WC stadium background */
  --hero-img: url('/assets/hero-stadion.jpg?v=2');
  --hero-img-pos: center 38%;
}

/* establish a clean stacking context for the layered hero */
.hero{ isolation:isolate; }

/* full-bleed background photo */
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:#081427;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-img-pos);
  background-repeat:no-repeat;
  transform: scale(1.04);                 /* tiny overscan so edges never gap */
  animation: heroKenBurns 26s ease-in-out infinite alternate;
}
/* cinematic scrim — darker on the left (text side) + top/bottom vignette */
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(6,14,28,.92) 0%, rgba(6,14,28,.66) 32%,
      rgba(6,14,28,.24) 60%, rgba(6,14,28,.10) 78%, rgba(6,14,28,.44) 100%),
    linear-gradient(180deg,
      rgba(6,14,28,.50) 0%, rgba(6,14,28,0) 24%,
      rgba(6,14,28,.06) 58%, rgba(6,14,28,.84) 100%);
}

@keyframes heroKenBurns{
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.10) translate3d(0,-1.2%,0); }
}

/* let the photo dominate — keep brand decorations as subtle atmosphere */
.hero::before{ opacity:.42; }     /* green/gold radial glows */
.hero::after{ opacity:.5; }       /* sparkles */
.hero-grid{ display:none; }
.hero-glow{ opacity:.38; mix-blend-mode:screen; }

/* content always crisp on top */
.hero > .container{ position:relative; z-index:3; }
/* R169b: anna klikkien mennä LÄPI tyhjien tekstialueiden taustan
   jalkapallo-hiukkasiin (z:2), mutta pidä CTA-napit klikattavina. */
.hero > .container{ pointer-events:none; }
.hero .hero-cta-group{ pointer-events:auto; }
.hero h1{ text-shadow:0 2px 26px rgba(0,0,0,.5); }
.hero-subtitle{ text-shadow:0 1px 14px rgba(0,0,0,.45); }
.hero-mascot-img{ filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }

@media (prefers-reduced-motion: reduce){
  .hero-photo{ animation:none; transform:scale(1.02); }
  .hero-glow{ animation:none; }
}

/* ============================================================
   R169b: jalkapallo-HIUKKASET (MM-teema) — leijuvat omaa elämäänsä
   Layer .hero-balls on tekstin/maskotin TAKANA (z:2) → ei peitä
   otsikkoa eikä estä CTA-nappeja. Liike on JS:ssä (jatkuva ajelehdintа
   + kimpoilu). Raahattaessa pallo nousee etualalle (.is-grabbing → z:5).
   CTA-napit pidetään klikattavina: .hero>.container pointer-events:none
   + .hero-cta-group pointer-events:auto (kts. ylempänä). Näin pallot
   tekstin TAKANA ovat silti tartuttavissa läpi tyhjien alueiden.
   ============================================================ */
.hero-balls{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  /* tanssitutka-tyylinen pehmeä reunahäivytys → hiukkaset sulavat reunoille */
  -webkit-mask-image:radial-gradient(135% 130% at 52% 44%, #000 74%, transparent 100%);
          mask-image:radial-gradient(135% 130% at 52% 44%, #000 74%, transparent 100%);
}
.hero-ball{
  position:absolute; top:0; left:0;
  pointer-events:auto; cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none; will-change:transform, filter, opacity;
  /* drop-shadow + blur + opacity asetetaan JS:ssä syvyyden mukaan (depth of field) */
}
.hero-ball.is-grabbing{ cursor:grabbing; }
.hero-ball img{ width:100%; height:100%; display:block; pointer-events:none; -webkit-user-drag:none; user-drag:none; }
/* (liike JS:ssä; prefers-reduced-motion → JS jättää automaattiliikkeen pois) */