/* ============================================================
   PALETAS DE COLOR — 4 opciones intercambiables vía [data-theme]
   Cada paleta define los 5 tokens hex (para uso directo en CSS)
   y su equivalente "R G B" (para que Tailwind pueda aplicar
   opacidad con clases tipo bg-accent/40).
   Cambiar de paleta = cambiar data-theme en <html>, nada más.
   ============================================================ */

/* Fallback antes de que el JS aplique data-theme (= Opción 1) */
:root,
[data-theme="1"] {
  --bg-primary: #FFFDF7;
  --accent: #C9A24B;
  --text-primary: #5C1A2B;
  --divider: #8C3A4D;
  --contrast: #2B0A12;

  --bg-primary-rgb: 255 253 247;
  --accent-rgb: 201 162 75;
  --text-primary-rgb: 92 26 43;
  --divider-rgb: 140 58 77;
  --contrast-rgb: 43 10 18;
}

/* Opción 2 — Champagne + bordó + oro rosado */
[data-theme="2"] {
  --bg-primary: #FBF6EE;
  --accent: #B8860B;
  --text-primary: #6B1B2E;
  --divider: #D4AF37;
  --contrast: #3D0C1A;

  --bg-primary-rgb: 251 246 238;
  --accent-rgb: 184 134 11;
  --text-primary-rgb: 107 27 46;
  --divider-rgb: 212 175 55;
  --contrast-rgb: 61 12 26;
}

/* Opción 3 — Blanco puro + dorado brillante + bordó intenso (gala clásica) */
[data-theme="3"] {
  --bg-primary: #FFFFFF;
  --accent: #D4AF37;
  --text-primary: #800020;
  --divider: #E8C9A0;
  --contrast: #4A0E1F;

  --bg-primary-rgb: 255 255 255;
  --accent-rgb: 212 175 55;
  --text-primary-rgb: 128 0 32;
  --divider-rgb: 232 201 160;
  --contrast-rgb: 74 14 31;
}

/* Opción 4 — Dramática / premium */
[data-theme="4"] {
  --bg-primary: #FFFDF9;
  --accent: #CFA85E;
  --text-primary: #7A0C2E;
  --divider: #E5D5B8;
  --contrast: #1C1C1C;

  --bg-primary-rgb: 255 253 249;
  --accent-rgb: 207 168 94;
  --text-primary-rgb: 122 12 46;
  --divider-rgb: 229 213 184;
  --contrast-rgb: 28 28 28;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a revealed section slightly */
.reveal:nth-of-type(2) { transition-delay: 0.1s; }
.reveal:nth-of-type(3) { transition-delay: 0.2s; }

::selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

/* Smooth scrolling for anchor/CTA use */
html {
  scroll-behavior: smooth;
}

/* Custom radio focus ring softened to match palette */
input[type="radio"]:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Portada (landing gate) fade-out on dismiss */
#portada.portada-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Lock background scroll while the portada or a modal is open */
body.no-scroll {
  overflow: hidden;
}

/* Lluvia de estrellas — fondo decorativo sutil en la sección de Regalos */
.estrella {
  position: absolute;
  top: -5%;
  left: var(--estrella-left, 50%);
  width: var(--estrella-size, 5px);
  height: var(--estrella-size, 5px);
  background: var(--estrella-color, #A86A65);
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  opacity: 0;
  animation: caer-estrella var(--estrella-duration, 10s) linear var(--estrella-delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes caer-estrella {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: var(--estrella-opacity, 0.45);
  }
  85% {
    opacity: var(--estrella-opacity, 0.45);
  }
  100% {
    transform: translateY(var(--estrella-caida, 420px)) translateX(var(--estrella-deriva, 20px));
    opacity: 0;
  }
}

/* Reveal escalonado de la sección Fiesta (fade-in + slide-up por elemento) */
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover suave en los botones de la sección Fiesta */
.btn-evento {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-evento:hover {
  background-color: #A86A65; /* Copper Rose */
  color: #FDF8F3;
  transform: translateY(-2px);
}

.btn-evento:active {
  transform: translateY(0);
}

/* Respiración leve en el botón principal ("Agregar al calendario") */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.btn-principal {
  animation: breathe 4s ease-in-out infinite;
}

.btn-principal:hover {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .estrella {
    animation: none;
    display: none;
  }

  .reveal-item,
  .btn-principal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Modals: simple scale-in when shown */
.modal .modal-panel {
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.modal.flex .modal-panel {
  transform: scale(1);
  opacity: 1;
}