/* Animaciones de entrada */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes bounceIn {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.animate-fade-in { animation: fadeIn 1s ease; }
.animate-slide-in { animation: slideIn 1.2s cubic-bezier(.68,-0.55,.27,1.55); }
.animate-bounce-in { animation: bounceIn 1.1s cubic-bezier(.68,-0.55,.27,1.55); }
.animate-fade-in-delay { animation: fadeIn 1.2s 0.5s ease both; }
.animate-fade-in-delay2 { animation: fadeIn 1.2s 0.9s ease both; }
.animate-fade-in-delay3 { animation: fadeIn 1.2s 1.3s ease both; }

/* Bandera ondeando (logo One Piece) */
@keyframes flagWave {
  0% { transform: rotateZ(-2deg) skewY(-2deg); }
  50% { transform: rotateZ(2deg) skewY(2deg) scaleY(1.04); }
  100% { transform: rotateZ(-2deg) skewY(-2deg); }
}
.flag-wave {
  animation: flagWave 2.5s infinite linear;
  transform-origin: left center;
}

/* Fondo animado de olas */
.wave {
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  background-repeat: repeat-x;
  opacity: 0.5;
  z-index: -1;
}
.wave1 {
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%230099ff" fill-opacity="0.3" d="M0,160L60,170.7C120,181,240,203,360,197.3C480,192,600,160,720,133.3C840,107,960,85,1080,101.3C1200,117,1320,171,1380,197.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
  animation: waveMove 12s linear infinite;
}
.wave2 {
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23fbbf24" fill-opacity="0.2" d="M0,224L60,197.3C120,171,240,117,360,117.3C480,117,600,171,720,197.3C840,224,960,224,1080,197.3C1200,171,1320,117,1380,90.7L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
  animation: waveMove 18s linear reverse infinite;
}
@keyframes waveMove {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

/* Burbujas animadas */
.bubble-particle {
  position: fixed;
  bottom: -40px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #fff 70%, #99e0ff 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: bubbleUp linear infinite;
}
@keyframes bubbleUp {
  0% { transform: translateY(0) scale(0.7); }
  80% { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

/* Confeti animado */
.confetti-piece {
  position: fixed;
  top: -20px;
  z-index: 5;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotateZ(0deg); }
  80% { opacity: 1; }
  100% { transform: translateY(110vh) rotateZ(360deg); opacity: 0; }
}

/* Fondo Nightmare Before Christmas */
.nightmare-moon {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at 60% 40%, #fffde4 80%, #f3e7ca 100%, transparent 100%);
  border-radius: 50%;
  opacity: 0.18;
  z-index: 0;
}
.nightmare-fog {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to top, #d1c4e9 0%, #6d28d9 60%, transparent 100%);
  opacity: 0.18;
  z-index: 0;
}

.nightmare-logo {
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 8px #a78bfa);
}

body, .font-sans {
  font-family: 'UnifrakturCook', cursive, sans-serif;
}

#bg-fondo {
  background: url('../img/fondo.jpg') center center / 150% auto no-repeat;
  width: 100vw;
  height: 100vh;
  will-change: background-position;
  animation: fondoMove 48s linear infinite alternate;
}
@keyframes fondoMove {
  0% { background-position: 30% 2px; }
  50% { background-position: 70% 0px; }
  100% { background-position: 30% 2px; }
}

.fog-bg {
  background: radial-gradient(ellipse at 40% 80%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 60%, transparent 100%),
              radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 60%, transparent 100%);
  mix-blend-mode: lighten;
  animation: fogMove 60s linear infinite alternate;
  mask-image: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,120 Q240,60 480,120 T960,60 T1440,120 V200 H0 Z" fill="white"/><rect y="120" width="1440" height="80" fill="white"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,120 Q240,60 480,120 T960,60 T1440,120 V200 H0 Z" fill="white"/><rect y="120" width="1440" height="80" fill="white"/></svg>');
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
@keyframes fogMove {
  0% { background-position: 0% 100%, 100% 0%; }
  100% { background-position: 100% 0%, 0% 100%; }
}

@media (max-width: 768px) {
  #bg-fondo {
    background-size: cover !important;
    background-position: center center !important;
  }
}

.heartbeat {
  animation: heartbeat 1.1s infinite;
}
@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.08); }
  20% { transform: scale(0.95); }
  30% { transform: scale(1.05); }
  40% { transform: scale(0.97); }
  50% { transform: scale(1); }
  100% { transform: scale(1); }
}

.animate-spin-slow {
  animation: spin 3.5s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

.pulse-lento {
  animation: heartbeat 2.5s infinite;
}

/* Notitas musicales animadas */
@keyframes floatNote1 {
  0% { transform: translateY(0) rotate(-10deg); opacity: 1; }
  50% { transform: translateY(-18px) rotate(10deg); opacity: 0.8; }
  100% { transform: translateY(0) rotate(-10deg); opacity: 1; }
}
@keyframes floatNote2 {
  0% { transform: translateY(0) rotate(8deg); opacity: 1; }
  50% { transform: translateY(-12px) rotate(-8deg); opacity: 0.7; }
  100% { transform: translateY(0) rotate(8deg); opacity: 1; }
}
@keyframes floatNote3 {
  0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  50% { transform: translateY(-8px) scale(1.2) rotate(20deg); opacity: 0.6; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.note1 { animation: floatNote1 1.6s ease-in-out infinite; }
.note2 { animation: floatNote2 1.2s ease-in-out infinite; }
.note3 { animation: floatNote3 1.8s ease-in-out infinite; }

.swal-montserrat {
  font-family: 'Montserrat', Arial, sans-serif !important;
}