/* ═══════════════════════════════════════════════════════════
   IEEE UJ-AQ — Animation System
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll Reveal Variants ── */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-on-scroll {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 700ms var(--ease-out-expo) var(--delay, 0ms),
    transform 700ms var(--ease-out-expo) var(--delay, 0ms);
}

.reveal-up,
.reveal-on-scroll { transform: translateY(40px); }
.reveal-down { transform: translateY(-40px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.88); }

.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ── Stagger Children ── */
.stagger-children > *:nth-child(1)  { --delay:  0ms; }
.stagger-children > *:nth-child(2)  { --delay:  80ms; }
.stagger-children > *:nth-child(3)  { --delay: 160ms; }
.stagger-children > *:nth-child(4)  { --delay: 240ms; }
.stagger-children > *:nth-child(5)  { --delay: 320ms; }
.stagger-children > *:nth-child(6)  { --delay: 400ms; }
.stagger-children > *:nth-child(7)  { --delay: 480ms; }
.stagger-children > *:nth-child(8)  { --delay: 560ms; }
.stagger-children > *:nth-child(9)  { --delay: 640ms; }
.stagger-children > *:nth-child(10) { --delay: 720ms; }

/* ── Text Reveal ── */
.text-reveal {
  clip-path: inset(0 100% 0 0);
  animation: textReveal 800ms var(--ease-out-expo) forwards;
  animation-delay: var(--delay, 200ms);
}
@keyframes textReveal {
  to { clip-path: inset(0 0 0 0); }
}

/* ── Parallax ── */
.parallax-layer {
  transform: translateY(calc(var(--parallax-y, 0) * 1px));
  will-change: transform;
  transition: transform 100ms linear;
}

/* ── 3D Tilt ── */
.tilt-3d {
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-smooth);
}
.tilt-3d:hover {
  box-shadow: var(--shadow-elevated);
}

/* ── Magnetic Hover ── */
.magnetic {
  transition: transform 300ms var(--ease-spring);
}

/* ── Hover Lift ── */
.hover-lift {
  transition: transform 400ms var(--ease-spring), box-shadow 400ms var(--ease-smooth);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
}

/* ── Glow Card ── */
.glow-card {
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    var(--glow-blue) 10%,
    transparent 20%,
    var(--glow-gold) 45%,
    transparent 55%,
    var(--glow-cyan) 70%,
    transparent 80%
  );
  opacity: 0;
  z-index: -2;
  transition: opacity 400ms var(--ease-smooth);
  animation: glowRotate 4s linear infinite;
}
.glow-card:hover::before { opacity: 1; }
.glow-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--gradient-card);
  z-index: -1;
}
[data-theme="dark"] .glow-card::after {
  background: var(--nt-surface);
}

/* ── Float Slow ── */
.float-slow { animation: floatSlow 6s ease-in-out infinite; }

/* ── Shimmer Effect ── */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmerSlide 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Pulse Glow ── */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ── Icon Spin on Hover ── */
.icon-hover-spin:hover i,
.icon-hover-spin:hover .bi {
  animation: iconSpin 500ms var(--ease-spring);
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-18px) translateZ(10px); }
}
@keyframes orbitRotate {
  to { transform: rotate(360deg); }
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px var(--glow-blue); }
  50%      { box-shadow: 0 0 40px var(--glow-blue), 0 0 60px var(--glow-cyan); }
}
@keyframes glowRotate {
  to { --glow-angle: 360deg; }
}
@keyframes iconSpin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes slideInBlur {
  from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
@keyframes float3D {
  0%, 100% { transform: translateZ(0) rotateX(0); }
  50%      { transform: translateZ(20px) rotateX(2deg); }
}
@keyframes bounceScale {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes dashDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Register custom property for conic animation ── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-scale, .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
  .parallax-layer { transform: none !important; }
}