/* Automatka — aloitusruudun taustakerros.
 *
 * Sopimus: TÄMÄ TIEDOSTO EI SAA SIIRTÄÄ MITÄÄN. Kaikki säännöt maalaavat
 * sisällön taakse tai lisäävät pelkkää animaatiota; yhdenkään olemassa olevan
 * elementin leveys, korkeus, marginaali tai sijainti ei muutu. Kerros
 * ladataan pelin omien tyylien JÄLKEEN, joten se voisi ylikirjoittaa mitä
 * tahansa — siksi rajaus on tässä eikä sattumassa.
 *
 * Värit tulevat pelin omasta theme-colorista ja kansikuva pelin omasta
 * faviconista (aloitus.js asettaa custom propertyt). Peli ei siis menetä
 * omaa ilmettään, se saa sen ympärille syvyyttä. */

.tk-tausta{
  position:absolute; inset:0;
  /* negatiivinen z-index: maalautuu peitteen oman taustan PÄÄLLE mutta
     kaiken sisällön TAAKSE. aloitus.js varmistaa että peite muodostaa
     pinoamiskontekstin (isolation:isolate), jottei kerros valu sivun alle. */
  z-index:-1;
  overflow:hidden; pointer-events:none;
  border-radius:inherit;
}

/* Pelin oma kuvake ISONA otsikon takana. Ensimmäinen versio oli koko ruudun
   peittävä 20 px:n sumennus, ja se katosi täysin pelin oman gradientin alle —
   ruutu oli yhtä littana kuin ennen. Nyt kuva on tunnistettava mutta reunoilta
   häivytetty maskilla, jotta teksti saa yhä oman tilansa. */
.tk-kansi{
  position:absolute; left:50%; top:var(--tk-kansi-y,30%);
  width:var(--tk-kansi-koko,86vmin); height:var(--tk-kansi-koko,86vmin);
  margin:calc(var(--tk-kansi-koko,86vmin) / -2) 0 0 calc(var(--tk-kansi-koko,86vmin) / -2);
  background:var(--tk-kansi) center/contain no-repeat;
  /* overlay-sekoitus: kuva näkyy VALONA JA VARJONA eikä värinä. Moni kuvake on
     täytetty pelin omalla teemavärillä, jolloin tavallisena kuvana se katoaa
     samanväriseen taustaan — mitattu Ilmataistelussa: näkyviin jäi vain kaksi
     pientä konetta. Overlay tuo muodot esiin vaikka sävy olisi sama. */
  mix-blend-mode:var(--tk-kansi-blend,overlay);
  filter:blur(var(--tk-kansi-sumu,4px)) saturate(1.25) contrast(1.25);
  opacity:var(--tk-kansi-o,.5);
  -webkit-mask-image:radial-gradient(closest-side,#000 42%,rgba(0,0,0,.35) 72%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 42%,rgba(0,0,0,.35) 72%,transparent 100%);
  animation:tk-kelluu 34s ease-in-out infinite;
  will-change:transform;
}

/* Kolme sumeaa värilaikkua pelin teemavärin sävyissä. Sumennus on
   STAATTISELLA kerroksella ja animoidaan vain transformia → GPU hoitaa. */
.tk-laikku{
  position:absolute; border-radius:50%;
  mix-blend-mode:var(--tk-blend,screen);
  filter:blur(44px); opacity:var(--tk-laikku-o,.5);
  animation:tk-ajelehdi 26s ease-in-out infinite;
  will-change:transform;
}
.tk-laikku.a{width:46vmax;height:46vmax;left:-14vmax;top:-16vmax;
  background:radial-gradient(circle,var(--tk-vari1),transparent 64%);}
.tk-laikku.b{width:40vmax;height:40vmax;right:-14vmax;top:8vmax;
  background:radial-gradient(circle,var(--tk-vari2),transparent 64%);
  animation-delay:-9s;animation-duration:31s;}
.tk-laikku.c{width:38vmax;height:38vmax;left:12vmax;bottom:-18vmax;
  background:radial-gradient(circle,var(--tk-vari3),transparent 64%);
  animation-delay:-16s;animation-duration:35s;}

/* Vinjetti EI ole vain luettavuutta varten: littana ruutu paranee kun reunat
   tummuvat ja keskelle jää valo. Ilman tätä sumeat laikut vain haalistavat
   pelin oman värin — mitattu ensimmäisessä versiossa: koko ruutu harmastui. */
.tk-vinjetti{position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 34%,rgba(255,255,255,.10),transparent 46%),
    radial-gradient(116% 96% at 50% 40%,transparent 24%,rgba(0,0,0,.30) 66%,rgba(0,0,0,.58) 100%);}

@keyframes tk-ajelehdi{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(5vmax,4vmax) scale(1.12);}
  66%{transform:translate(-4vmax,-3vmax) scale(.92);}
}
@keyframes tk-kelluu{
  0%,100%{transform:scale(1) translate(0,0) rotate(0deg);}
  50%{transform:scale(1.06) translate(-1.5%,-2%) rotate(1.2deg);}
}

/* ---------- otsikko ----------
   Gradienttiteksti valkoisesta pelin teemaväriin. Hehku tehdään
   drop-shadowilla eikä text-shadowilla: läpinäkyvän tekstin text-shadow
   piirtyisi haamuna itse kirjainten päälle. */
.tk-otsikko{
  background-image:linear-gradient(180deg,#fff 0%,#fff 30%,var(--tk-vaalea) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; text-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 6px 22px rgba(0,0,0,.45))
         drop-shadow(0 0 18px var(--tk-hehku));
}

/* Aloitusruudun emoji hengittää. Vain transform + drop-shadow: koko ei muutu,
   joten tiukkakaan valikko ei ylivuoda. */
.tk-merkki{
  animation:tk-keinu 3.4s ease-in-out infinite;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  will-change:transform;
}
@keyframes tk-keinu{ 50%{transform:translateY(-4px) rotate(-4deg);} }

/* Porrastettu esiinnousu. translateY ei vaikuta flex-asetteluun. */
@keyframes tk-nousu{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.tk-esiin{animation:tk-nousu .5s cubic-bezier(.2,.8,.25,1) both;}
.tk-esiin.v1{animation-delay:.08s;}
.tk-esiin.v2{animation-delay:.16s;}
.tk-esiin.v3{animation-delay:.26s;}

/* ---------- aloitusnappi ----------
   Syke tehdään drop-shadowilla EIKÄ transformilla: transform-animaatio voittaa
   napin oman :active{transform:scale(.92)} -säännön, jolloin painallus lakkaa
   tuntumasta. drop-shadow taas latautuu napin oman box-shadowin päälle. */
.tk-cta{animation:tk-syke 2.6s ease-in-out infinite;}
@keyframes tk-syke{
  0%,100%{filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
  50%{filter:drop-shadow(0 0 15px var(--tk-hehku));}
}

@media (prefers-reduced-motion:reduce){
  .tk-kansi,.tk-laikku,.tk-cta,.tk-esiin,.tk-merkki{animation:none!important;}
  .tk-esiin{opacity:1;transform:none;}
}