/* Motion (owner 2026-10-16: stronger animation and transitions). Every rule sits under prefers-reduced-motion:
   no-preference, so a visitor who asked the system for less motion gets the still page.
   Individual transform properties (scale / translate / rotate) are used on purpose: the Arabic page mirrors the hero
   art with transform: scaleX(-1) (home.css), and an animated `transform` would undo that mirror. */

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

  /* ---------- page to page: View Transitions (same-site links; browsers without it simply load the page) ---------- */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.16, 1, .3, 1) both; }
  ::view-transition-group(site-header) { animation-duration: .45s; }
  @keyframes vt-out { to { opacity: 0; scale: .985; filter: blur(6px) brightness(.6); } }
  @keyframes vt-in { from { opacity: 0; translate: 0 22px; filter: blur(4px); } }

  /* ---------- hero: the art settles out of the dark, the logo is struck in gold, then a glint passes now and then ---------- */
  .js .hero-bg { animation: hero-settle 2.8s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes hero-settle { from { scale: 1.14; filter: brightness(.35) saturate(.6) blur(8px); } to { scale: 1; filter: none; } }
  @supports (animation-timeline: scroll()) {
    .js .hero-bg { animation: hero-settle 2.8s cubic-bezier(.16, 1, .3, 1) both, hero-drift linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 110vh; }
    @keyframes hero-drift { to { translate: 0 18%; } }
  }
  .hero-title { position: relative; width: fit-content; }
  .js .hero-logo { animation: logo-strike 1.5s .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes logo-strike {
    0% { opacity: 0; scale: .78; filter: brightness(2.6) blur(10px); }
    55% { opacity: 1; scale: 1.03; filter: brightness(1.5) blur(0); }
    100% { scale: 1; filter: drop-shadow(0 10px 24px rgba(4, 7, 16, .75)); }
  }
  /* the glint runs only over the logo's own pixels (masked by the same picture) */
  .js .hero-title::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, .95) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
    -webkit-mask: url("../img/brand/logo-hero-600.webp") center / 100% 100% no-repeat; mask: url("../img/brand/logo-hero-600.webp") center / 100% 100% no-repeat;
    mix-blend-mode: overlay; animation: glint 7s 1.9s ease-in-out infinite; }
  @keyframes glint { 0% { background-position: 120% 0; } 18%, 100% { background-position: -20% 0; } }
  .js .hero-copy > .hero-lead { animation-delay: .9s; }
  .js .hero-copy > .hero-cta { animation-delay: 1.15s; }

  /* ---------- plates: a band of light crosses the gold and red buttons (on hover; the hero's call to action also by itself) ---------- */
  .btn-primary::before, .btn-download::before, .btn-green::before { content: ""; position: absolute; inset: 3px calc(var(--h) * -.22); pointer-events: none;
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
    background: linear-gradient(100deg, transparent 32%, rgba(255, 248, 220, .55) 50%, transparent 68%) 130% 0 / 280% 100% no-repeat;
    mix-blend-mode: screen; transition: background-position .9s cubic-bezier(.2, .7, .2, 1); }
  .btn-primary:hover::before, .btn-download:hover::before, .btn-green:hover::before { background-position: -30% 0; }
  .hero-cta .btn::before { animation: plate-glint 6s 2.6s ease-in-out infinite; }
  @keyframes plate-glint { 0% { background-position: 130% 0; } 16%, 100% { background-position: -30% 0; } }

  /* ---------- reveal on scroll (app.js marks [data-reveal] and adds .is-in through an IntersectionObserver) ---------- */
  .js [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal="side"] { translate: -28px 0; }
  [dir="rtl"].js [data-reveal="side"], [dir="rtl"] .js [data-reveal="side"] { translate: 28px 0; }
  .js [data-reveal].is-in { opacity: 1; translate: 0 0; }

  /* ---------- page heads: the title is uncovered from its reading side, the FW mark turns into place ---------- */
  .page-title { animation: title-in 1s .1s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes title-in { from { clip-path: inset(0 100% 0 0); translate: -14px 0; } to { clip-path: inset(0 0 0 0); } }
  [dir="rtl"] .page-title { animation-name: title-in-rtl; }
  @keyframes title-in-rtl { from { clip-path: inset(0 0 0 100%); translate: 14px 0; } to { clip-path: inset(0 0 0 0); } }
  .page-lead { animation: lead-in .9s .35s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes lead-in { from { opacity: 0; translate: 0 16px; } }
  .page-mark { animation: mark-in 1.8s .1s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes mark-in { from { opacity: 0; rotate: -24deg; scale: .7; } }

  /* ---------- live things breathe: the online lamp and the event running now ---------- */
  [data-status="online"] .live { animation: lamp 2.2s ease-in-out infinite; }
  @keyframes lamp { 50% { box-shadow: 0 0 0 7px rgba(43, 184, 166, 0), 0 0 12px 2px rgba(43, 184, 166, .55); } }
  .tl-item.is-live::before { animation: node 1.8s ease-in-out infinite; }
  @keyframes node { 50% { box-shadow: 0 0 0 3px var(--night-950), 0 0 22px 6px rgba(43, 184, 166, .75); } }

  /* ---------- the tab underline grows from its start ---------- */
  .tab::after { content: ""; position: absolute; inset: auto 0 -2px; height: 2px; background: var(--copper-500); scale: 0 1; transform-origin: left; transition: scale .4s cubic-bezier(.16, 1, .3, 1); }
  [dir="rtl"] .tab::after { transform-origin: right; }
  .tab[aria-selected="true"]::after { scale: 1 1; }

}