/*
 * Elämäni kuntoon – liikkuva luontotausta (metsä, järvi, meri).
 * Käyttö ja rajapinta: ks. README.md. Pari: tausta.js.
 */

/* ---------- Tekstivärit avausosiolle ----------
 * Muuttujat asetetaan taustan vanhemmalle, jotta ne periytyvät sisällölle.
 * tausta.js asettaa samat arvot myös suoraan; tämä estää väärän värin välähdyksen. */
:has(> .tausta[data-maisema="metsa"]) {
  --tausta-teksti: #1a2f29;
  --tausta-teksti-heikko: #2c443b;
  --tausta-painike: #24453b;
  --tausta-painike-teksti: #fbf8f0;
  --tausta-hehku: rgba(251, 247, 238, .85);
}
:has(> .tausta[data-maisema="jarvi"]) {
  --tausta-teksti: #172c38;
  --tausta-teksti-heikko: #2a4250;
  --tausta-painike: #22475b;
  --tausta-painike-teksti: #fbf8f0;
  --tausta-hehku: rgba(251, 247, 240, .85);
}
:has(> .tausta[data-maisema="meri"]) {
  --tausta-teksti: #1c2a3b;
  --tausta-teksti-heikko: #2e3e52;
  --tausta-painike: #2b4865;
  --tausta-painike-teksti: #fbf8f0;
  --tausta-hehku: rgba(252, 245, 238, .85);
}

/* Rantaversiot (järvi + meri). */
:has(> .tausta[data-maisema^="kallioranta"]),
:has(> .tausta:not([data-maisema])) {
  --tausta-teksti: #1b2a36; --tausta-teksti-heikko: #2d3d4b; --tausta-painike: #2c4a5f;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(251, 245, 240, .85);
}
:has(> .tausta[data-maisema="kallioranta-hamara"]) {
  --tausta-teksti: #1a2232; --tausta-teksti-heikko: #2b3446; --tausta-painike: #36486a;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(252, 244, 240, .85);
}
:has(> .tausta[data-maisema="saaristo"]) {
  --tausta-teksti: #18293a; --tausta-teksti-heikko: #2b3d50; --tausta-painike: #25486a;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(251, 245, 240, .85);
}
:has(> .tausta[data-maisema="manty"]) {
  --tausta-teksti: #1a2b33; --tausta-teksti-heikko: #2c3e47; --tausta-painike: #2d4b57;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(251, 246, 240, .85);
}
:has(> .tausta[data-maisema="usva"]) {
  --tausta-teksti: #1f2833; --tausta-teksti-heikko: #333d4a; --tausta-painike: #3a4a5e;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(250, 247, 244, .85);
}
:has(> .tausta[data-maisema="sarastus"]) {
  --tausta-teksti: #1b2034; --tausta-teksti-heikko: #2c3249; --tausta-painike: #3b4170;
  --tausta-painike-teksti: #fbf8f0; --tausta-hehku: rgba(252, 242, 238, .85);
}

/* ---------- Runko ---------- */
.tausta {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, #c3d6dc 0%, #d8e4e1 30%, #ece9da 52%, #f5e6cc 64%, #dfe0cb 100%);
}
.tausta[data-maisema="jarvi"] {
  background: linear-gradient(180deg, #b3cad9 0%, #cfdde3 26%, #ebe5da 50%, #f6dfc6 64%, #a9c0c9 100%);
}
.tausta:not([data-maisema]),
.tausta[data-maisema^="kallioranta"],
.tausta[data-maisema="saaristo"],
.tausta[data-maisema="manty"],
.tausta[data-maisema="usva"],
.tausta[data-maisema="sarastus"] {
  background: linear-gradient(180deg, #a7b5c8 0%, #c3cad6 25%, #ddd6d6 46%, #ecd4c4 62%, #8fa6b4 100%);
}
.tausta[data-maisema="meri"] {
  background: linear-gradient(180deg, #a9bbd4 0%, #c6cfdf 24%, #e4d9da 46%, #f6dcc6 58%, #fbd9bb 63%, #8ba6b8 100%);
}

.tausta svg { display: block; overflow: hidden; }

.tausta__koko,
.tausta__osa,
.tausta__nauha,
.tausta__kaista,
.tausta__vesi { position: absolute; }

.tausta__koko { inset: 0; }
.tausta__koko > svg,
.tausta__osa > svg,
.tausta__nauha > svg { width: 100%; height: 100%; }
svg.tausta__koko { width: 100%; height: 100%; }

.tausta__vesi { left: 0; right: 0; bottom: 0; }
.tausta[data-maisema="jarvi"] .tausta__vesi {
  background:
    radial-gradient(ellipse 16% 75% at 70% 0, rgba(255, 243, 222, .85), rgba(255, 243, 222, 0) 100%),
    linear-gradient(180deg, #ecdccb 0%, #cdd8da 14%, #a9c0c9 45%, #88a6b3 100%);
}
.tausta[data-maisema="meri"] .tausta__vesi {
  background:
    radial-gradient(ellipse 22% 80% at 30% 0, rgba(255, 237, 212, .8), rgba(255, 237, 212, 0) 100%),
    linear-gradient(180deg, #e8d6ca 0%, #b5c4cd 10%, #8ba6b8 40%, #5e7f96 100%);
}

/* Pehmeä vaalea huntu tekstialueen takana: varmistaa luettavuuden. */
.tausta__huntu {
  background: radial-gradient(ellipse 80% 42% at 50% 36%, rgba(250, 246, 237, .5), rgba(250, 246, 237, .22) 55%, rgba(250, 246, 237, 0) 100%);
}

/* ---------- Liike ---------- */

/* Vaakasuunnassa liukuvat nauhat (pilvet, sumu, vire, aallot). Leveys 200 %, sisältö toistuu. */
.tausta__nauha {
  left: 0;
  width: 200%;
  animation: tausta-liuku 60s linear infinite;
  will-change: transform;
}
.tausta__kaista { left: 0; right: 0; }
.tausta__kaista > .tausta__nauha { top: 0; height: 100%; }

@keyframes tausta-liuku {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Aaltojen hidas nousu ja lasku. */
.tausta__aalto {
  animation: tausta-aalto 6s ease-in-out infinite alternate;
}
@keyframes tausta-aalto {
  from { transform: translate3d(0, calc(-1 * var(--keinu, 2px)), 0); }
  to   { transform: translate3d(0, var(--keinu, 2px), 0); }
}

/* Välkkyvä valo vedessä. */
.tausta__valke {
  opacity: .7;
  animation: tausta-valke 3s ease-in-out infinite;
  will-change: opacity;
}
@keyframes tausta-valke {
  0%, 100% { opacity: .08; }
  50%      { opacity: 1; }
}

/* Vaahto kallion vesirajassa. */
.tausta__vaahto {
  opacity: .7;
  animation: tausta-vaahto 5.5s ease-in-out infinite;
}
@keyframes tausta-vaahto {
  0%, 100% { opacity: .25; }
  50%      { opacity: .95; }
}

/* Valonsäteet metsässä. */
.tausta__sateet {
  opacity: .8;
  animation: tausta-sateet 14s ease-in-out infinite alternate;
}
@keyframes tausta-sateet {
  from { opacity: .45; transform: rotate(-1.4deg); }
  to   { opacity: 1;   transform: rotate(1.4deg); }
}

/* Kaislat keinuvat. */
.tausta__keinu {
  transform-origin: 50% 100%;
  animation: tausta-keinu 7s ease-in-out infinite alternate;
}
@keyframes tausta-keinu {
  from { transform: rotate(-1.8deg); }
  to   { transform: rotate(1.6deg); }
}

/* Heijastus väreilee. */
.tausta__vaare {
  transform-origin: 50% 0;
  animation: tausta-vaare 8s ease-in-out infinite alternate;
}
@keyframes tausta-vaare {
  from { transform: scaleY(.96); }
  to   { transform: scaleY(1.04); }
}

/* --- Kertaluonteiset alkuliikkeet. Perustila = lopputila, joten pysäytys ei hyppää. --- */
.tausta__verho {
  background: #f6f1e7;
  opacity: 0;
  animation: tausta-verho 2.8s cubic-bezier(.3, .1, .3, 1) both;
}
@keyframes tausta-verho {
  from { opacity: .92; }
}

.tausta__nousu {
  animation: tausta-nousu 7s cubic-bezier(.2, .6, .3, 1) both;
}
@keyframes tausta-nousu {
  from { transform: translate3d(0, var(--nousu, 5%), 0); opacity: .55; }
}

.tausta__halvenee {
  animation: tausta-halvenee 6s ease-out both;
}
@keyframes tausta-halvenee {
  from { opacity: 1; transform: translate3d(0, 3%, 0); }
}

.tausta--valmis .tausta__verho { display: none; }
.tausta--valmis .tausta__nousu,
.tausta--valmis .tausta__halvenee { animation: none; }

/* Välilehti piilossa tai tausta ei näkyvissä. */
.tausta--tauolla,
.tausta--tauolla * { animation-play-state: paused !important; }

/* Staattinen kuva: käyttäjän asetus tai .tausta--staattinen-luokka. */
.tausta--staattinen *,
.tausta--staattinen *::before,
.tausta--staattinen *::after { animation: none !important; }
.tausta--staattinen .tausta__verho { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tausta *,
  .tausta *::before,
  .tausta *::after { animation: none !important; }
  .tausta__verho { display: none; }
}