/* ============================================================
   Ahmad Rushdi — Motion Layer
   Premium, restrained entrance + scroll reveals.
   Loaded after assets/css/main.css. Driven by assets/js/motion.js.

   Safety model:
   - Every effect is inert without the `html.js` class (added inline
     in <head>), so no-JS visitors see the original static design.
   - Everything is wrapped in prefers-reduced-motion: no-preference,
     so reduced-motion visitors also get the static design.
   - Reveal animations use @keyframes (not transition) so the
     existing hover transitions on components stay untouched.
   ============================================================ */

:root {
  /* Mirror of the single ease-out curve used in main.css. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ar-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ar-clip {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ar-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@keyframes ar-line-up {
  from { transform: translateY(115%); }
  to   { transform: translateY(0); }
}

@keyframes ar-header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {

  /* ----------------------------------------------------------
     Site header: quiet entrance on load
     ---------------------------------------------------------- */
  html.js .site-header {
    animation: ar-header-in 0.7s var(--ease-out) both;
  }

  /* ----------------------------------------------------------
     Hero (front page): staged load animation
     ---------------------------------------------------------- */
  html.js .hero__eyebrow,
  html.js .hero__copy,
  html.js .hero__actions {
    opacity: 0;
    animation: ar-rise 0.8s var(--ease-out) both;
  }

  html.js .hero__eyebrow { animation-delay: 60ms; }
  html.js .hero__copy    { animation-delay: 240ms; }
  html.js .hero__actions { animation-delay: 400ms; }

  /* Masked line-by-line title reveal (lines built by motion.js). */
  html.js .hero__title         { opacity: 0; }
  html.js .hero__title.ar-ready { opacity: 1; }

  html.js .hero__title .ar-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.09em;
    margin-bottom: -0.09em;
  }

  html.js .hero__title .ar-line > span {
    display: inline-block;
    transform: translateY(115%);
  }

  html.js .hero__title.ar-in .ar-line > span {
    animation: ar-line-up 0.95s var(--ease-out) both;
    animation-delay: calc(90ms + var(--i, 0) * 95ms);
  }

  /* ----------------------------------------------------------
     Scroll reveals
     The selector list is mirrored in assets/js/motion.js.
     ---------------------------------------------------------- */
  html.js :where(
    .section-kicker, .section-title, .work-title, .section-note,
    .about h2, .story-intro h2, .values h2, .process h2,
    .hero--about h1, .hero--archive h1,
    .quote, .story-copy, .about-copy, .about-action,
    .values-intro, .process-intro, .hero-copy, .hero-note,
    .cta-inner, .journal-list,
    .principle, .service-card, .work-list__item,
    .capability, .value, .step, .stat
  ) {
    opacity: 0;
  }

  html.js :where(
    .section-kicker, .section-title, .work-title, .section-note,
    .about h2, .story-intro h2, .values h2, .process h2,
    .hero--about h1, .hero--archive h1,
    .quote, .story-copy, .about-copy, .about-action,
    .values-intro, .process-intro, .hero-copy, .hero-note,
    .cta-inner, .journal-list,
    .principle, .service-card, .work-list__item,
    .capability, .value, .step, .stat
  ).is-inview {
    animation: ar-rise 0.8s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }

  /* ----------------------------------------------------------
     Media reveals (editorial clip + slow zoom-out)
     ---------------------------------------------------------- */
  html.js .portrait,
  html.js .hero-image {
    opacity: 0;
  }

  html.js .portrait.is-inview,
  html.js .hero-image.is-inview {
    animation: ar-clip 0.9s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }

  html.js .portrait.is-inview img,
  html.js .hero-image.is-inview img {
    animation: ar-zoom 1.3s var(--ease-out) both;
  }
}