/* ═══════════════════════════════════════════════════════════════
   AUVIEPHY INSTITUTE · animations.css
   Reusable animation system — drop any class on any element.
   GSAP handles scroll-triggered animations (see main.js).
   These classes handle entrance, hover, and ambient effects.
   ═══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ── */
@keyframes ai-fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes ai-slide-up  { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes ai-slide-left{ from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:translateX(0); } }
@keyframes ai-slide-right{ from{ opacity:0; transform:translateX(36px); }  to { opacity:1; transform:translateX(0); } }
@keyframes ai-scale-up  { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes ai-cosmic-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-10px) rotate(0.8deg); }
  66%  { transform: translateY(-5px)  rotate(-0.8deg); }
}
@keyframes ai-glow-pulse {
  from { box-shadow: 0 0 20px rgba(124,58,237,0.15), 0 0 0 1px rgba(196,154,74,0.1); }
  to   { box-shadow: 0 0 40px rgba(196,154,74,0.25), 0 0 0 1px rgba(196,154,74,0.2); }
}
@keyframes ai-gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ════════════════════════════════════════
   ENTRANCE ANIMATIONS
   Add .anim-* + optional .anim-delay-N
   ════════════════════════════════════════ */

.anim-fade-in    { animation: ai-fade-in  0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.anim-slide-up   { animation: ai-slide-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.anim-slide-left { animation: ai-slide-left  0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.anim-slide-right{ animation: ai-slide-right 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.anim-scale-up   { animation: ai-scale-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both; }

/* Animation delay utilities */
.anim-delay-1 { animation-delay: 0.10s; }
.anim-delay-2 { animation-delay: 0.20s; }
.anim-delay-3 { animation-delay: 0.30s; }
.anim-delay-4 { animation-delay: 0.40s; }
.anim-delay-5 { animation-delay: 0.55s; }
.anim-delay-6 { animation-delay: 0.70s; }
.anim-delay-7 { animation-delay: 0.85s; }
.anim-delay-8 { animation-delay: 1.00s; }
.anim-delay-9 { animation-delay: 1.20s; }

/* Stagger children — apply to parent, all children animate in sequence */
.stagger-children > * {
  opacity: 0;
  animation: ai-slide-up 0.7s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.22s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.34s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.46s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.58s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.70s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.82s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.94s; }
.stagger-children > *:nth-child(9) { animation-delay: 1.06s; }

/* ════════════════════════════════════════
   HOVER EFFECTS
   ════════════════════════════════════════ */

/* Gold glow on hover — for cards, panels */
.hover-glow {
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.35s,
              border-color 0.35s;
}
.hover-glow:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(124,58,237,0.18),
              0 0 0 1px rgba(196,154,74,0.22);
}

/* Purple glow — stronger cosmic variant */
.hover-glow-purple:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(124,58,237,0.25),
              0 0 40px rgba(79,70,229,0.15),
              0 0 0 1px rgba(196,154,74,0.2);
}

/* Gold glow — warm luxury variant */
.hover-glow-gold:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(196,154,74,0.25),
              0 0 0 1px rgba(196,154,74,0.3);
}

/* ════════════════════════════════════════
   AMBIENT / CONTINUOUS ANIMATIONS
   ════════════════════════════════════════ */

.anim-float {
  animation: ai-cosmic-float 7s ease-in-out infinite;
}

/* Glow pulse — for icons, badges, highlights */
.anim-glow-pulse {
  animation: ai-glow-pulse 3s ease-in-out infinite alternate;
}

/* Gold text shimmer */
.anim-gold-shimmer {
  background: linear-gradient(90deg, #C49A4A 0%, #E0C07A 40%, #C49A4A 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ai-gold-shimmer 4s ease-in-out infinite;
}

/* ════════════════════════════════════════
   SECTION WRAPPER HELPERS
   ════════════════════════════════════════ */

/* Cosmic section — dark bg with ambient glow */
.section-cosmic {
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.section-cosmic::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.section-cosmic::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse, rgba(196,154,74,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Light section with subtle texture */
.section-warm {
  background: var(--warm);
  position: relative;
}

/* ════════════════════════════════════════
   GLOW CARD — self-contained glowing card
   ════════════════════════════════════════ */
.glow-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,154,74,0.15);
  border-radius: 4px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, background 0.4s,
              transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196,154,74,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.glow-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(124,58,237,0.7));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.glow-card:hover {
  border-color: rgba(196,154,74,0.35);
  background: rgba(255,255,255,0.06);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4),
              0 0 0 1px rgba(196,154,74,0.18),
              0 0 40px rgba(124,58,237,0.08);
}
.glow-card:hover::before { opacity: 1; }
.glow-card:hover::after  { transform: scaleX(1); }

/* ════════════════════════════════════════
   SCROLL-DRIVEN ENTRANCE (JS-assisted)
   These match the .reveal system in style.css,
   giving JS a second set of classes to trigger.
   ════════════════════════════════════════ */
.enter-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94);
}
.enter-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in, .anim-slide-up, .anim-slide-left,
  .anim-slide-right, .anim-scale-up,
  .anim-float, .anim-glow-pulse, .anim-gold-shimmer,
  .stagger-children > *,
  .enter-on-scroll {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}