/* 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: 1.35s;  /* pozadí se svižně 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;
}

/* ----------------------- spuštění se zvukem ------------------------------ */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 216, 249, 0.82), transparent 31%),
    radial-gradient(circle at 74% 22%, rgba(196, 169, 255, 0.46), transparent 28%),
    linear-gradient(145deg, #fff 0%, #fff8fd 49%, #f3efff 100%);
  transition: opacity 0.7s ease, visibility 0.7s;
}

#start-screen.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.start-invite {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(88vw, 420px);
  text-align: center;
}

#start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.72em;
  min-height: 62px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: linear-gradient(120deg, #6520b3, #c117a5 53%, #ff4e91);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 16px 42px rgba(111, 15, 143, 0.28),
    0 0 38px rgba(255, 74, 179, 0.16);
  color: #fff;
  font: 750 clamp(1rem, 4.3vw, 1.2rem)/1.1 -apple-system,
        BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.2s ease;
}

#start-button:active {
  transform: scale(0.975);
  filter: brightness(1.08);
}

#start-button:focus-visible {
  outline: 3px solid rgba(117, 56, 206, 0.35);
  outline-offset: 5px;
}

#start-button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.76;
}

.start-icon {
  display: grid;
  place-items: center;
  width: 2.05em;
  height: 2.05em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.72em;
  text-indent: 0.14em;
}

#sound-toggle {
  position: fixed;
  z-index: 15;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(29, 8, 60, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 22px rgba(8, 2, 34, 0.24);
  color: #fff;
  font-size: 1.15rem;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease, transform 0.16s ease, visibility 0.3s;
}

#sound-toggle.visible {
  visibility: visible;
  opacity: 1;
}

#sound-toggle:active {
  transform: scale(0.92);
}

#sound-toggle:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

#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); }
}

/* ------------------------- 7) záplava třicítek -------------------------- */
#thirties {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  isolation: isolate;
}

.thirty {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18)
             rotate(calc(var(--rot) - 16deg));
  transform-origin: center;
  will-change: transform, opacity;
}

.thirty > span {
  display: block;
  color: var(--c);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.65rem, var(--fs), 5rem);
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.055em;
  white-space: nowrap;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--c) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--c) 42%, transparent),
    0 2px 9px rgba(17, 5, 51, 0.42);
  animation: thirty-drift var(--drift) ease-in-out
             calc(var(--delay) + 0.9s) infinite alternate;
}

.thirty.outline > span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c);
  text-shadow:
    0 0 9px color-mix(in srgb, var(--c) 65%, transparent),
    0 0 20px color-mix(in srgb, var(--c) 34%, transparent);
}

.thirty.phrase {
  z-index: 2;
}

.thirty.phrase > span {
  padding: 0.42em 0.66em 0.46em;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22),
    rgba(63, 10, 105, 0.22)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 28px rgba(13, 2, 43, 0.26);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  font-size: clamp(1rem, var(--fs), 2.2rem);
  font-weight: 760;
  letter-spacing: -0.035em;
}

#thirties.show .thirty {
  animation: thirty-arrive 1.05s cubic-bezier(.16, .86, .27, 1.18)
             var(--delay) both;
}

@keyframes thirty-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18)
               rotate(calc(var(--rot) - 16deg));
  }
  68% {
    opacity: var(--alpha);
    transform: translate(-50%, -50%) scale(1.13)
               rotate(calc(var(--rot) + 2deg));
  }
  100% {
    opacity: var(--alpha);
    transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
  }
}

@keyframes thirty-drift {
  from { transform: translate(-4px, -6px) rotate(-1.8deg); }
  to   { transform: translate(5px, 7px) rotate(1.8deg); }
}

/* ------------------------- 8) velké finále ------------------------------- */
#thirties.farewell .thirty {
  animation: thirty-farewell 0.82s cubic-bezier(.55, -.15, .88, .42) both
             !important;
}

@keyframes thirty-farewell {
  from {
    opacity: var(--alpha);
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
  }
  to {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, -50%) scale(0.18)
               rotate(calc(var(--rot) + 28deg));
  }
}

#celebration {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out;
}

#celebration.active {
  opacity: 1;
}

#wish {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  overflow: hidden;
  padding:
    max(22px, env(safe-area-inset-top))
    18px
    max(22px, env(safe-area-inset-bottom));
  background:
    linear-gradient(
      145deg,
      rgba(29, 5, 66, 0.34),
      rgba(255, 103, 214, 0.13) 47%,
      rgba(4, 21, 74, 0.38)
    );
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#wish.show {
  visibility: visible;
  animation: wish-scene-in 0.75s ease-out both;
}

.wish-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(128vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 245, 197, 0.42) 0 8%,
      rgba(255, 102, 218, 0.25) 28%,
      rgba(138, 83, 255, 0.14) 49%,
      transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  filter: blur(10px);
}

#wish.show .wish-halo {
  animation: wish-halo-in 2s cubic-bezier(.15, .75, .25, 1) 0.05s both,
             wish-halo-breathe 4.8s ease-in-out 2.05s infinite alternate;
}

.wish-card {
  position: relative;
  width: min(92vw, 720px);
  box-sizing: border-box;
  padding: clamp(16px, 4vw, 30px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  opacity: 0;
  transform: perspective(900px) translateY(34px) scale(0.82) rotateX(11deg);
}

#wish.show .wish-card {
  animation: wish-card-in 1.15s cubic-bezier(.14, .9, .22, 1.12) 0.12s both;
}

.wish-card::after {
  content: none;
}

#wish.show .wish-card::after {
  animation: none;
}

.wish-name {
  margin-bottom: 0.22em;
  color: rgba(255, 245, 205, 0.94);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.1rem, 9.2vw, 5.3rem);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.065em;
  text-indent: 0;
  text-shadow: 0 0 16px rgba(255, 216, 116, 0.65);
  opacity: 0;
}

#wish.show .wish-name {
  animation: wish-name-in 0.8s ease-out 0.48s both;
}

#wish h1 {
  margin: 0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.2rem, 5.25vw, 2.7rem);
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.wish-line {
  display: block;
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  text-shadow:
    0 2px 10px rgba(13, 4, 54, 0.62),
    0 0 24px rgba(255, 255, 255, 0.16);
}

.wish-main {
  margin-bottom: 0.22em;
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(2.1rem, 9.2vw, 5.3rem);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.065em;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.42),
    0 3px 14px rgba(34, 4, 76, 0.72);
  filter: drop-shadow(0 2px 7px rgba(34, 4, 76, 0.42));
}

.wish-strong {
  margin-top: 0.12em;
  color: #fff3b7;
  font-weight: 870;
  text-shadow:
    0 0 13px rgba(255, 222, 111, 0.68),
    0 2px 12px rgba(13, 4, 54, 0.65);
}

#wish.show .wish-line {
  animation: wish-line-in 0.92s cubic-bezier(.16, .86, .24, 1.1)
             calc(0.56s + var(--i) * 0.22s) both;
}

.wish-emojis {
  display: flex;
  justify-content: center;
  gap: 0.28em;
  margin-top: 0.36em;
  font-size: clamp(2.4rem, 11vw, 5.6rem);
  line-height: 1;
}

.wish-emojis span {
  display: block;
  opacity: 0;
  transform: translateY(26px) scale(0.25) rotate(-18deg);
}

#wish.show .wish-emojis span:first-child {
  animation: wish-emoji-in 0.9s cubic-bezier(.15, .9, .24, 1.3) 1.52s both,
             wish-emoji-float 2.9s ease-in-out 2.42s infinite alternate;
}

#wish.show .wish-emojis span:last-child {
  animation: wish-emoji-in 0.9s cubic-bezier(.15, .9, .24, 1.3) 1.72s both,
             wish-emoji-float 3.2s ease-in-out 2.62s infinite alternate-reverse;
}

@keyframes wish-scene-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wish-halo-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wish-halo-breathe {
  from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.82; }
  to   { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes wish-card-in {
  from {
    opacity: 0;
    transform: perspective(900px) translateY(34px) scale(0.82) rotateX(11deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translateY(0) scale(1) rotateX(0);
  }
}

@keyframes wish-name-in {
  from { opacity: 0; transform: translateY(-12px); letter-spacing: 0.02em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: -0.065em; }
}

@keyframes wish-line-in {
  from { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes wish-emoji-in {
  from { opacity: 0; transform: translateY(26px) scale(0.25) rotate(-18deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes wish-emoji-float {
  from { transform: translateY(-3px) rotate(-4deg); }
  to   { transform: translateY(6px) rotate(5deg); }
}

@keyframes wish-shimmer {
  0%   { left: -55%; opacity: 0; }
  20%  { opacity: 0.8; }
  100% { left: 125%; opacity: 0; }
}

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

  #thirties.show .thirty {
    opacity: var(--alpha);
    transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
  }

  #wish.show,
  #wish.show .wish-card,
  #wish.show .wish-name,
  #wish.show .wish-line,
  #wish.show .wish-emojis span {
    visibility: visible;
    opacity: 1;
    filter: none;
    transform: none;
  }

  #celebration { display: none; }
}