/* SiteFlow intro — Mušḫuššu eye awakening → mark → header and hero.
   Shown only while <html> has .intro-active (set before first paint by the inline head script). */
.intro { display: none; }
/* scroll is locked by intro.js only, so a failed script never traps the page */
html.intro-active .intro { display: block; position: fixed; inset: 0; z-index: 100; animation: intro-failsafe 0s linear 9s forwards; }
/* the real header mark and headline wait for the hand-off, so nothing appears twice */
html.intro-active .site-header .brand,
html.intro-active .hero-title { visibility: hidden; animation: intro-reveal 0s linear 9s forwards; }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@keyframes intro-reveal { to { visibility: visible; } }

.intro-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #16253B, #101D30 70%); }
.intro-paper { position: absolute; inset: 0; background: #F8F6F0; opacity: 0; }
.intro-scene { position: absolute; left: 0; top: 0; width: 2576px; height: 1717px; transform-origin: 0 0; will-change: transform, opacity; }
.intro-scene img { position: absolute; left: 0; top: 0; display: block; user-select: none; -webkit-user-drag: none; }
.intro-scene .wide { width: 2576px; height: 1717px; }
.intro-scene .close { width: 680px; height: 739px; }
.intro-sweep { position: absolute; left: 0; top: 0; width: 680px; height: 739px; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; }
.intro-sweep::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(255,236,196,.95) 50%, transparent 62%); transform: translateX(var(--sweep, -55%)); }
.intro-glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, rgba(54,140,224,.95) 0, rgba(31,98,179,.8) 42%, rgba(18,61,120,.45) 72%, rgba(18,61,120,0) 100%); }
.intro-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 47%, transparent 55%, #0b1424cc 100%); }
.intro-mark { position: absolute; left: 0; top: 0; width: 512px; height: 512px; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.intro-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-slogan { position: fixed; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; }
.intro-slogan em { font-style: normal; }
.intro-skip { position: fixed; z-index: 101; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
  font: 700 15px "Tajawal", "Segoe UI", Tahoma, sans-serif; color: #fff; background: #0b1424b3; border: 1px solid #C9A56680; border-radius: 999px; min-height: 44px; padding: 0 20px; cursor: pointer; }
.intro-skip:hover { background: #16253Bcc; }
.intro-skip:focus-visible { outline: 3px solid #368CE0; outline-offset: 3px; }
.intro-credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  text-align: center; font: 500 11px/1.6 "Tajawal", "Segoe UI", Tahoma, sans-serif; color: #A8B3C2; }
.intro-credit a { color: #fff; }
.intro-replay { position: fixed; z-index: 90; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-start: max(16px, env(safe-area-inset-left, 0px));
  font: 700 14px "Tajawal", "Segoe UI", Tahoma, sans-serif; color: #fff; background: #101D30; border: 1px solid #C9A566; border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; box-shadow: 0 10px 24px -12px #101D30; }
.intro-replay[hidden], .intro-skip[hidden] { display: none; }
.intro-replay:focus-visible { outline: 3px solid #368CE0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html.intro-active .intro { display: none; } html.intro-active .site-header .brand, html.intro-active .hero-title { visibility: visible; } }
.intro-photo-credit { flex-basis: 100%; margin: 0; text-align: center; font-size: 11px; line-height: 1.7; color: var(--muted, #5D6877); }
.intro-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }