body {
  background-color: #2e1065;
  color: #ffffff;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23fcd34d"><path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z"/></svg>')
      12 12,
    auto;
}

/* --- OPTIMIZACIÓN DE ALETEO (GPU FORCE) --- */
@keyframes flap-l {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-70deg);
  }
}
@keyframes flap-r {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(70deg);
  }
}

/* Las alas ahora tienen will-change para que el móvil las priorice */
.wing-left {
  animation: flap-l 2s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform; /* CRÍTICO PARA MÓVIL */
  transform: translateZ(0);
}
.wing-right {
  animation: flap-r 2s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform; /* CRÍTICO PARA MÓVIL */
  transform: translateZ(0);
}

/* Al volar, el aleteo se acelera drásticamente */
.animate-fly-away .wing-left {
  animation-duration: 0.15s;
}
.animate-fly-away .wing-right {
  animation-duration: 0.15s;
}

.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  );
  background-size: 50px 50px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.sparkle {
  position: absolute;
  background: radial-gradient(circle, #fff, #fcd34d);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 9999;
  will-change: transform, opacity;
  animation: fadeOut 1s linear forwards;
}
@keyframes fadeOut {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.text-glow {
  text-shadow:
    0 0 10px rgba(216, 180, 254, 0.5),
    0 0 20px rgba(216, 180, 254, 0.3);
}
.text-glow-gold {
  text-shadow:
    0 0 10px #fcd34d,
    0 0 20px #d97706;
}
.section-hidden {
  display: none !important;
}
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.2s ease-out;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#lightbox-modal {
  background-color: rgba(18, 4, 36, 0.98);
}

.rotate-mobile {
  transform: rotate(90deg);
  width: 100vh !important;
  height: 100vw !important;
  max-width: 100vh !important;
  max-height: 100vw !important;
  object-fit: contain;
  margin: 0;
  padding: 0;
}

.btn-fairy {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #fcd34d;
  color: #fcd34d;
  font-family: "Cinzel Decorative", cursive;
  letter-spacing: 0.1em;
  padding: 1rem 3rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.1);
}
.btn-fairy:hover {
  background: rgba(252, 211, 77, 0.2);
  box-shadow: 0 0 20px rgba(252, 211, 77, 0.4);
  transform: scale(1.05);
  color: #fff;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}