/* ==============================================================================
   PREM KUTI DARBAR TRUST - ADVANCED SKEUOMORPHIC ANIMATIONS & MOTION SYSTEM
   Living Celestial Motion • 3D Tilts • Ambient Keyframe Glows • GSAP Orchestration
   ============================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

/* Golden Border & Box Shadow Pulse */
@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 15px rgba(216, 182, 106, 0.3), 0 0 5px rgba(216, 182, 106, 0.2) inset;
    border-color: rgba(198, 161, 91, 0.4);
  }
  50% {
    box-shadow: 0 0 35px rgba(216, 182, 106, 0.7), 0 0 15px rgba(255, 232, 172, 0.4) inset;
    border-color: #FFE4A0;
  }
}

/* Subtle Aura Breathing for Stat items & Badges */
@keyframes pulseAura {
  0%, 100% {
    box-shadow: 0 0 20px rgba(216, 182, 106, 0.15), 0 1px 2px rgba(255, 232, 172, 0.2) inset;
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 35px rgba(216, 182, 106, 0.45), 0 2px 8px rgba(255, 240, 190, 0.4) inset;
    transform: translateY(-2px);
  }
}

/* Floating Lantern & Crest Bobbing */
@keyframes floatBob {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(1.2deg);
  }
  66% {
    transform: translateY(4px) rotate(-1deg);
  }
}

/* Lantern Sway & Flicker */
@keyframes floatLantern {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-9px) rotate(2deg);
  }
  66% {
    transform: translateY(5px) rotate(-2deg);
  }
}

@keyframes lanternFlicker {
  0%, 100% {
    opacity: 0.95;
    filter: drop-shadow(0 0 18px rgba(255, 232, 172, 0.85));
  }
  25% {
    opacity: 0.8;
    filter: drop-shadow(0 0 10px rgba(216, 182, 106, 0.6));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(255, 240, 190, 0.95));
  }
  75% {
    opacity: 0.88;
    filter: drop-shadow(0 0 14px rgba(216, 182, 106, 0.7));
  }
}

/* Metallic Shimmer Reflection Sweep */
@keyframes shimmerMetallic {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Button Light Beam Sweep */
@keyframes btnBeamSweep {
  0% {
    left: -120%;
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  40% {
    left: 140%;
    opacity: 0;
  }
  100% {
    left: 140%;
    opacity: 0;
  }
}

/* Star Twinkle & Rotate */
@keyframes twinkleRotate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
    filter: drop-shadow(0 0 6px #FFE8AC);
  }
  50% {
    transform: scale(1.22) rotate(45deg);
    opacity: 1;
    filter: drop-shadow(0 0 16px #FFFDF7);
  }
}

/* Divine Halo Radiance */
@keyframes divineRadiance {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(216, 182, 106, 0.4)) drop-shadow(0 4px 10px rgba(0,0,0,0.8));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255, 232, 172, 0.8)) drop-shadow(0 6px 15px rgba(0,0,0,0.9));
    transform: scale(1.03);
  }
}

/* Scroll Mouse Wheel */
@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.2;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Arrow Slide Bounce */
@keyframes arrowSlide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Emblem Soft Spin on Hover */
@keyframes emblemSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Continuous Subtle Celestial Drift */
@keyframes celestialDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1.05);
  }
  50% {
    transform: translate(-10px, -8px) scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   2. CONTINUOUS AMBIENT & LIVING ELEMENT STYLING
   -------------------------------------------------------------------------- */

/* Supernova Celestial Canvas */
.supernova-background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.92;
}

/* Brand Emblem Continuous Animation */
.brand-emblem {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}

.brand-emblem svg {
  animation: divineRadiance 4s ease-in-out infinite;
}

.brand-logo:hover .brand-emblem {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 25px rgba(216, 182, 106, 0.8);
}

/* Hero Spiritual Crest Floating Animation */
.hero-spiritual-crest {
  animation: floatBob 5s ease-in-out infinite, divineRadiance 4.5s ease-in-out infinite;
}

/* Hero Badge Living Pulse */
.hero-badge, .event-category-badge, .placeholder-badge-notice {
  animation: pulseAura 4s ease-in-out infinite;
}

/* Stars & Geometric Motifs */
.star-symbol, .arch-star, .motif-star {
  display: inline-block;
  animation: twinkleRotate 3.5s ease-in-out infinite;
}

/* Shimmering Lines & Horizontal Dividers */
.gold-shimmer-line, .hero-motto-divider .gold-line {
  background: linear-gradient(90deg, transparent 0%, #FFE8AC 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmerMetallic 3.5s infinite linear;
}

/* Floating Lantern Class */
.lantern-floating {
  animation: floatLantern 6s ease-in-out infinite, lanternFlicker 4s ease-in-out infinite;
}

/* Continuous Light Beam Sweep on Buttons */
.btn-primary::after, .btn-outline::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: btnBeamSweep 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Card Icon Basin Hover & Living Float */
.card-icon-frame, .contact-icon-box {
  animation: floatBob 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Specular Glint Beam across Islamic Card Header */
.islamic-card::before, .event-card::before, .member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #FFE4A0 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmerMetallic 4s infinite linear;
  box-shadow: 0 0 10px #D8B66A;
}

/* Back-to-Top Floating Button Animation */
.back-to-top-btn.visible {
  animation: floatBob 3.5s ease-in-out infinite;
}

/* Navigation Links Magnetic Underline Glint */
.desktop-nav .nav-link {
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}

.desktop-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--grad-brass-gold);
  box-shadow: 0 0 8px #FFE4A0;
  transition: width 0.35s cubic-bezier(0.2, 1, 0.3, 1), left 0.35s cubic-bezier(0.2, 1, 0.3, 1);
  border-radius: 2px;
}

.desktop-nav .nav-link:hover::after, .desktop-nav .nav-link.active::after {
  width: 100%;
  left: 0;
}

.desktop-nav .nav-link:hover {
  transform: translateY(-2px);
}

/* Card Link Arrow Hover Animation */
.card-action-link:hover span:last-child,
.footer-nav-link:hover {
  animation: arrowSlide 1s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3. 3D PERSPECTIVE & TILT CONTAINERS
   -------------------------------------------------------------------------- */
.islamic-card, 
.event-card, 
.member-card, 
.stats-banner-wrap,
.gallery-card,
.contact-info-panel,
.contact-form-wrap {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform, box-shadow;
}

/* --------------------------------------------------------------------------
   4. GSAP & UNIVERSAL SCROLL REVEAL INITIAL STATES
   -------------------------------------------------------------------------- */
.gsap-reveal-fade,
.animate-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  will-change: opacity, transform;
}

.gsap-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-45px);
  will-change: opacity, transform;
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(45px);
  will-change: opacity, transform;
}

.hero-reveal-seq {
  opacity: 0;
  transform: translateY(28px);
}

/* Fallback class for revealed elements when GSAP executes or JS falls back */
.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   5. ACCESSIBLE REDUCED MOTION SETTINGS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .custom-cursor-dot,
  .custom-cursor-ring,
  .lantern-floating,
  .supernova-background-canvas {
    display: none !important;
  }
  
  .gsap-reveal-fade,
  .gsap-reveal-scale,
  .gsap-reveal-left,
  .gsap-reveal-right,
  .hero-reveal-seq,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}