/* ==========================================================================
   Motion — CSS-only animations
   Everything here is progressive enhancement:
   · wrapped in prefers-reduced-motion: no-preference
   · scroll-driven effects only where animation-timeline is supported
   · content is fully visible when an effect is unsupported
   Individual transform properties (translate / scale / rotate) are used so
   animations never fight :hover transforms.
   ========================================================================== */

/* ---------- Count-up numbers ---------------------------------------------
   <span class="count" style="--to: 10000" data-prefix="+">
     <span class="count__static">+10,000</span>
   </span>
   Variants: default (plain integer) · .count--k (10,000 grouping, ≥1000) · .count--dec (--to: 48 → 4.8)
   The static text stays for screen readers and unsupported browsers.
   Pace: --count-duration (default 4.5s) and --count-delay (0.35s). Both are
   read as inherited custom properties, so setting either on :root, .home-stats
   or a single .count retunes the run without touching this file.            */
@property --n  { syntax: "<integer>"; inherits: false; initial-value: 0; }

@supports (width: round(down, 1.5px, 1px)) and (width: mod(3px, 2px)) {
  .count {
    --n: var(--to);
    counter-reset: n var(--n) k round(down, var(--n) / 1000, 1) r mod(var(--n), 1000) i round(down, var(--n) / 10, 1) d mod(var(--n), 10);
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .count__static {                         /* keep for AT, hide visually */
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .count::before { content: attr(data-prefix) counter(n) attr(data-suffix); }
  .count--k::before { content: attr(data-prefix) counter(k) "," counter(r, ml-pad3) attr(data-suffix); }
  .count--dec::before { content: attr(data-prefix) counter(i) "." counter(d) attr(data-suffix); }

  @media (prefers-reduced-motion: no-preference) {
    .count { animation: count-up var(--count-duration, 4.5s) cubic-bezier(.25, .8, .35, 1) var(--count-delay, 0.35s) both; }
    .count--scroll { animation: count-up linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@counter-style ml-pad3 { system: extends decimal; pad: 3 "0"; }
@keyframes count-up { from { --n: 0; } to { --n: var(--to); } }

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

  /* ---------- Cross-document page transitions (Chrome/Edge 126+) ---------- */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 180ms ease both vt-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(.2,.7,.2,1) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; translate: 0 10px; } }

  /* ---------- Page-load entrance (hero & page headers) ---------- */
  .hero__inner > *,
  .page-hero__inner > *,
  .book-hero__grid > *,
  .author-hero__grid > *,
  .nf > * {
    animation: rise 0.8s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero__inner > :nth-child(2), .page-hero__inner > :nth-child(2), .book-hero__grid > :nth-child(2), .author-hero__grid > :nth-child(2), .nf > :nth-child(2) { animation-delay: 0.08s; }
  .hero__inner > :nth-child(3), .page-hero__inner > :nth-child(3), .nf > :nth-child(3) { animation-delay: 0.16s; }
  .hero__inner > :nth-child(4), .page-hero__inner > :nth-child(4), .nf > :nth-child(4) { animation-delay: 0.24s; }
  .hero__inner > :nth-child(5), .page-hero__inner > :nth-child(5), .nf > :nth-child(5) { animation-delay: 0.32s; }
  .hero__inner > :nth-child(n+6), .page-hero__inner > :nth-child(n+6), .nf > :nth-child(n+6) { animation-delay: 0.4s; }
  .home-stats .stats { animation: rise 0.9s cubic-bezier(.16, 1, .3, 1) 0.35s both; }
  @keyframes rise { from { opacity: 0; translate: 0 22px; } }

  /* Hero title underline draws in */
  .hero__title em::after { animation: underline 1s cubic-bezier(.16, 1, .3, 1) 0.5s both; transform-origin: right; }
  [dir="ltr"] .hero__title em::after { transform-origin: left; }
  @keyframes underline { from { transform: scaleX(0); } }

  /* Slow drift of the geometric pattern & rotating ornaments */
  .hero.pattern::before, .page-hero.pattern::before { animation: pattern-drift 90s linear infinite; }
  /* drifts exactly one tile height so the loop is seamless */
  @keyframes pattern-drift {
    from { -webkit-mask-position: center 0, 0 0; mask-position: center 0, 0 0; }
    to   { -webkit-mask-position: center calc(var(--pattern-size, 56px) * -2.4), 0 0; mask-position: center calc(var(--pattern-size, 56px) * -2.4), 0 0; }
  }
  .hero__ornament svg { animation: spin-slow 140s linear infinite; }
  @keyframes spin-slow { to { rotate: 1turn; } }

  /* Featured / book cover gentle float */
  .feature__cover .cover, .book-hero__cover .cover { animation: float 7s ease-in-out infinite; }
  @keyframes float { 50% { translate: 0 -8px; } }

  /* ---------- Scroll reveal ---------- */
  @supports (animation-timeline: view()) {
    .section-head, .book-card, .cat-card, .cat-group, .col-card, .author-card, .lang-card,
    .feature, .quran, .cta, .state, .value-card, .step, .contact-card, .timeline__item,
    .review, .rating-summary, .research__intro, .aside-box, .reader-teaser {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes reveal { from { opacity: 0; translate: 0 28px; scale: 0.98; } }

    /* Horizontal grids: slight stagger by column */
    .grid > :nth-child(3n+2) { animation-range: entry 5% entry 75%; }
    .grid > :nth-child(3n+3) { animation-range: entry 10% entry 80%; }

    /* Header gains a shadow once the page is scrolled */
    .site-header { animation: header-shadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    @keyframes header-shadow { to { box-shadow: 0 6px 24px rgb(0 0 0 / 0.07); } }

    /* Reading progress bar on the book page */
    .read-progress { animation: read-progress linear both; animation-timeline: scroll(root); }
    @keyframes read-progress { from { scale: 0 1; } to { scale: 1 1; } }
  }

  /* ---------- Micro-interactions ---------- */
  .btn--primary, .btn--gold { position: relative; overflow: hidden; isolation: isolate; }
  .btn--primary::after, .btn--gold::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%);
    translate: -120% 0;
    transition: translate 0.7s cubic-bezier(.2, .7, .2, 1);
  }
  .btn--primary:hover::after, .btn--gold:hover::after { translate: 120% 0; }

  .primary-nav__link { position: relative; }
  .primary-nav__link::after {
    content: ""; position: absolute; inset-inline: var(--space-3); inset-block-end: 4px;
    block-size: 2px; border-radius: 2px; background: var(--color-accent);
    scale: 0 1; transition: scale var(--dur) var(--ease);
  }
  .primary-nav__link:hover::after { scale: 1 1; }
  .primary-nav__link[aria-current="page"]::after { display: none; }

  .cat-card:hover .cat-card__icon .icon { animation: wiggle 0.6s ease; }
  .cat-card:hover .cat-card__icon::before { animation: spin-slow 8s linear infinite; }
  @keyframes wiggle { 30% { rotate: -10deg; } 60% { rotate: 8deg; } }

  .fav:has(input:checked) .icon, .btn-fav:has(input:checked) .icon { animation: pop 0.4s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes pop { 40% { scale: 1.35; } }

  .tabs__panel { animation: fade-in 0.35s ease both; }
  @keyframes fade-in { from { opacity: 0; translate: 0 8px; } }

  .book-card--featured .book-card__media, .book-hero__cover { perspective: 900px; }
  .book-hero__cover:hover .cover { rotate: y -8deg; transition: rotate 0.5s var(--ease); }

  .link-arrow .icon, .mobile-nav__link .icon { transition: translate var(--dur) var(--ease); }

  .rating-input label { transition: scale var(--dur-fast) var(--ease), color var(--dur-fast); }
  .rating-input label:hover { scale: 1.18; }

  .rating-bar__fill { animation: bar-fill 1.2s cubic-bezier(.16, 1, .3, 1) both; transform-origin: right; }
  [dir="ltr"] .rating-bar__fill { transform-origin: left; }
  @supports (animation-timeline: view()) {
    .rating-bar__fill { animation-timeline: view(); animation-range: entry 10% cover 40%; animation-timing-function: linear; }
  }
  @keyframes bar-fill { from { scale: 0 1; } }
}