:root {
  --deep: #05061c;
  --ink: #2a1c3a;
  --cream: #f4f7ff;
  --cyan: #6ceaff;
  --gold: #ffd23d;
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--deep);
  color: var(--cream);
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

/* ------------------------------------------------------------- el espacio */

.space {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 105%, #24164d 0%, rgba(12, 10, 46, 0) 60%),
    radial-gradient(90% 70% at 15% 0%, #131a5c 0%, rgba(8, 8, 32, 0) 65%),
    linear-gradient(to bottom, #060826 0%, #0b0b30 45%, #120a33 100%);
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.nebula--a {
  width: 70vmax; height: 70vmax;
  left: -25vmax; top: -20vmax;
  background: radial-gradient(circle, rgba(94, 66, 214, 0.45), rgba(94, 66, 214, 0) 65%);
  animation: nebula-drift 26s ease-in-out infinite alternate;
}

.nebula--b {
  width: 60vmax; height: 60vmax;
  right: -22vmax; bottom: -18vmax;
  background: radial-gradient(circle, rgba(214, 66, 168, 0.32), rgba(214, 66, 168, 0) 65%);
  animation: nebula-drift 32s ease-in-out infinite alternate-reverse;
}

@keyframes nebula-drift {
  to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}

.stars { position: absolute; inset: 0; }

.stars i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: twinkle ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.08; transform: scale(0.7); }
  to   { opacity: var(--peak, 0.8); transform: scale(1); }
}

.planet {
  position: absolute;
  top: 9vh;
  right: -6vw;
  width: min(46vw, 230px);
  opacity: 0.95;
  filter: drop-shadow(0 0 28px rgba(122, 92, 255, 0.45));
  animation: planet-float 18s ease-in-out infinite alternate;
}

.planet svg { width: 100%; height: auto; display: block; }

@keyframes planet-float {
  to { transform: translateY(2.5vh); }
}

/* ------------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  top: calc(var(--safe-t) + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  max-width: calc(100vw - 6.5rem);
  border-radius: 999px;
  border: 1px solid rgba(140, 220, 255, 0.28);
  background: rgba(10, 16, 48, 0.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s var(--ease-soft);
  pointer-events: none;
}

.hud.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.hud__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: beat 1.6s ease-in-out infinite;
  flex: none;
}

.hud__label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hud__bar {
  position: relative;
  width: clamp(54px, 16vw, 90px);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  flex: none;
}

.hud__bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ef2b0, var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hud[data-phase="bloom"] .hud__dot,
.hud[data-phase="done"] .hud__dot {
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}

@keyframes beat { 50% { transform: scale(1.45); } }

.mute {
  position: fixed;
  top: calc(var(--safe-t) + 14px);
  right: 14px;
  z-index: 13;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(140, 220, 255, 0.28);
  background: rgba(10, 16, 48, 0.62);
  backdrop-filter: blur(10px);
  color: var(--cream);
  font-size: 1rem;
  cursor: pointer;
}

.mute.is-on { color: var(--cyan); border-color: rgba(108, 234, 255, 0.6); }

/* ----------------------------------------------------------- la cápsula */

.scene {
  position: fixed;
  inset: 5vh 0 7vh;
  display: block; /* con grid, el height:100% del svg no resuelve y el dibujo se dispara */
  transition: transform 1.6s var(--ease-soft);
  transform-origin: 50% 100%;
}

body.done .scene { transform: scale(0.78) translateY(7vh); }

body.done .lab { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 46px rgba(255, 190, 70, 0.22)); }

body.done .planet { opacity: 0.45; }
.planet { transition: opacity 1.4s ease; }

.lab {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5));
}

.lab * {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* plataforma y vaso entran primero */

.platform, .jar-back, .jar-glass, .jar-rim, .jar-shine, .soil, .soil-top {
  opacity: 0;
  animation: fade-in 1.3s var(--ease-soft) 0.1s forwards;
}

.soil, .soil-top { animation-delay: 0.45s; }

@keyframes fade-in { to { opacity: 1; } }

.jar-back { animation-name: fade-back; }
@keyframes fade-back { to { opacity: 0.55; } }

.soil-top { animation-name: fade-soil; }
@keyframes fade-soil { to { opacity: 0.55; } }

.pad-ring {
  transform-origin: 300px 884px;
  animation: ring-pulse 3.4s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.06); opacity: 0.15; }
}

/* semilla */

.seed {
  transform-origin: 300px 690px;
  transform: scale(0);
  animation: pop 1.1s var(--ease-back) 0.5s forwards;
}

.seed-glow {
  transform-origin: 300px 690px;
  animation: glow-beat 1.5s ease-in-out 1.2s 6;
}

@keyframes pop { to { transform: scale(1); } }

@keyframes glow-beat {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* raíces */

.root {
  fill: none;
  stroke: #dcf1ff;
  stroke-opacity: 0.85;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(150, 225, 255, 0.7));
  animation: draw var(--dur, 1.1s) var(--ease-soft) var(--delay, 0s) forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

/* tallo en dos tramos: brote y crecimiento */

.stem {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.stem--main {
  animation:
    stem-a var(--d1, 1.9s) var(--ease-soft) var(--t1, 4.8s) forwards,
    stem-b var(--d2, 3s) var(--ease-soft) var(--t2, 6.8s) forwards;
}

.stem--side { animation: draw var(--d1, 2.2s) var(--ease-soft) var(--t1, 8s) forwards; }

@keyframes stem-a { to { stroke-dashoffset: 0.62; } }
@keyframes stem-b { from { stroke-dashoffset: 0.62; } to { stroke-dashoffset: 0; } }

.leaf {
  transform: var(--place) scale(0);
  animation: leaf-open 1.4s var(--ease-back) var(--delay, 0s) forwards;
}

@keyframes leaf-open { to { transform: var(--place); } }

/* flor */

.petal {
  transform: var(--place) scale(0);
  animation: petal-open 1.5s var(--ease-back) var(--delay, 0s) forwards;
}

@keyframes petal-open { to { transform: var(--place) scale(1); } }

.heart {
  transform-origin: var(--ox) var(--oy);
  transform: scale(0);
  animation: pop 1.2s var(--ease-back) var(--delay, 0s) forwards;
}

.seedDot {
  opacity: 0;
  transform: var(--place) scale(0);
  animation: dot-in 0.8s var(--ease-back) var(--delay, 0s) forwards;
}

@keyframes dot-in { to { opacity: 1; transform: var(--place) scale(1); } }

/* cada flor se mece sola y responde cuando le pasas el dedo */

.bloom-sway {
  transform-origin: var(--ox) var(--oy);
  animation: flower-sway var(--swayDur, 7s) ease-in-out var(--swayDelay, 14s) infinite;
}

.bloom-react {
  transform-origin: var(--ox) var(--oy);
  cursor: pointer;
}

.bloom-react.is-wiggle { animation: wiggle 0.9s var(--ease-soft); }

@keyframes wiggle {
  0%   { transform: rotate(0deg) scale(1); }
  18%  { transform: rotate(7deg) scale(1.05); }
  38%  { transform: rotate(-5deg) scale(1.02); }
  57%  { transform: rotate(3.2deg) scale(1.01); }
  74%  { transform: rotate(-1.8deg); }
  88%  { transform: rotate(0.8deg); }
  100% { transform: rotate(0deg) scale(1); }
}

.mote {
  opacity: 0;
  transform: var(--place);
  filter: drop-shadow(0 0 6px rgba(255, 213, 120, 0.9));
  animation: mote-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes mote-float {
  0%   { opacity: 0; transform: var(--place) scale(0.4); }
  20%  { opacity: var(--peak, 0.8); }
  70%  { opacity: var(--peak, 0.8); }
  100% { opacity: 0; transform: var(--place) translateY(-70px) scale(1.1); }
}

@keyframes flower-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* -------------------------------------------------- frase de cada fase */

.line {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-t) + 5.1rem);
  transform: translateX(-50%);
  width: min(86vw, 460px);
  margin: 0;
  z-index: 9;
  text-align: center;
  pointer-events: none;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.98rem, 4.2vw, 1.22rem);
  line-height: 1.45;
  color: #ffeec2;
  text-shadow: 0 2px 14px rgba(4, 4, 28, 0.95), 0 0 34px rgba(4, 4, 28, 0.8);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.line::before {
  content: "";
  position: absolute;
  inset: -1.6rem -2rem;
  z-index: -1;
  background: radial-gradient(60% 65% at 50% 50%, rgba(6, 6, 30, 0.75), rgba(6, 6, 30, 0) 72%);
  filter: blur(4px);
}

.line.is-on { opacity: 1; }

body.done .line {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* reproductor de la canción: presente pero invisible */
.yt {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 120px;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------------------------------------------------------- texto final */

.finale {
  position: fixed;
  top: calc(var(--safe-t) + 2.2vh);
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 560px);
  text-align: center;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  text-shadow: 0 2px 20px rgba(4, 4, 30, 0.85);
}

body.done .finale {
  visibility: visible;
  animation: rise-in 1.6s var(--ease-soft) 0.35s forwards;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); filter: none; }
}

.kicker {
  margin: 0 0 1.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #b9c6ff;
}

.name {
  margin: 0.15rem 0 0;
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-weight: 400;
  font-size: clamp(2.9rem, 14vw, 4.6rem);
  line-height: 1.05;
  color: #ffe27a;
  text-shadow: 0 2px 22px rgba(255, 190, 70, 0.35), 0 4px 30px rgba(4, 4, 30, 0.9);
}

.note {
  margin: 0.8rem auto 0;
  max-width: 22ch;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.08rem, 4.6vw, 1.38rem);
  line-height: 1.5;
  color: #eef2ff;
}

.signature {
  margin: 0.8rem 0 0;
  font-size: clamp(1.15rem, 4.4vw, 1.4rem);
  line-height: 1.3;
  color: #ffd98f;
}

.signature__by {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.signature em {
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-style: normal;
  font-size: 1.55em;
  margin-left: 0.15em;
  text-shadow: 0 2px 18px rgba(255, 190, 70, 0.3);
}

/* ------------------------------------------------------------- controles */

.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-b) + 1rem);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.9s, transform 0.7s var(--ease-soft) 0.9s, visibility 0s linear 0.9s;
}

body.done .controls { opacity: 1; visibility: visible; transform: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.62rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #ffe07a, #ffb52e);
  color: #3d2406;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255, 170, 40, 0.28);
  transition: transform 0.2s var(--ease-back), box-shadow 0.2s ease;
  text-decoration: none;
}

.btn:active { transform: scale(0.97); }

.btn--ghost {
  background: rgba(140, 200, 255, 0.12);
  color: var(--cream);
  border: 1px solid rgba(140, 220, 255, 0.35);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.btn--small { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.84rem; }

.btn--big { padding: 0.9rem 2rem; font-size: 1.02rem; }

/* -------------------------------------------------------------- portada */

.gate {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem calc(2rem + var(--safe-b));
  background: radial-gradient(90% 70% at 50% 45%, rgba(10, 8, 40, 0.55), rgba(4, 4, 22, 0.88));
  backdrop-filter: blur(3px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-soft);
}

.gate[hidden] { display: none; }
.gate.is-gone { opacity: 0; transform: scale(1.06); pointer-events: none; }

.gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: rise-soft 1s var(--ease-soft) both;
}

@keyframes rise-soft {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.gate__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #b9c6ff;
}

.gate__title {
  margin: 0 0 1.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 9vw, 3rem);
  line-height: 1.12;
}

.gate__for {
  margin: -0.5rem 0 1.6rem;
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  line-height: 1.1;
  color: #ffe27a;
  text-shadow: 0 2px 22px rgba(255, 190, 70, 0.35);
}

.gate__for[hidden] { display: none; }

.gate__hint {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* --------------------------------------------------------------- chispas */

.spark {
  position: fixed;
  z-index: 30;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd45e 45%, rgba(255, 200, 80, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: spark-up 1.3s ease-out forwards;
}

@keyframes spark-up {
  to { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 90px)) scale(0.2); opacity: 0; }
}

/* ------------------------------------------------------------- pantallas */

@media (min-width: 700px) {
  .scene { inset: 10vh 0 11vh; }
}

/* móviles cortos: el texto final y la flor se pelean por el sitio */
@media (max-height: 700px) {
  .kicker { font-size: 0.62rem; letter-spacing: 0.3em; margin-bottom: 1rem; }
  .name { font-size: clamp(2.2rem, 11vw, 3rem); }
  .note { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; }
  .signature { margin-top: 0.45rem; font-size: 1.45rem; }
  body.done .scene { transform: scale(0.7) translateY(6vh); }
}

/* móvil apaisado o pantallas muy bajas */
@media (max-height: 520px) {
  .scene { inset: 7vh 0 7vh; }
  .name { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .note { display: none; }
  .planet { width: min(26vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .nebula, .planet, .stars i, .pad-ring, .flower, .hud__dot { animation: none !important; }
  .scene { transition: none; }
}