/* =========================================================
   ANIMACIÓN DE PÉTALOS CAYENDO (DESDE LA PARTE SUPERIOR)
   ========================================================= */
.petals-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.petal {
  position: absolute;
  top: -30px;
  opacity: 0.8;
  will-change: transform;
  animation: fall linear infinite, sway ease-in-out infinite alternate;
}

@keyframes fall {
  0% {
    top: -30px;
  }
  100% {
    top: 105vh;
  }
}

@keyframes sway {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(70px) rotate(360deg);
  }
}



/* =========================================================
   ANIMACIÓN 3D REALISTA DE APERTURA DEL SOBRE
   ========================================================= */

/* Perspective 3D en el contenedor padre */
.envelope-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  perspective: 1200px; /* Otorga profundidad 3D realista */
}

.envelope {
  position: relative;
  width: 380px;
  height: 250px;
  background-color: #D6ADA8;
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(27, 30, 39, 0.18),
              0 4px 10px rgba(27, 30, 39, 0.08);
  transform-style: preserve-3d;
  transition: opacity 0.8s ease 1.3s, transform 0.8s ease 1.3s;
}

/* Configuración de las solapas y sus bisagras */
.flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s linear 0.35s;
}

/* Definición de la bisagra (transform-origin) de cada solapa */
.flap-top {
  background-color: var(--secondary-color);
  clip-path: polygon(0 0, 100% 0, 50% 54%);
  transform-origin: top center;
  z-index: 4;
}

.flap-bottom {
  background-color: #D1A5A0;
  clip-path: polygon(0 100%, 100% 100%, 50% 48%);
  transform-origin: bottom center;
  z-index: 3;
}

.flap-left {
  background-color: #E4C1BC;
  clip-path: polygon(0 0, 52% 50%, 0 100%);
  transform-origin: left center;
  z-index: 2;
}

.flap-right {
  background-color: #DFC0BB;
  clip-path: polygon(100% 0, 100% 100%, 48% 50%);
  transform-origin: right center;
  z-index: 2;
}

/* =========================================================
   SECUENCIA DE ANIMACIÓN AL HACER CLIC (.is-open)
   ========================================================= */

/* Paso 1: Ruptura y desvanecimiento del sello */
.envelope-wrapper.is-open .wax-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25) rotate(12deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

/* Paso 2: Solapa superior se dobla hacia arriba (180deg) */
.envelope-wrapper.is-open .flap-top {
  transform: rotateX(180deg);
  z-index: 1; /* Pasa detrás al abrirse */
  transition-delay: 0.25s;
}

/* Paso 3: Solapas laterales se abren hacia los lados */
.envelope-wrapper.is-open .flap-left {
  transform: rotateY(-180deg);
  transition-delay: 0.55s;
}

.envelope-wrapper.is-open .flap-right {
  transform: rotateY(180deg);
  transition-delay: 0.55s;
}

/* Paso 4: Solapa inferior se dobla hacia abajo */
.envelope-wrapper.is-open .flap-bottom {
  transform: rotateX(-180deg);
  transition-delay: 0.75s;
}

/* Paso 5: Desaparición suave del sobre vacío */
.envelope-wrapper.is-open .envelope {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  pointer-events: none;
}

/* Paso 6: Despliegue de la vista invitacion.php */
.invitation-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s, 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s, 
              visibility 0.8s ease 1.2s;
  z-index: 20;
}

.envelope-wrapper.is-open .invitation-view {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ==========================================
   NUEVO SISTEMA DE ANIMACIONES AL HACER SCROLL
   ========================================== */

/* Estado base oculto para los elementos que se van a animar */
.scroll-animate {
  opacity: 0;
  will-change: opacity, transform;
  /* La duración general de la animación */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* Calculamos el retardo basado en la variable --delay (cada unidad = 0.15s) */
  transition-delay: calc(var(--delay, 0) * 0.15s);
}

/* --- Direcciones de animación --- */

/* De abajo hacia arriba (Por defecto para tarjetas, textos, etc) */
.fade-up {
  transform: translateY(50px);
}

/* De izquierda a derecha */
.fade-left {
  transform: translateX(-50px);
}

/* De derecha a izquierda */
.fade-right {
  transform: translateX(50px);
}

/* Zoom (Ideal para los separadores botánicos o escudos) */
.zoom-in {
  transform: scale(0.85);
}

/* --- Estado Activado (Clase inyectada por JavaScript) --- */
.scroll-animate.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Reducir o eliminar retrasos en móviles para evitar que la pantalla parezca vacía al hacer scroll rápido */
@media (max-width: 768px) {
  .scroll-animate {
    transition-delay: calc(var(--delay, 0) * 0.05s) !important;
  }
}