@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* Reset and Custom Base Styles */
body {
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  background-color: #FAF6F0; /* Soft Ivory/Pastel Background */
  color: #333333;
}

.fondo-tela-pliegues {
  /* Color base marfil cálido del evento (coordinado) */
  background-color: #FAF6F0; 
  
  background-image:
    /* 1. Micro-textura de hilo cruzado (ruido visual sutil) */
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* 2. Deformación sutil (rompe la rectitud perfecta artificial) */
    linear-gradient(
      94deg,
      transparent 10%,
      rgba(0, 0, 0, 0.02) 25%,
      rgba(255, 255, 255, 0.7) 45%,
      transparent 65%
    ),
    /* 3. Arrugas verticales principales (Valles oscuros y picos iluminados) */
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(0, 0, 0, 0.05) 15%,     /* Sombra profunda */
      rgba(255, 255, 255, 0.8) 28%,
      rgba(0, 0, 0, 0.03) 40%,     /* Sombra media */
      rgba(255, 255, 255, 0.95) 55%, /* Brillo alto (satín) */
      rgba(0, 0, 0, 0.06) 70%,     /* Sombra profunda */
      rgba(255, 255, 255, 0.7) 85%,
      rgba(0, 0, 0, 0.02) 92%,
      rgba(255, 255, 255, 0.9) 100%
    );

  /* Asignación de escalas por capa */
  background-size: 
    4px 4px,     /* Escala de la textura base */
    120% 100%,   /* Ensanchamiento del ángulo de deformación */
    100% 100%;   /* Escala completa para las arrugas verticales */

  /* Propiedades de comportamiento */
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed; /* Mantiene las arrugas estáticas al hacer scroll */
}

/* Custom Font Utilities */
.font-serif-elegant {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-script-elegant {
  font-family: 'Pinyon Script', cursive;
}

.font-sans-clean {
  font-family: 'Montserrat', sans-serif;
}

.font-display-caps {
  font-family: 'Cinzel', serif;
}

/* Custom Colors & Gradients */
.bg-ivory {
  background-color: #fdfbf7;
}

.bg-rose-gold-light {
  background-color: #f9ebea;
}

.text-gold {
  color: #c5a059;
}

.text-gold-light {
  color: #dfb15b;
}

.bg-gold-accent {
  background-color: #c5a059;
}

.border-gold {
  border-color: #c5a059;
}

.bg-rose-gold-gradient {
  background: linear-gradient(135deg, #e8c3b9 0%, #f7dcd3 50%, #e8c3b9 100%);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #dfb15b 0%, #c5a059 50%, #dfb15b 100%);
}

.bg-section-fit {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Transition Helpers for Scroll Animations (Section 4) */
.fade-up-hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.fade-up-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Overlays (Section 2) */
.overlay-dark {
  background-color: rgba(0, 0, 0, 0.55);
}

.overlay-theme {
  background-color: rgba(43, 26, 23, 0.65); /* Deep warm rose overlay */
}

/* Particle System (Section 2) */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.particle {
  position: absolute;
  display: block;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  animation: fall linear infinite;
}

/* Petal animations */
@keyframes fall {
  0% {
    transform: translateY(-20px) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(105vh) rotate(360deg) translateX(50px);
    opacity: 0;
  }
}

/* Sparkle/Sparkle animation */
.sparkle-particle {
  background: radial-gradient(circle, rgba(223, 177, 91, 0.9) 0%, rgba(223, 177, 91, 0) 70%);
  border-radius: 50%;
  animation: float-sparkle linear infinite;
}

@keyframes float-sparkle {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10%) scale(1.2);
    opacity: 0;
  }
}

/* 3D Envelope Intro Card (Section 1) */
.envelope-card {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
  transform-style: preserve-3d;
}

.envelope-card:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
  box-shadow: 0 25px 50px -12px rgba(184, 115, 51, 0.25);
}

/* Interactive envelope ribbon shape */
.ribbon-svg {
  filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.1));
  animation: float-ribbon 3s ease-in-out infinite;
}

@keyframes float-ribbon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Circular Button Pulse */
.btn-pulse {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(197, 160, 89, 0);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #fdfbf7;
}
::-webkit-scrollbar-thumb {
  background: #c5a059;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a98542;
}

/* Timeline Custom Styles (Section 4) */
.timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #f7dcd3, #f472b6, #f7dcd3);
  z-index: 10;
}

@media (max-width: 768px) {
  .timeline-line {
    left: 20px;
    transform: none;
  }
}

/* Form Styling */
.form-input {
  background-color: transparent;
  border-bottom: 2px solid rgba(197, 160, 89, 0.3);
  color: #ffffff;
  padding: 10px 5px;
  width: 100%;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-bottom: 2px solid #c5a059;
}

.form-select {
  background-color: #262626;
  border-bottom: 2px solid rgba(197, 160, 89, 0.3);
  color: #ffffff;
  padding: 10px 5px;
  width: 100%;
  transition: border-color 0.3s ease;
}

.form-select:focus {
  outline: none;
  border-bottom: 2px solid #c5a059;
}

/* Pulse animation for Music Floating Button */
.music-btn-playing {
  animation: music-spin 10s linear infinite;
}

@keyframes music-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Global SVG Theme Overrides (Request: "Rosa Clarito" everywhere) */
svg path[fill="#fbc4b6"] { fill: #ffe3e8 !important; }
svg path[fill="#fca190"] { fill: #ffccd5 !important; }
svg path[fill="#f87c6b"] { fill: #ffaab9 !important; }
svg circle[fill="#d4af37"] { fill: #ffd6db !important; }

/* Bow SVGs inside dividers */
svg path[fill="#f7dcd3"] { fill: #ffeef2 !important; }
svg path[stroke="#e8c3b9"] { stroke: #ffccd5 !important; }
svg rect[fill="#e8c3b9"] { fill: #ffccd5 !important; }
svg rect[stroke="#d4af37"] { stroke: #ffb3c1 !important; }

/* Welcome Card Ribbon/Bow */
svg path[stroke="#c5a059"] { stroke: #ffccd5 !important; }
svg circle[fill="#c5a059"] { fill: #ffb3c1 !important; }