/* ============================================================
   ALRAHEELY — Premium Animation System
   Lightweight · CSS-first · prefers-reduced-motion safe
   ============================================================

   MOTION TOKENS
   ─────────────────────────────────────────────────────────
   --ar-dur-fast:    140ms   micro interactions
   --ar-dur-base:    280ms   standard transitions
   --ar-dur-slow:    480ms   entrance / reveal
   --ar-dur-xslow:  700ms   hero, heavy reveals
   --ar-ease:        cubic-bezier(.4, 0, .2, 1)   material standard
   --ar-ease-out:    cubic-bezier(0, 0, .2, 1)    decelerate
   --ar-ease-spring: cubic-bezier(.34, 1.56, .64, 1)  slight overshoot
   --ar-lift:        translateY(-3px)              hover lift
   --ar-reveal-y:    24px                          fade-up distance
   ============================================================ */

:root {
  --ar-dur-fast:    140ms;
  --ar-dur-base:    280ms;
  --ar-dur-slow:    480ms;
  --ar-dur-xslow:  700ms;
  --ar-ease:        cubic-bezier(.4,  0,   .2, 1);
  --ar-ease-out:    cubic-bezier( 0,  0,   .2, 1);
  --ar-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ar-lift:        -3px;
  --ar-reveal-y:    28px;
  --ar-stagger:     80ms;
}

/* ── 0. Respect reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   1. SCROLL REVEAL — .ar-reveal
   JS adds .ar-visible when element enters viewport.
   ============================================================ */

/* Hidden initial state */
.ar-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  var(--ar-dur-slow) var(--ar-ease-out),
    transform var(--ar-dur-slow) var(--ar-ease-out);
}

/* Variants */
.ar-reveal--up    { transform: translateY(var(--ar-reveal-y)); }
.ar-reveal--down  { transform: translateY(calc(var(--ar-reveal-y) * -1)); }
.ar-reveal--left  { transform: translateX(var(--ar-reveal-y)); }
.ar-reveal--right { transform: translateX(calc(var(--ar-reveal-y) * -1)); }
.ar-reveal--scale { transform: scale(.96); }
.ar-reveal--fade  { transform: none; }

/* Visible state (JS toggles this) */
.ar-reveal.ar-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children: .ar-stagger > * */
.ar-stagger > * {
  opacity: 0;
  transform: translateY(var(--ar-reveal-y));
  transition:
    opacity  var(--ar-dur-slow) var(--ar-ease-out),
    transform var(--ar-dur-slow) var(--ar-ease-out);
}
.ar-stagger.ar-visible > *:nth-child(1)  { transition-delay: calc(var(--ar-stagger) * 0); }
.ar-stagger.ar-visible > *:nth-child(2)  { transition-delay: calc(var(--ar-stagger) * 1); }
.ar-stagger.ar-visible > *:nth-child(3)  { transition-delay: calc(var(--ar-stagger) * 2); }
.ar-stagger.ar-visible > *:nth-child(4)  { transition-delay: calc(var(--ar-stagger) * 3); }
.ar-stagger.ar-visible > *:nth-child(5)  { transition-delay: calc(var(--ar-stagger) * 4); }
.ar-stagger.ar-visible > *:nth-child(6)  { transition-delay: calc(var(--ar-stagger) * 5); }
.ar-stagger.ar-visible > *:nth-child(7)  { transition-delay: calc(var(--ar-stagger) * 6); }
.ar-stagger.ar-visible > *:nth-child(8)  { transition-delay: calc(var(--ar-stagger) * 7); }
.ar-stagger.ar-visible > * {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. HERO ENTRANCE — plays once on page load
   ============================================================ */
@keyframes ar-fade-up {
  from { opacity: 0; transform: translateY(var(--ar-reveal-y)); }
  to   { opacity: 1; transform: none; }
}
@keyframes ar-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ar-scale-up {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* Badge */
.hero-p__badge {
  animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) .05s both;
}
/* H1 */
.hero-p__h1 {
  animation: ar-fade-up var(--ar-dur-xslow) var(--ar-ease-out) .15s both;
}
/* Subtitle */
.hero-p__sub {
  animation: ar-fade-up var(--ar-dur-xslow) var(--ar-ease-out) .28s both;
}
/* CTAs */
.hero-p__ctas {
  animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) .40s both;
}
/* Trust bar */
.hero-p__trust {
  animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) .52s both;
}
/* Visual */
.hero-p__frame {
  animation: ar-scale-up var(--ar-dur-xslow) var(--ar-ease-out) .20s both;
}
.hero-p__badge-float--top {
  animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) .55s both;
}
.hero-p__badge-float--bot {
  animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) .68s both;
}

/* ============================================================
   3. BUTTON INTERACTIONS
   ============================================================ */
/* Shared lift + shadow for any .ar-btn-lift element */
.ar-btn-lift {
  transition:
    transform var(--ar-dur-fast) var(--ar-ease-spring),
    box-shadow var(--ar-dur-fast) var(--ar-ease);
}
.ar-btn-lift:hover {
  transform: translateY(var(--ar-lift));
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.ar-btn-lift:active { transform: translateY(0); }

/* Subtle pulse on primary CTA (gold) */
@keyframes ar-pulse-gold {
  0%, 100% { box-shadow: 0 4px 18px rgba(201,162,77,.35); }
  50%       { box-shadow: 0 6px 32px rgba(201,162,77,.55); }
}
.ar-pulse {
  animation: ar-pulse-gold 3s var(--ar-ease) infinite;
}

/* WA button glow pulse */
@keyframes ar-pulse-wa {
  0%, 100% { box-shadow: 0 3px 14px rgba(37,211,102,.18); }
  50%       { box-shadow: 0 5px 26px rgba(37,211,102,.38); }
}
.ar-pulse-wa {
  animation: ar-pulse-wa 3.5s var(--ar-ease) infinite;
}

/* ============================================================
   4. CARD HOVER SYSTEM
   ============================================================ */
.ar-card-hover {
  transition:
    transform var(--ar-dur-base) var(--ar-ease-spring),
    box-shadow var(--ar-dur-base) var(--ar-ease);
}
.ar-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.13);
}

/* On dark background variant */
.ar-card-hover--dark:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Icon micro-interaction */
.ar-icon-lift {
  transition: transform var(--ar-dur-base) var(--ar-ease-spring), color var(--ar-dur-base);
}
.ar-card-hover:hover .ar-icon-lift {
  transform: translateY(-2px) scale(1.08);
  color: var(--sh-gold, #c9a24d);
}

/* ============================================================
   5. HEADER STATE TRANSITIONS
   Handled mainly in header.css, tokens here
   ============================================================ */
/* smooth scroll-based shrink already in header.css via transition */

/* ============================================================
   6. SECTION REVEAL RHYTHM
   Applied per section via ar-reveal + ar-stagger classes
   Delay offsets guide the eye through the page
   ============================================================ */
.ar-reveal--delay-1 { transition-delay: .08s; }
.ar-reveal--delay-2 { transition-delay: .16s; }
.ar-reveal--delay-3 { transition-delay: .24s; }
.ar-reveal--delay-4 { transition-delay: .32s; }

/* ============================================================
   7. FAQ ACCORDION — smooth open with max-height trick
   (JS sets max-height inline; CSS transitions it)
   ============================================================ */
.hv2-faq__item details[open] summary ~ * {
  animation: ar-fade-up var(--ar-dur-base) var(--ar-ease-out) both;
}

/* ============================================================
   8. FLOATING BADGE ANIMATION (hero badges)
   ============================================================ */
@keyframes ar-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.hero-p__badge-float {
  animation: ar-float 4s var(--ar-ease) infinite;
}
.hero-p__badge-float--bot {
  animation-delay: 2s;
}

/* ============================================================
   9. ORB / GLOW AMBIENT BACKGROUND
   ============================================================ */
@keyframes ar-orb-pulse {
  0%, 100% { transform: scale(1);   opacity: .40; }
  50%       { transform: scale(1.1); opacity: .55; }
}
.hero-p__orb {
  animation: ar-orb-pulse 8s var(--ar-ease) infinite;
}
.hero-p__orb--2 { animation-delay: 4s; }