/* ============================================================
   HORIZON — animations.css (v3 — enterprise-grade)
   Premium motion system · GPU-only · Reduced-motion safe
   Timing: micro 140ms · UI 220ms · page 380ms
   Easing: cubic-bezier(0.22, 1, 0.36, 1)
   ============================================================ */

/* ── 1. SCROLL REVEAL ────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* release after animation */
}

/* Directional variants */
.reveal-left {
  opacity: 0; transform: translateX(-32px);
  transition: opacity 580ms cubic-bezier(0.22,1,0.36,1), transform 580ms cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0; transform: translateX(32px);
  transition: opacity 580ms cubic-bezier(0.22,1,0.36,1), transform 580ms cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal-scale {
  opacity: 0; transform: scale(0.94);
  transition: opacity 560ms cubic-bezier(0.22,1,0.36,1), transform 560ms cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view {
  opacity: 1; transform: none; will-change: auto;
}

/* Stagger delays — extended to 6 steps */
.rd1 { transition-delay: 80ms; }
.rd2 { transition-delay: 160ms; }
.rd3 { transition-delay: 240ms; }
.rd4 { transition-delay: 320ms; }
.rd5 { transition-delay: 400ms; }
.rd6 { transition-delay: 480ms; }

/* ── 2. HERO ENTRANCE ANIMATIONS ────────────────────────── */

/* For elements animated with CSS animation (not JS-driven) */
@keyframes hReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Page-hero stagger (applied on inner page heroes) */
.page-hero-eyebrow,
.page-hero-title,
.page-hero-lead,
.page-hero-ctas {
  opacity: 0;
  transform: translateY(18px);
  animation: hReveal 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}
.page-hero-eyebrow { animation-delay: 100ms; }
.page-hero-title   { animation-delay: 220ms; }
.page-hero-lead    { animation-delay: 340ms; }
.page-hero-ctas    { animation-delay: 460ms; }

/* ── 3. ISLAMIC ELEMENT ANIMATIONS ──────────────────────── */

/* Bismillah bar entrance */
.bismillah-bar {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.bismillah-bar.in-view { opacity: 0.65; }

/* Geometric card border reveal */
[data-geo-card]::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--gold) 0%, transparent 30%,
    transparent 70%, var(--gold) 100%);
  opacity: 0;
  transition: opacity 340ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; z-index: 0;
}
[data-geo-card]:hover::before { opacity: 0.12; }

/* Program icon geo border rotate */
.program-icon-geo::before {
  content: '';
  position: absolute; inset: -4px;
  border: 1.5px solid var(--gold);
  opacity: 0.14;
  border-radius: calc(var(--r-md) + 2px);
  transform: rotate(45deg);
  transition: opacity 280ms cubic-bezier(0.22,1,0.36,1),
              transform 380ms cubic-bezier(0.22,1,0.36,1);
}
.program-card:hover .program-icon-geo::before {
  opacity: 0.32; transform: rotate(0deg);
}

/* ── 4. PAGE TRANSITION ──────────────────────────────────── */

.page-wrap {
  animation: pageFadeIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 5. SCROLL PROGRESS BAR ─────────────────────────────── */

#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--gold) 0%, var(--red) 35%, var(--blue) 68%, var(--gold) 100%);
  background-size: 200% 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 80ms linear;
  will-change: transform;
}

/* ── 6. HERO FLOATING SHAPES ────────────────────────────── */

@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatRotate { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-10px) rotate(4deg)} }

.float-slow { animation: floatY 7s ease-in-out infinite; }
.float-mid  { animation: floatY 5s ease-in-out infinite 0.8s; }
.float-rot  { animation: floatRotate 8s ease-in-out infinite 1.4s; }

/* ── 7. BUTTON RIPPLE ────────────────────────────────────── */

/* Dynamically injected .ripple elements */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  transform: scale(0);
  animation: rippleAnim 520ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── 8. CARD SHINE ───────────────────────────────────────── */

.card-shine {
  position: relative; overflow: hidden;
}
.card-shine::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255,255,255,.07) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; z-index: 1;
}
.card-shine:hover::before { transform: translateX(100%); }

/* ── 9. IMAGE ANIMATIONS ─────────────────────────────────── */

/* Clip-path reveal (triggered by .in-view) */
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 820ms cubic-bezier(0.22, 1, 0.36, 1);
}
.img-reveal.in-view { clip-path: inset(0 0% 0 0); }

/* Zoom on hover — inside .card-img-wrap */
.card-img-wrap { overflow: hidden; border-radius: inherit; }
.card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.card-img-wrap:hover img { transform: scale(1.05); }

/* Fade-in after lazy load */
img.img-loaded {
  animation: revealFade 400ms ease both;
}

/* ── 10. VIDEO PLAY PULSE ────────────────────────────────── */

@keyframes videoPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,211,91,.45); }
  50%       { box-shadow: 0 0 0 14px rgba(243,211,91,0); }
}
.video-play-btn {
  animation: videoPlayPulse 2.6s cubic-bezier(0.22,1,0.36,1) infinite;
}
.video-thumb:hover .video-play-btn {
  animation: none;
  background: var(--gold); border-color: var(--gold);
  transform: scale(1.1);
  transition: background 200ms, border-color 200ms, transform 200ms cubic-bezier(0.22,1,0.36,1);
}

/* ── 11. PULSE RING (CTA button) ─────────────────────────── */

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(243,211,91,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(243,211,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(243,211,91,0); }
}
.pulse-ring {
  animation: pulseRing 2.4s cubic-bezier(0.36,.07,.19,.97) infinite;
}
.pulse-ring:hover { animation: none; }

/* ── 12. SKELETON LOADING ────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-200) 50%,
    var(--gray-100) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeletonPulse {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── 13. HERO BACKGROUND PHOTO ───────────────────────────── */

.hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 30%;
  will-change: transform; overflow: hidden;
}
.hero-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11,31,53,.92) 0%,
    rgba(11,31,53,.78) 50%,
    rgba(26,58,92,.86) 100%
  );
}

/* Page hero photo */
.page-hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.page-hero-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11,31,53,.90) 0%,
    rgba(11,31,53,.74) 60%,
    rgba(26,58,92,.82) 100%
  );
}

/* ── 14. LOGO IMAGE ──────────────────────────────────────── */

.nav-logo-img {
  height: 44px; width: auto; object-fit: contain;
  /* No filter — show the original colored Horizon logo */
  transition: opacity 200ms cubic-bezier(0.22,1,0.36,1);
}
.nav-logo-img:hover { opacity: .88; }

.footer-logo-img {
  height: 40px; width: auto; object-fit: contain;
  /* No filter — show original logo colors */
}

.modal-logo-img {
  height: 32px; width: auto; object-fit: contain;
  /* No filter — show original logo colors */
}

/* ── 15. EVENT & GALLERY IMAGE ZOOM ─────────────────────── */

.event-img { overflow: hidden; position: relative; }
.event-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.event-card:hover .event-img img { transform: scale(1.05); }

.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.gallery-item:hover img { transform: scale(1.06); }

/* Author avatar image */
.author-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* Video thumbnail */
.video-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.video-thumb:hover .video-thumb-img { transform: scale(1.05); }
.video-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(11,31,53,.75) 100%);
}

/* ── 16. ABOUT IMAGE ─────────────────────────────────────── */

.about-img-main { overflow: hidden; }
.about-img-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.about-img-main:hover img { transform: scale(1.04); }

/* ── 17. PREFERS-REDUCED-MOTION ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Disable ALL transitions and animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Immediately show reveal elements */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .img-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }

  /* Stop animations on page-hero elements */
  .page-hero-eyebrow,
  .page-hero-title,
  .page-hero-lead,
  .page-hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Stop decorative animations */
  .float-slow, .float-mid, .float-rot { animation: none !important; }
  .pulse-ring, .video-play-btn, .chip-pulse { animation: none !important; }
  .scroll-line  { animation: none !important; }
  .hero-scroll-cue { opacity: 1 !important; }
  .bismillah-bar { opacity: 0.55 !important; transition: none !important; }
  .partners-track { animation: none !important; }
  #scroll-progress { display: none; }
  .skeleton { animation: none !important; background: var(--gray-100); }
}