/* Pampeliška – choreografie: pozadí → hejno zprava → vír → PRASK →
   kresba naráz → semínka dosednou a navždy se vznášejí.
   Let hejna řídí WAAPI v js/main.js; zde jsou jednorázové CSS efekty
   a věčný ambient. Společná nula času = přepnutí pre → play. */

:root {
  --t-bg: 0s;      --dur-bg: 2.2s;   /* pozadí se vynoří z bílé            */
  --t-burst: 7.4s;                   /* PRASK – main.js přepíše z konstanty */
  --dur-art: 0.3s;                   /* naskočení kresby                    */
  --t-mist: calc(var(--t-burst) + 0.25s);

  --ease-soft: cubic-bezier(.40, 0, .35, 1);
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #12102e;
  background-image: url("../assets/bg-clean.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color-scheme: dark;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

#art {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: block;
  background-color: transparent;
}

/* ---------- stav před spuštěním (žádné bliknutí hotového obrazu) ---------- */
#art.pre { background-color: #fff; }
.pre #bg { opacity: 0; }
.pre #art-line,
.pre #art-stemhead,
.pre #seeds,
.pre #drifters,
.pre #burst { visibility: hidden; }

/* Výchozí stav BEZ tříd = hotový obraz (reduced-motion): kresba i semínka
   viditelné, efekty prasknutí drží základní opacity 0. */

/* ---------------------------- 1) pozadí z bílé ---------------------------- */
#art.play {
  animation: stage-reveal var(--dur-bg) var(--ease-soft) var(--t-bg) both;
}

.play #bg {
  opacity: 0;
  will-change: opacity;
  animation: fadein var(--dur-bg) var(--ease-soft) var(--t-bg) both;
}

/* ------------------- 4) kresba naskočí prasknutím naráz ------------------- */
.play #art-line,
.play #art-stemhead {
  opacity: 0;
  animation: fadein var(--dur-art) cubic-bezier(.3, .6, .2, 1)
             calc(var(--t-burst) + 0.06s) both;
}

/* --------------------- mlžné skupinky po prasknutí ----------------------- */
.play .mist { animation: fadein 1.4s var(--ease-soft) var(--t-mist) both; }

/* --------------------------- efekty prasknutí ---------------------------- */
#burst * { opacity: 0; }
#b-flash, #b-ring1, #b-ring2 {
  transform-box: fill-box;
  transform-origin: center;
}

.play #b-veil  { animation: veil  0.28s ease-out var(--t-burst) both; }
.play #b-flash { animation: flash 0.60s cubic-bezier(.2, .7, .3, 1) var(--t-burst) both; }
.play #b-ring1 { animation: ring1 0.55s cubic-bezier(.17, .67, .3, 1) var(--t-burst) both; }
.play #b-ring2 { animation: ring2 0.70s cubic-bezier(.17, .67, .3, 1) calc(var(--t-burst) + 0.08s) both; }

/* ------------------------------ 6) ambient ------------------------------- */
/* vnitřní uzel semínka: věčné vznášení + třpyt (vnější g.ap patří letu) */
.play .fl {
  animation:
    float   var(--fd, 9s)  ease-in-out var(--fneg, 0s) infinite alternate,
    twinkle var(--td, 6s)  ease-in-out var(--tneg, 0s) infinite alternate;
}

/* volně poletující prvky: fade-in po prasknutí + věčné bloudění
   (dvě vnořené osy s různými periodami = organické Lissajousovo toulání) */
.play .dr { animation: fadein 1.8s var(--ease-soft) var(--d, 8.5s) both; }
.play .wx { animation: wanderx var(--wxd, 26s) ease-in-out var(--wxn, 0s) infinite alternate; }
.play .wy {
  animation:
    wandery var(--wyd, 31s) ease-in-out var(--wyn, 0s) infinite alternate,
    twinkle var(--td, 7s)   ease-in-out var(--tneg, 0s) infinite alternate;
}

/* ------------------------------- keyframes ------------------------------- */
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes stage-reveal {
  from { background-color: #fff; }
  to   { background-color: transparent; }
}

/* jednorázové efekty startují z 0 (fill both nesmí nic ukázat před delayem) */
@keyframes veil {
  0%   { opacity: 0; }
  10%  { opacity: 0.28; }
  100% { opacity: 0; }
}

@keyframes flash {
  0%   { opacity: 0;    transform: scale(0.55); }
  15%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(1.45); }
}

@keyframes ring1 {
  0%   { opacity: 0;   transform: scale(1);   stroke-width: 22; }
  12%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(7.2); stroke-width: 0.5; }
}

@keyframes ring2 {
  0%   { opacity: 0;   transform: scale(1);   stroke-width: 12; }
  12%  { opacity: 0.6; }
  100% { opacity: 0;   transform: scale(5.4); stroke-width: 0.5; }
}

@keyframes float {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--fx, 6px), var(--fy, -9px)); }
}

@keyframes wanderx {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--wx, 70px)); }
}

@keyframes wandery {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--wy, -60px)); }
}

@keyframes twinkle {
  from { opacity: 1; }
  to   { opacity: var(--tmin, 0.55); }
}

/* --------------------------- zklidněný režim ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  #art, #art * { animation: none !important; }
}