/* Inside King Salman Park: motion and polish layer.
   Loaded after site.css. Everything here is inert under prefers-reduced-motion,
   and hover-only effects are limited to (hover: hover) and (pointer: fine).
   Only transform, clip-path and opacity are animated, so there is no layout shift. */

/* ---------- cross-document view transitions ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-vt-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes mo-vt-in { from { opacity: 0; transform: translateY(12px); } }

  ::view-transition-old(root) { animation: 260ms ease-in both mo-vt-out; }
  ::view-transition-new(root) { animation: 420ms cubic-bezier(.2, .7, .2, 1) both mo-vt-in; }

  /* header and logo stay put: named, identical on both pages, never animated */
  .site-header { view-transition-name: site-header; }
  .site-header .logo { view-transition-name: site-logo; }
  ::view-transition-group(site-header),
  ::view-transition-group(site-logo),
  ::view-transition-image-pair(site-header),
  ::view-transition-image-pair(site-logo),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) { animation: none; mix-blend-mode: normal; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- card tilt and glare (fine pointers only) ---------- */
  @media (hover: hover) and (pointer: fine) {
    .card.mo-tilt {
      transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
    }
    .card.mo-tilt.mo-on {
      transform: perspective(900px) translate3d(0, -4px, 0) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg));
      box-shadow: var(--shadow-2);
    }
    .card.mo-tilt::after {
      content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
      background: radial-gradient(circle at var(--mo-gx, 50%) var(--mo-gy, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
      opacity: 0; transition: opacity .4s ease;
    }
    .card.mo-tilt.mo-on::after { opacity: 1; }

    /* ---------- magnetic primary buttons (fine pointers only) ---------- */
    .btn.mo-magnet,
    .btn.mo-magnet:hover {
      transform: translate3d(var(--mo-mx, 0px), var(--mo-my, 0px), 0);
      transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .2s, box-shadow .2s, color .2s;
    }
  }

  /* ---------- button press ripple (all pointers) ---------- */
  .mo-press { position: relative; }
  .mo-pressing { overflow: hidden; }
  .mo-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }

  /* ---------- Najdi motif draws in on scroll (eyebrows and section dividers) ---------- */
  .eyebrow.mo-draw::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(.3, .6, .2, 1) .15s;
  }
  :root[dir="rtl"] .eyebrow.mo-draw::before { clip-path: inset(0 0 0 100%); }
  .eyebrow.mo-draw.mo-in::before,
  :root[dir="rtl"] .eyebrow.mo-draw.mo-in::before { clip-path: inset(0 0 0 0); }

  .divider.mo-draw {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s cubic-bezier(.3, .6, .2, 1) .1s;
  }
  :root[dir="rtl"] .divider.mo-draw { clip-path: inset(0 0 0 100%); }
  .divider.mo-draw.mo-in,
  :root[dir="rtl"] .divider.mo-draw.mo-in { clip-path: inset(0 0 0 0); }

  /* ---------- scroll progress (gold, grows from the reading-start edge) ---------- */
  .mo-progress {
    position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0); transform-origin: 0 50%;
  }
  :root[dir="rtl"] .mo-progress { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--gold), var(--gold-light)); }

  /* ---------- image unmask once, on entering view ---------- */
  .mo-mask {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.25s cubic-bezier(.3, .6, .2, 1);
  }
  :root[dir="rtl"] .mo-mask { clip-path: inset(0 0 0 100%); }
  .mo-mask.mo-in,
  :root[dir="rtl"] .mo-mask.mo-in { clip-path: inset(0 0 0 0); }
}