/* ============================================================
   EL ORÁCULO DEL NILO — animations.css v22
   Compatible con todos los dispositivos (móvil, tablet, desktop)
   ============================================================ */

/* ── Keyframes de entrada (scroll-reveal) ── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Keyframes continuos ── */
@keyframes heroGlow {
  0%, 100% { text-shadow: 0 4px 30px rgba(212,175,55,0.4), 0 0 60px rgba(212,175,55,0.1); }
  50%       { text-shadow: 0 4px 40px rgba(212,175,55,0.85), 0 0 100px rgba(212,175,55,0.35); }
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Caida zodiacal: solo transform (GPU, funciona en todos los browsers y dispositivos) */
@keyframes zodiacFall {
  0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   scale(0.7); }
  8%   { opacity: 0.75; }
  92%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(110vh) rotate(540deg) scale(1.1); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.5; }
  50%       { transform: translateX(-50%) translateY(7px); opacity: 1; }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 4px 20px rgba(212,175,55,0.15); }
  50%       { box-shadow: 0 4px 32px rgba(212,175,55,0.5), 0 0 50px rgba(212,175,55,0.2); }
}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL
   El JS añade .visible cuando entran en el viewport
═══════════════════════════════════════════════════ */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}
.reveal       { transform: translateY(30px); }
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(0.92); }

.reveal.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-right.visible {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-scale.visible {
  opacity: 1; transform: scale(1);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Compatibilidad con .fade-in existente */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Stagger delays */
.stagger-1  { transition-delay: 0.04s; }
.stagger-2  { transition-delay: 0.10s; }
.stagger-3  { transition-delay: 0.16s; }
.stagger-4  { transition-delay: 0.22s; }
.stagger-5  { transition-delay: 0.28s; }
.stagger-6  { transition-delay: 0.34s; }
.stagger-7  { transition-delay: 0.40s; }
.stagger-8  { transition-delay: 0.46s; }
.stagger-9  { transition-delay: 0.52s; }
.stagger-10 { transition-delay: 0.58s; }
.stagger-11 { transition-delay: 0.64s; }
.stagger-12 { transition-delay: 0.70s; }

/* ═══════════════════════════════════════════════════
   CAPA DE SIGNOS ZODIACALES
   #zodiac-layer es un div fixed insertado por JS.
   Los .zodiac-sign son position:absolute dentro de él
   y se animan SOLO con transform (compatible móvil).
═══════════════════════════════════════════════════ */
#zodiac-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.zodiac-sign {
  position: absolute;
  top: -80px;
  pointer-events: none;
  color: rgba(212,175,55,0.6);
  text-shadow: 0 0 10px rgba(212,175,55,0.45);
  animation: zodiacFall linear forwards;
  font-style: normal;
  line-height: 1;
  user-select: none;
  will-change: transform, opacity;
}

/* ── Hero ── */
.hero-title {
  animation: heroGlow 4s ease-in-out infinite;
}
.hero-astro-deco svg {
  animation: orbitSpin 120s linear infinite;
  transform-origin: 50% 50%;
}
.hero-scroll {
  animation: scrollBounce 2.2s ease-in-out infinite !important;
}

/* ── Cards glow ── */
.service-card.visible {
  animation: pulseGold 3.5s ease-in-out infinite;
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .fade-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .zodiac-sign, .hero-astro-deco svg { animation: none !important; }
  .hero-title { animation: none !important; }
  #zodiac-layer { display: none; }
}