/* =========================================================================
   ArabOodh — animations.css
   Scroll reveal, hover cues, staggered entrance.
   IntersectionObserver in main.js toggles .is-visible on .reveal nodes.
   ========================================================================= */

/* =========================================================================
   Cross-document page transitions.
   Modern browsers (Chrome 126+, Safari 18+) get a native fade between pages.
   Older browsers fall back to the body pageEnter entrance animation.
   ========================================================================= */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  animation-name: page-fade-out;
}
::view-transition-new(root) {
  animation-name: page-fade-in;
}

@keyframes page-fade-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Body entrance — used both as native fallback and for the JS fallback path */
body {
  animation: pageEnter 0.7s var(--ease-out) forwards;
}

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

/* JS fallback exit — main.js applies .is-leaving on internal link clicks
   when the View Transitions API is not available */
body.is-leaving {
  animation: pageLeave 0.32s var(--ease-out) forwards;
}
@keyframes pageLeave {
  to { opacity: 0; transform: translateY(-6px); }
}

/* Base reveal — initial state */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variants */
.reveal-fade { transform: none; }                       /* fade only */
.reveal-up   { transform: translateY(40px); }           /* stronger up */
.reveal-left { transform: translateX(-32px); }
.reveal-right{ transform: translateX(32px); }
.reveal-scale{ transform: scale(0.97); }

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { transform: none; }

/* Staggered children — set --d on the parent group, children inherit cumulative delays */
.reveal[data-delay="1"]  { transition-delay: 0.08s; }
.reveal[data-delay="2"]  { transition-delay: 0.16s; }
.reveal[data-delay="3"]  { transition-delay: 0.24s; }
.reveal[data-delay="4"]  { transition-delay: 0.32s; }
.reveal[data-delay="5"]  { transition-delay: 0.40s; }
.reveal[data-delay="6"]  { transition-delay: 0.48s; }
.reveal[data-delay="7"]  { transition-delay: 0.56s; }

/* Intro hero entrance — runs without observer on initial load */
.hero .hero-eyebrow,
.hero .hero-headline,
.hero .hero-sub,
.hero .hero-actions,
.hero .hero-wood,
.hero .kpis {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-in 0.95s var(--ease-out) forwards;
}
.hero .hero-eyebrow  { animation-delay: 0.05s; }
.hero .hero-headline { animation-delay: 0.18s; }
.hero .hero-sub      { animation-delay: 0.32s; }
.hero .hero-actions  { animation-delay: 0.46s; }
.hero .hero-wood     { animation-delay: 0.36s; transform: translateY(40px); }
.hero .kpis          { animation-delay: 0.6s;  transform: translateY(28px); }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* Soft underline draw on link-arrow (already in components, this is decorative) */
@keyframes draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* Floating WhatsApp button — gentle pulse */
@keyframes fab-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 0 0 0 rgba(37, 211, 102, 0.0),
      0 10px 24px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 0 10px rgba(37, 211, 102, 0.0),
      0 12px 28px rgba(0, 0, 0, 0.6);
  }
}

/* Particle rise — used for hero ambience on home */
@keyframes particle-rise {
  0%   { transform: translateY(120vh); opacity: 0; }
  6%   { opacity: 0.55; }
  90%  { opacity: 0.45; }
  100% { transform: translateY(-30vh); opacity: 0; }
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .hero-eyebrow, .hero .hero-headline, .hero .hero-sub,
  .hero .hero-actions, .hero .hero-wood, .hero .kpis {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fab-whatsapp { animation: none !important; }
}