@font-face { font-family: Alegreya; src: url('assets/fonts/Alegreya-Variable.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }
:root { color-scheme: light; --paper: #f2e6ce; --pale: #fff5df; --ink: #3b3025; --muted: #685742; --rust: #963f2b; --dark-rust: #76331f; --font: Alegreya, 'Palatino Linotype', 'Book Antiqua', Georgia, serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #963f2b; color: #fff5df; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-weight: 800; font-variation-settings: 'wght' 800; }
button,input { font: inherit; }
a { color: inherit; text-decoration: none; }
button,a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,input:focus-visible { outline: 3px solid var(--rust); outline-offset: 5px; }
.hero a:focus-visible,.hero button:focus-visible,.hero input:focus-visible,.site-header a:focus-visible { outline-color: var(--pale); }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.page-width { width: min(1270px,calc(100% - 112px)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 99; padding: 10px 18px; background: var(--pale); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.reading-progress { position:fixed; inset:0 0 auto; height:3px; pointer-events:none; z-index:30; }
.reading-progress span { height:100%; display:block; background:#bd6245; transform:scaleX(0); transform-origin:left; }
.wordmark { font-size: 33px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; }
.wordmark > span { color: #c16e48; }
.site-header { position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding-block:31px; color:var(--pale); }
.header-cta { display:flex; align-items:center; gap:23px; font-size:18px; font-weight:600; }
.header-cta > span { font-family:serif; font-size:24px; transition:transform .25s; }
.header-cta:hover > span { transform:translate(3px,-3px); }
.header-actions { display:flex; align-items:center; gap:22px; }
.mood-toggle { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #f6e5c247; border-radius:50%; background:#2a211b26; color:#fff0d3; transition:background .25s,border-color .25s; }
.mood-toggle[hidden] { display:none; }
.mood-toggle:hover { background:#f6e5c21f; border-color:#f6e5c28c; }
.mood-toggle:focus-visible { outline-color:var(--pale); }
.mood-toggle svg { grid-area:1/1; width:22px; height:22px; }
.mood-sun,[data-mood='night'] .mood-moon { display:none; }
[data-mood='night'] .mood-sun { display:block; }
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:940px; min-height:max(940px,100svh); background:#34251d; color:var(--pale); }
.scene-art { overflow:hidden; display:block; }
.scene-art > img { width:100%; height:100%; object-fit:cover; }
/* Grade the existing paint, leaving paper, text, layout, and the night hero intact. */
.scene-art:not(.hero-art) { isolation:isolate; transition:filter .4s ease; }
.scene-art:not(.hero-art)::after { content:''; position:absolute; inset:0; z-index:3; background:#202b56; mix-blend-mode:multiply; opacity:0; pointer-events:none; transition:opacity .4s ease; }
[data-mood='night'] .scene-art:not(.hero-art) { filter:saturate(.64) contrast(1.09) brightness(.86); }
[data-mood='night'] .scene-art:not(.hero-art)::after { opacity:.57; }
.hero-art { position:absolute; inset:0; z-index:-3; }
.hero-art > img { object-position: center 58%; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 50% 42%,#1d140e80,#1d140e28 72%),linear-gradient(0deg,#1d140ea3,transparent 40%); }
.hero-content { padding-top:154px; padding-bottom:112px; text-align:center; }
.hero-content > h1,.hero-content > p,.hero-content > .signup-embed { margin-inline:auto; }
h1 { max-width:710px; margin-top:24px; font-size:clamp(70px,6.5vw,96px); line-height:.97; letter-spacing:-3.2px; text-shadow:0 2px 20px #1d140e30; }
h1 > span { font-weight:700; font-variation-settings:'wght' 700; }
.hero-subhead { max-width:590px; margin-top:27px; font-size:20px; line-height:1.48; color:#fff0d7; text-wrap:pretty; }
.honorific { font-family:'Segoe UI',Tahoma,serif; white-space:nowrap; line-height:1; font-size:1.05em; }
.signup-embed { max-width:480px; margin-top:25px; }
.substack-frame { display:block; width:100%; max-width:100%; border:0; background:#fff; color-scheme:light; }
.subscribe-fallback { display:inline-block; margin-top:9px; font-size:13px; color:#f2dec4; text-decoration:underline; text-underline-offset:3px; }
.signup-pending { padding-block:20px; font-size:17px; }
.signup-embed:focus-visible,.substack-frame:focus-visible { outline:3px solid var(--rust); outline-offset:5px; }
.hero .signup-embed:focus-visible,.hero .substack-frame:focus-visible { outline-color:var(--pale); }
.hero-bottom { position:absolute; bottom:22px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; color:#f2ddbe; }
.hero-bottom p:first-child { font-style:italic; }
.hero-bottom p:last-child { display:flex; align-items:center; gap:28px; }
.hero-bottom p:last-child > span { font-size:24px; }
.eyebrow { font-size:18px; font-weight:500; font-style:italic; color:#805c43; }
h2 { font-size:76px; line-height:1.02; letter-spacing:-2.5px; }
h2 em { color:var(--rust); font-weight:700; }
.promise { position:relative; padding-bottom:80px; background:var(--paper); }
.promise::before { content:''; position:absolute; top:-14px; left:0; right:0; height:16px; z-index:3; background:var(--paper); clip-path:polygon(0 65%,3% 38%,7% 55%,10% 30%,15% 45%,20% 22%,26% 52%,32% 25%,39% 43%,46% 17%,53% 39%,60% 16%,68% 38%,75% 25%,81% 45%,88% 23%,94% 44%,100% 20%,100% 100%,0 100%); }
.promise-canvas { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:center; min-height:650px; padding:72px 0 40px max(56px,calc((100vw - 1270px)/2)); }
.promise-art { position:relative; grid-column:2; grid-row:1; align-self:stretch; min-width:0; min-height:510px; width:100%; mask-image:linear-gradient(90deg,transparent,black 10%),linear-gradient(0deg,transparent,black 14%); mask-composite:intersect; }
.promise-art > img { position:absolute; inset:0; object-position:center 55%; }
.promise-copy { position:relative; grid-column:1; grid-row:1; z-index:1; min-width:0; width:100%; max-width:520px; }
.promise h2 { margin-top:24px; font-size:84px; }
.promise-lead { margin-top:27px; max-width:100%; overflow-wrap:break-word; font-size:21px; color:#554433; }
.rhythm { list-style:none; padding:0; display:flex; gap:40px; margin-top:28px; position:relative; z-index:2; }
.rhythm li { flex:1; position:relative; padding-left:18px; }
.rhythm li::before { content:''; width:6px; height:6px; background:var(--rust); position:absolute; top:14px; left:0; border-radius:50% 30% 50% 35%; }
.rhythm h3 { font-size:25px; letter-spacing:-.4px; line-height:1.3; font-weight:700; }
.rhythm p { font-size:17px; color:var(--muted); line-height:1.5; margin-top:10px; }
.journey { background:#e9d9bd; }
.journey-heading { padding-block:90px 70px; position:relative; }
.journey-heading .eyebrow { margin-bottom:20px; }
.journey-heading > p:last-child { position:absolute; right:0; bottom:77px; max-width:390px; font-size:18px; color:var(--muted); line-height:1.6; }
.journey-heading h2 { font-size:69px; }
.moment { position:relative; min-height:690px; min-height:clamp(620px,75svh,820px); isolation:isolate; overflow:hidden; overflow:clip; }
.moment-art { position:absolute; inset:0; z-index:-2; }
.moment-caption { position:absolute; padding:32px 36px 36px; width:420px; bottom:50px; background:#f7ecd5f5; color:var(--ink); box-shadow:0 4px 20px #2c180b0a; }
.moment-caption .place { font-style:italic; font-size:16px; margin-bottom:15px; color:#795137; }
.moment-caption h3 { font-size:43px; line-height:1.05; letter-spacing:-1px; }
.moment-caption > p:last-child { margin-top:17px; font-size:17px; line-height:1.55; }
.moment-makkah { width:calc(100% - 56px); margin-right:56px; }
.moment-makkah .moment-caption { right:max(38px,calc((100vw - 1270px)/2 - 56px)); bottom:38px; transform-origin:bottom right; }
.moment-makkah .moment-art > img { object-position:center 50%; }
.moment-hijrah { margin-top:42px; }
.moment-hijrah::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#251e1755,transparent 48%); z-index:-1; }
.moment-hijrah .moment-caption { left:max(56px,calc((100vw - 1270px)/2)); background:#3c3028ed; color:#fff1d7; }
.moment-hijrah .place { color:#f3c49e; }
.moment-khandaq { width:calc(100% - 112px); margin:64px auto; min-height:660px; }
.moment-khandaq .moment-caption { right:32px; bottom:32px; background:#f5e8cef5; }
.moment-return .moment-caption { left:max(56px,calc((100vw - 1270px)/2)); background:#8c3d29f2; color:#fff3dd; }
.moment-return .place { color:#f8d9b8; }
.journey-invitation { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:46px 58px; }
.journey-invitation > p { font-size:22px; line-height:1.4; }
.journey-invitation strong { font-weight:700; }
.ink-link { display:inline-flex; align-items:center; gap:35px; color:var(--rust); font-size:22px; font-weight:700; }
.ink-link > span { font:24px/1 Georgia,serif; transition:transform .25s; }
.ink-link:hover > span { transform:translate(4px,-4px); }
.why-daily { position:relative; isolation:isolate; overflow:hidden; color:#fff2d9; background:#543727; }
.why-art { position:absolute; inset:0; z-index:-3; }
.why-art > img { object-position:center 55%; }
.why-shade { position:absolute; inset:0; background:linear-gradient(90deg,#2f2318f2 0%,#392819c4 46%,#3a291c80),linear-gradient(0deg,#342519dc,transparent 55%); z-index:-2; }
.why-content { padding-block:100px 70px; position:relative; }
.why-copy { max-width:510px; }
.why-copy .eyebrow { color:#f2d2b2; margin-bottom:24px; }
.why-copy h2 { font-size:78px; }
.why-copy h2 em { color:#e7b68e; }
.why-copy > p:not(.eyebrow) { font-size:20px; margin-top:23px; max-width:410px; color:#fae5c7; }
.year-note { margin-top:27px; max-width:440px; }
.year-kicker { font-size:22px; line-height:1.4; color:#fff1d3; }
.year-number { font-size:1.22em; font-weight:800; letter-spacing:-.6px; }
.year-unit { font-weight:500; }
.year-note > p:last-child { font-size:16px; line-height:1.45; margin-top:7px; color:#e9d1b1; }
.source-note { display:flex; justify-content:space-between; align-items:center; gap:55px; margin-top:75px; padding:32px 38px; background:#f1e4cbeF; color:var(--ink); max-width:880px; margin-left:auto; }
.source-note h3 { font-size:35px; line-height:1; min-width:205px; letter-spacing:-.8px; }
.source-note h3 em { color:var(--rust); font-weight:700; }
.source-note > p { font-size:18px; line-height:1.5; max-width:420px; }
.join { position:relative; min-height:790px; background:#ebd8b5; isolation:isolate; overflow:hidden; }
.join-art { position:absolute; width:68%; right:0; inset-block:0; z-index:-2; }
.join-art > img { object-position:65% center; }
.join-paper { position:relative; margin-block:68px; margin-left:max(56px,calc((100vw - 1270px)/2)); padding:42px 44px; width:600px; background:#f4e7ced9; backdrop-filter:blur(3px); }
.join-paper .eyebrow { margin-bottom:22px; }
.join h2 { font-size:77px; }
.join-paper > p:not(.eyebrow):not(.launch-note) { margin-top:24px; font-size:18px; line-height:1.6; }
.join .signup-embed { margin-top:30px; }
.join .subscribe-fallback { color:var(--muted); }
.launch-note { font-size:14px; font-style:italic; color:#75573e; margin-top:25px; }
.footer { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; padding-block:42px; }
.footer .wordmark { font-size:30px; }
.footer p { font-size:14px; color:#68523e; margin-top:12px; }
.footer > p { text-align:right; margin-top:0; line-height:1.6; }
.noscript-note { padding:18px; font-size:17px; text-align:center; background:#3d2d20; color:var(--pale); }
.reveal { opacity:1; transform:none; }
.motion-ready .reveal { transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.is-pending { opacity:0; transform:translateY(25px); }
@media (prefers-reduced-motion:no-preference) {
  .hero-enter { animation:enter .9s cubic-bezier(.2,.7,.2,1) both; }
  h1.hero-enter { animation-delay:.1s; }
  .hero-subhead.hero-enter { animation-delay:.22s; }
  .hero .signup-embed.hero-enter { animation-delay:.34s; }
}
@keyframes enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1700px) {
  .hero-content { padding-top:190px; }
  h1 { font-size:106px; }
  .hero { min-height:1050px; }
}
@media (min-width:761px) and (max-height:900px) {
  .hero { min-height:840px; }
  .hero-content { padding-top:116px; padding-bottom:100px; }
  h1 { font-size:80px; }
  .hero-subhead { margin-top:22px; max-width:590px; font-size:19px; }
  .hero .signup-embed { margin-top:20px; }
}
@media (max-width:1120px) {
  .page-width { width:calc(100% - 72px); }
  .hero-content { padding-top:145px; }
  h1 { font-size:83px; }
  .promise-copy { margin-left:0; }
  .promise h2 { font-size:76px; }
  .promise-canvas { min-height:610px; padding-left:36px; }
  .rhythm { gap:26px; }
  .rhythm h3 { font-size:23px; }
  .rhythm p { font-size:16px; }
  .journey-heading h2 { font-size:61px; }
  .journey-heading > p:last-child { max-width:300px; font-size:17px; bottom:73px; }
  .moment { min-height:620px; }
  .moment-caption { width:375px; padding:27px 30px; }
  .moment-caption h3 { font-size:39px; }
  .moment-makkah .moment-caption { right:30px; }
  .moment-hijrah .moment-caption,.moment-return .moment-caption { left:36px; }
  .moment-khandaq { width:calc(100% - 72px); min-height:600px; }
  .why-copy { max-width:470px; }
  .why-copy h2 { font-size:71px; }
  .join-paper { margin-left:36px; width:560px; padding:36px; }
}
@media (max-width:760px) {
  body { font-size:18px; }
  .page-width { width:calc(100% - 42px); }
  .site-header { padding-block:25px; }
  .wordmark { font-size:28px; letter-spacing:-1.3px; }
  .header-cta { font-size:15px; gap:13px; }
  .header-cta > span { font-size:20px; }
  .header-actions { gap:9px; }
  .hero { min-height:1000px; min-height:max(1000px,100svh); }
  .hero-art > img { object-position:53% center; }
  .hero-shade { background:linear-gradient(0deg,#20150fe8 0%,#1d140e70 45%,#1d140e40 100%); }
  .hero-content { padding-top:150px; padding-bottom:130px; }
  h1 { font-size:clamp(62px,11.6vw,84px); letter-spacing:-1.9px; line-height:1; margin-top:25px; }
  h1 > span { font-size:.78em; letter-spacing:-1.4px; }
  .hero-subhead { font-size:20px; max-width:380px; margin-top:28px; }
  .hero .signup-embed { margin-top:31px; }
  .signup-embed { max-width:100%; }
  .hero-bottom { bottom:24px; align-items:flex-end; font-size:12px; gap:12px; }
  .hero-bottom p:last-child { max-width:175px; text-align:right; line-height:1.3; gap:12px; }
  .hero-bottom p:last-child > span { font-size:20px; }
  .eyebrow { font-size:16px; }
  h2 { font-size:56px; letter-spacing:-1.6px; }
  .promise { padding-bottom:54px; }
  .promise-canvas { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; gap:0; }
  .promise-art { position:relative; width:100%; height:auto; min-height:0; aspect-ratio:16/9; order:0; mask-image:linear-gradient(0deg,transparent,black 20%); mask-composite:add; }
  .promise-copy { padding-top:0; margin:-10px 21px 0; width:auto; order:1; max-width:none; }
  .promise h2 { font-size:65px; margin-top:19px; }
  .promise h2 br:first-child { display:initial; }
  .promise h2 em { display:inline; }
  .promise-lead { font-size:20px; margin-top:22px; }
  .rhythm { display:grid; grid-template-columns:1fr 1fr; gap:28px 22px; margin-top:38px; }
  .rhythm li { padding-left:14px; }
  .rhythm li::before { width:4px; height:4px; top:12px; }
  .rhythm h3 { font-size:22px; line-height:1.2; }
  .rhythm p { font-size:16px; margin-top:9px; }
  .journey-heading { padding-block:56px 42px; }
  .journey-heading h2 { font-size:52px; }
  .journey-heading > p:last-child { position:static; margin-top:25px; font-size:18px; max-width:100%; }
  .journey-heading > p:last-child br { display:none; }
  .moment { min-height:0; display:flex; flex-direction:column; overflow:visible; }
  .moment-art { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:16/9; z-index:0; }
  .moment-art > img { object-position:center; }
  .moment-caption { position:relative; inset:auto!important; width:calc(100% - 42px); margin:-18px 21px 0; padding:24px 25px 27px; z-index:1; background:#f5e8cf; box-shadow:none; }
  .moment-caption .place { font-size:15px; margin-bottom:13px; }
  .moment-caption h3 { font-size:38px; letter-spacing:-.7px; }
  .moment-caption > p:last-child { font-size:17px; line-height:1.5; }
  .moment-makkah { width:100%; margin:0; }
  .moment-hijrah { margin-top:30px; }
  .moment-hijrah::after { display:none; }
  .moment-hijrah .moment-caption { background:#403229; }
  .moment-khandaq { width:100%; min-height:0; margin:30px 0; }
  .moment-return .moment-caption { background:#8c3d29; }
  .journey-invitation { align-items:flex-start; padding-block:35px 46px; gap:18px; }
  .journey-invitation > p { font-size:18px; max-width:210px; }
  .ink-link { font-size:18px; gap:14px; white-space:nowrap; }
  .why-content { padding-block:62px 45px; }
  .why-copy { max-width:100%; }
  .why-copy h2 { font-size:66px; }
  .why-copy > p:not(.eyebrow) { font-size:19px; max-width:100%; }
  .why-art > img { object-position:48% center; }
  .why-shade { background:linear-gradient(90deg,#2c2119e8,#39281996),linear-gradient(0deg,#342519dc,transparent 65%); }
  .year-note { margin-top:24px; }
  .year-kicker { font-size:21px; }
  .year-note > p:last-child { font-size:16px; margin-top:6px; }
  .source-note { display:block; padding:25px; margin-top:50px; }
  .source-note h3 { font-size:35px; min-width:0; }
  .source-note h3 br { display:none; }
  .source-note > p { font-size:17px; margin-top:17px; }
  .join { min-height:0; padding-bottom:25px; }
  .join-art { position:relative; width:100%; height:auto; aspect-ratio:16/9; z-index:-1; }
  .join-art > img { object-position:center; }
  .join-paper { padding:29px 25px; width:calc(100% - 42px); margin:-25px 21px 0; background:#f4e7ce; backdrop-filter:none; }
  .join h2 { font-size:64px; }
  .join-paper > p:not(.eyebrow):not(.launch-note) { font-size:18px; }
  .launch-note { font-size:14px; }
  .footer { padding-block:33px; gap:25px; }
  .footer .wordmark { font-size:27px; }
  .footer p { font-size:12px; max-width:230px; }
}
@media (max-width:380px) {
  .page-width { width:calc(100% - 36px); }
  .wordmark { font-size:26px; }
  .header-cta { font-size:14px; }
  h1 { font-size:58px; }
  .hero-content { padding-top:140px; }
  .hero { min-height:1000px; }
  .hero-subhead { font-size:19px; }
  .promise h2 { font-size:59px; }
  .journey-heading h2 { font-size:46px; }
  .rhythm { gap:27px 18px; }
  .rhythm h3 { font-size:20px; }
  .rhythm p { font-size:15px; }
  .moment-caption { padding-inline:21px; }
  .moment-caption h3 { font-size:34px; }
  .journey-invitation { flex-direction:column; }
  .journey-invitation > p { max-width:none; }
  .join-paper { padding-inline:21px; }
  .join h2 { font-size:57px; }
  .footer { flex-direction:column; }
  .footer > p { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .motion-ready .reveal.is-pending { opacity:1; transform:none; }
  .scene-art > img { transform:none; }
}
/* Localized light, independent camels, and the Khandaq descent. */
.scene-plane { position:absolute; pointer-events:none; visibility:hidden; }
.hero-effects { mix-blend-mode:screen; }
.effects-on [data-atmosphere='hero'].is-effect-visible .hero-effects.is-plane-ready { visibility:visible; }
.fire-glow { position:absolute; display:block; left:43.2%; top:72.2%; border-radius:50%; transform-origin:center; translate:-50% -50%; animation-play-state:paused; }
.fire-glow-outer { width:40%; height:51%; left:40.5%; top:67%; background:radial-gradient(ellipse,#d09a567d 0%,#bb743342 38%,transparent 73%); animation:fire-outer 2.37s linear -.83s infinite paused; }
.fire-glow-middle { width:23%; height:35%; background:radial-gradient(ellipse,#e2ac66a3 0%,#d18a405e 43%,transparent 73%); animation:fire-middle 1.73s linear -1.31s infinite paused; }
.fire-glow-inner { width:12%; height:27%; top:69.8%; background:radial-gradient(ellipse,#f3c78a9c 0%,#dca35652 45%,transparent 72%); animation:fire-inner 2.91s linear -.27s infinite paused; }
.painted-star { position:absolute; display:block; width:.14%; aspect-ratio:1; border-radius:50%; background:#fff2d8d9; box-shadow:0 0 5px 1px #e5cb9f4d; opacity:.4; animation:painted-twinkle var(--twinkle-time) ease-in-out var(--twinkle-delay) infinite paused; }
.effects-on [data-atmosphere='hero'].is-effect-visible .fire-glow,.effects-on [data-atmosphere='hero'].is-effect-visible .painted-star { animation-play-state:running; }
.effects-paused .fire-glow,.effects-paused .painted-star { animation-play-state:paused!important; }
@keyframes fire-outer {
  0%,100% { opacity:.44; scale:.98; } 7% { opacity:.78; scale:1.04; } 13% { opacity:.23; scale:.96; } 24% { opacity:.66; scale:1.02; } 31% { opacity:.34; scale:.985; } 44% { opacity:.85; scale:1.05; } 49% { opacity:.31; scale:.98; } 67% { opacity:.65; scale:1.02; } 73% { opacity:.26; scale:.97; } 87% { opacity:.75; scale:1.04; }
}
@keyframes fire-middle {
  0%,100% { opacity:.52; scale:1; } 11% { opacity:.9; scale:1.06; } 18% { opacity:.26; scale:.96; } 29% { opacity:.78; scale:1.035; } 43% { opacity:.32; scale:.98; } 51% { opacity:.93; scale:1.05; } 58% { opacity:.38; scale:.99; } 76% { opacity:.82; scale:1.04; } 91% { opacity:.29; scale:.97; }
}
@keyframes fire-inner {
  0%,100% { opacity:.45; scale:.98; } 5% { opacity:.8; scale:1.055; } 16% { opacity:.22; scale:.95; } 33% { opacity:.73; scale:1.02; } 39% { opacity:.27; scale:.97; } 56% { opacity:.86; scale:1.05; } 64% { opacity:.3; scale:.98; } 81% { opacity:.7; scale:1.025; } 94% { opacity:.24; scale:.96; }
}
@keyframes painted-twinkle { 0%,100% { opacity:.4; } 24% { opacity:.65; } 47% { opacity:1; } 59% { opacity:.78; } 79% { opacity:.42; } }
[data-atmosphere='dust'] { timeline-scope:--khandaq; --trench-scale:.12; --trench-rise:-2.6%; }
[data-atmosphere='dust'] > .moment-art { view-timeline-name:--khandaq; view-timeline-axis:block; }
.trench-camera { position:absolute; inset:0; transform-origin:50% 74%; }
.trench-camera > img { width:100%; height:100%; object-fit:cover; }
.effects-on.effects-native .trench-camera { animation:trench-descent 1s linear both; animation-timeline:--khandaq; animation-range:entry 0% exit 100%; }
.effects-on.effects-native .trench-caption { animation:trench-arrival 1s linear both; animation-timeline:--khandaq; animation-range:entry 0% exit 100%; }
.effects-on.effects-fallback .trench-camera { transform:translateY(calc(var(--trench-rise) * var(--trench-depth,0))) scale(calc(1 + var(--trench-scale) * var(--trench-depth,0))); filter:brightness(calc(1 - .07 * var(--trench-depth,0))); }
.effects-on.effects-fallback .trench-caption { opacity:var(--trench-caption-opacity,1); transform:translateY(var(--trench-caption-y,0px)); }
@keyframes trench-descent {
  0%,14% { transform:translateY(0) scale(1); filter:brightness(1); }
  56%,100% { transform:translateY(var(--trench-rise)) scale(calc(1 + var(--trench-scale))); filter:brightness(.93); }
}
@keyframes trench-arrival {
  0%,44% { opacity:0; transform:translateY(18px); }
  60%,100% { opacity:1; transform:translateY(0); }
}
[data-atmosphere='caravan'] > .moment-art { view-timeline-name:--hijrah; view-timeline-axis:block; }
.dust-layer { --drift-scale:1; }
.effects-on [data-atmosphere='dust'].is-effect-visible .dust-layer.is-plane-ready { visibility:visible; }
.dust-particle { position:absolute; display:block; width:var(--size,5px); aspect-ratio:1.4; border-radius:60% 40% 55% 45%; background:#e2c89e; filter:blur(.8px); opacity:0; pointer-events:none; }
.effects-on.effects-native .dust-particle { animation:dust-forward 1s linear both; animation-timeline:--khandaq; animation-range:entry var(--dust-start,0%) exit var(--dust-end,100%); }
@keyframes dust-forward {
  0% { opacity:0; transform:translate3d(0,0,0) scale(.5); }
  20% { opacity:calc(.12 * var(--weight,1)); }
  56% { opacity:calc(.62 * var(--weight,1)); }
  78% { opacity:calc(.48 * var(--weight,1)); }
  100% { opacity:0; transform:translate3d(calc(var(--dx) * var(--drift-scale)),calc(var(--dy) * var(--drift-scale)),0) scale(2); }
}
.effects-on.effects-fallback .is-effect-visible .dust-particle { opacity:calc(var(--dust-opacity,0) * var(--weight,1)); transform:translate3d(calc(var(--dx) * var(--scene-progress,0) * var(--drift-scale)),calc(var(--dy) * var(--scene-progress,0) * var(--drift-scale)),0) scale(calc(.5 + var(--scene-progress,0) * 1.5)); }
.caravan-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; visibility:hidden; }
.caravan-layer { --caravan-travel:84px; }
.caravan-moving { width:100%; height:100%; }
.caravan-moving > img { width:100%; height:100%; max-width:none; object-fit:fill; transform-origin:top left; transform:translate(var(--caravan-x,0%),var(--caravan-y,0%)) scale(var(--caravan-scale,1)); }
.caravan-assets-ready .caravan-background,.caravan-assets-ready.is-effect-visible .caravan-layer.is-plane-ready { visibility:visible; }
.effects-on.effects-native .caravan-moving { animation:caravan-east 1s linear both; animation-timeline:--hijrah; animation-range:entry 0% exit 100%; }
.effects-on.effects-fallback .caravan-moving { transform:translateX(calc(var(--caravan-travel) * var(--scene-progress,0))); }
@keyframes caravan-east { from { transform:translateX(0); } to { transform:translateX(var(--caravan-travel)); } }
@media (max-width:760px) {
  [data-atmosphere='dust'] { --trench-scale:.075; --trench-rise:-1.4%; }
  .dust-layer { --drift-scale:.6; }
  .dust-particle { width:calc(var(--size,5px) * .7); }
  .dust-particle:nth-child(n+7) { display:none; }
  .caravan-layer { --caravan-travel:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-effects,.dust-layer { display:none!important; }
  .caravan-moving { animation:none!important; transform:none!important; }
  .trench-camera { animation:none!important; transform:none!important; filter:none!important; }
  .trench-caption { animation:none!important; opacity:1!important; transform:none!important; }
}