/* ============================================================
   MIRZAPUR CITY PORTAL — ANIMATIONS
   Scroll-reveal, orb drift, keyframes, parallax, micro-motion
   ============================================================ */

/* ─── Keyframes ─────────────────────────────────────────────── */

@keyframes orbDriftGold {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, 60px) scale(1.1); }
  66%  { transform: translate(-40px, 100px) scale(0.95); }
  100% { transform: translate(60px, -30px) scale(1.05); }
}

@keyframes orbDriftBlue {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-90px, -70px) scale(1.15); }
  75%  { transform: translate(50px, -40px) scale(0.9); }
  100% { transform: translate(-30px, 60px) scale(1.08); }
}

@keyframes orbDriftMaroon {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, 80px) scale(1.2); }
  100% { transform: translate(40px, -50px) scale(0.9); }
}

@keyframes heroZoom {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.12); }
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--gold-glow); }
  50%       { box-shadow: 0 0 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.2); }
}

@keyframes glowPulseBlue {
  0%, 100% { box-shadow: 0 0 20px var(--blue-glow); }
  50%       { box-shadow: 0 0 40px rgba(78, 169, 216, 0.4), 0 0 80px rgba(78, 169, 216, 0.15); }
}

@keyframes diyaFlicker {
  0%, 100% { opacity: 0.18; }
  20%       { opacity: 0.22; }
  40%       { opacity: 0.15; }
  60%       { opacity: 0.20; }
  80%       { opacity: 0.17; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--glass-border); }
  50%       { border-color: var(--glass-border-gold); }
}

@keyframes typeWriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes cursorBlink {
  0%, 100% { border-color: var(--gold-main); }
  50%       { border-color: transparent; }
}

@keyframes statCount {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes waveMove {
  0%   { d: path("M0,30 Q160,10 320,30 T640,30 T960,30 T1280,30 L1280,80 L0,80 Z"); }
  50%  { d: path("M0,50 Q160,20 320,50 T640,20 T960,50 T1280,20 L1280,80 L0,80 Z"); }
  100% { d: path("M0,30 Q160,10 320,30 T640,30 T960,30 T1280,30 L1280,80 L0,80 Z"); }
}

@keyframes navReveal {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    backdrop-filter: blur(20px);
  }
}

@keyframes cardStagger {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes progressBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── Scroll-Reveal System ──────────────────────────────────── */

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.reveal--left {
  transform: translateX(-40px) scale(0.97);
}

.reveal.reveal--right {
  transform: translateX(40px) scale(0.97);
}

.reveal.reveal--scale {
  transform: scale(0.85);
}

.reveal.reveal--fade {
  transform: none;
}

/* Visible state (added by IntersectionObserver) */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) translateX(0);
}

/* Stagger delays */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 500ms; }
.reveal-stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 600ms; }
.reveal-stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 700ms; }

/* ─── Hero Entrance Animations ──────────────────────────────── */
.hero-animate-1 {
  animation: fadeInDown 0.8s var(--ease-out) 0.2s both;
}

.hero-animate-2 {
  animation: fadeInUp 0.9s var(--ease-out) 0.5s both;
}

.hero-animate-3 {
  animation: fadeInUp 0.8s var(--ease-out) 0.8s both;
}

.hero-animate-4 {
  animation: fadeInUp 0.8s var(--ease-out) 1.1s both;
}

/* ─── Floating Animation ────────────────────────────────────── */
.float-animate {
  animation: float 4s ease-in-out infinite;
}

.float-animate-2 {
  animation: float 5s ease-in-out infinite 1s;
}

.float-animate-3 {
  animation: float 3.5s ease-in-out infinite 0.5s;
}

/* ─── Diya Glow Pulsing (Temples) ───────────────────────────── */
.glow-pulse--gold {
  animation: glowPulse 3s ease-in-out infinite;
}

.glow-pulse--blue {
  animation: glowPulseBlue 4s ease-in-out infinite;
}

.orb--diya {
  animation: diyaFlicker 4s ease-in-out infinite;
}

/* ─── Loading Skeleton Shimmer ──────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
  border-radius: var(--radius-md);
}

/* ─── Scroll Progress Bar ───────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 1000;
}

.scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-main), var(--blue-light));
  transform-origin: left;
  transform: scaleX(0);
  border-radius: 0 2px 2px 0;
  transition: transform 0.1s linear;
}

/* ─── Page Transition Overlay ───────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-in-out);
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ─── Hover Lift Utility ────────────────────────────────────── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-6px);
}

/* ─── Clip Path Reveals ─────────────────────────────────────── */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-slow) var(--ease-out);
}

.clip-reveal.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ─── Reduce Motion (Accessibility) ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .orb {
    animation: none !important;
  }

  .hero__bg img {
    animation: none !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float-animate,
  .float-animate-2,
  .float-animate-3 {
    animation: none;
  }
}