/* ==========================================================================
   Para ti — estilos
   Los colores y las fuentes se cambian en :root (ver README).
   ========================================================================== */

@font-face {
  font-family: "Dancing Script";
  src: url("../vendor/fonts/dancing-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../vendor/fonts/dancing-script-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../vendor/fonts/nunito-sans-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../vendor/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cielo */
  --night-top: #070d14;
  --night-bottom: #0f2027;

  /* Acentos */
  --gold: #f5b800;
  --gold-light: #ffd23f;
  --leaf-dark: #1f6b3a;
  --leaf: #2e8b4f;
  --cream: #fff4d6;

  /* Girasol (lo usan los SVG y las partículas) */
  --petal-back: var(--gold);
  --petal-back-edge: #c98f00;
  --petal-front: var(--gold-light);
  --stem: var(--leaf-dark);
  --stem-light: var(--leaf);

  /* Tipografía */
  --font-script: "Dancing Script", "Segoe Script", "Snell Roundhand", cursive;
  --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 1 unidad de alto de pantalla (dvh cuando existe, para que no se corte en iPhone) */
  --vh: 1vh;
  --bq-h: calc(var(--vh) * 76);      /* alto del ramo */
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}
@media (min-width: 900px) {
  :root { --bq-h: calc(var(--vh) * 80); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night-top);
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-bottom) 100%);
  color: var(--cream);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* ---------- Estrellas (CSS puro; las sombras las genera main.js) ---------- */
.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;               /* suaves antes del toque; main.js las enciende */
}
.sky__layer {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  will-change: opacity;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* ---------- Estrellas fugaces ---------- */
.shooters {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.shoot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--len, 130px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 244, 214, 0.95));
  transform-origin: 100% 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: shoot var(--time, 1.2s) cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}
.shoot::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 210, 63, 0.75);
}
@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--a)) scaleX(0.35);
  }
  15% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) rotate(var(--a)) scaleX(1);
  }
}

/* ---------- Resplandor cálido tras el ramo ---------- */
.glow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--vh) * 70);
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(245, 184, 0, 0.16), rgba(245, 184, 0, 0) 70%);
  pointer-events: none;
  opacity: 0;
}

/* ---------- Ramo ---------- */
.bouquet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(100vw, calc(var(--bq-h) * 0.6667));
  aspect-ratio: 2 / 3;
  pointer-events: none;
}
.layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.stem {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}

/* ---------- Partículas ---------- */
.pcanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.pcanvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
#fireflies { z-index: 5; }
#petals    { z-index: 6; }

/* ---------- Mensaje ---------- */
.scrim {
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--vh) * 44);
  background: radial-gradient(ellipse 95% 75% at 50% 32%, rgba(7, 13, 20, 0.62), rgba(7, 13, 20, 0) 78%);
  pointer-events: none;
  opacity: 0;
}
.message {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--vh) * 6);
  height: calc(var(--vh) * 24);
  padding-inline: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.line {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 34rem;
  padding-inline: inherit;
  display: grid;
  place-items: center;
  text-align: center;
  font: 400 clamp(1.85rem, 8vw, 3.1rem) / 1.22 var(--font-script);
  color: var(--cream);
  text-shadow: 0 2px 16px rgba(7, 13, 20, 0.95), 0 0 3px rgba(7, 13, 20, 0.7);
  text-wrap: balance;
  opacity: 0;
}
.line--final {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--gold-light);
  font-weight: 600;
}
.final__date {
  font: 300 clamp(0.9rem, 3.6vw, 1.1rem) / 1.4 var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(7, 13, 20, 0.95);
  opacity: 0;
}

/* ---------- Controles ---------- */
.controls {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.btn {
  pointer-events: auto;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  font: 300 0.85rem / 1 var(--font-ui);
  letter-spacing: 0.05em;
  color: var(--cream);
  background: rgba(7, 13, 20, 0.6);
  border: 1px solid rgba(255, 244, 214, 0.32);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.btn:hover,
.btn:focus-visible {
  border-color: var(--gold-light);
  background: rgba(15, 32, 39, 0.85);
}
.btn:focus-visible,
.start__btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ---------- Escena 1: inicio ---------- */
.start {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
}
.start.gone { display: none; }
.start > * { grid-area: 1 / 1; }

.start__btn {
  position: relative;
  min-height: 54px;
  padding: 1rem 2.2rem;
  font: 300 1.1rem / 1.2 var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--cream);
  background: rgba(245, 184, 0, 0.09);
  border: 1px solid rgba(255, 210, 63, 0.75);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.start__btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold-light);
  border-radius: inherit;
  opacity: 0;
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);        opacity: 0.55; }
  100% { transform: scale(1.22, 1.5); opacity: 0; }
}

.loader { display: flex; gap: 10px; }
.loader span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0.2;
  animation: dot 1.2s ease-in-out infinite;
}
.loader span:nth-child(2) { animation-delay: 0.2s; }
.loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.95; }
}

.noscript {
  position: fixed;
  z-index: 60;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--night-top);
  color: var(--cream);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .sky__layer { animation: none; opacity: 0.8; }
  .start__btn::before { animation: none; }
  .loader span { animation: none; opacity: 0.7; }
  .shooters { display: none; }
}