@font-face{font-family:"Naskh";src:url(fonts/NotoNaskhArabic-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSansArabic-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSansArabic-Medium.ttf) format("truetype");font-weight:500;font-display:swap}

:root{
  --forest:#12352B;--green:#1F5C4A;--cream:#F3EEE3;--ink:#1D2A23;--gold:#D8B060;
  --sky-top:#1E3550;--sky-bot:#E7B7A3;--fg:#F3EEE3;--hill:#12352B;--night:0;
  --m:clamp(20px,4vw,64px);
  --s-hero:clamp(48px,7.2vw,116px);--s-h2:clamp(36px,4.6vw,72px);--s-body:clamp(17px,1.3vw,21px);--s-small:15px;
  --display:"Naskh","Noto Naskh Arabic",serif;--text:"Plex","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.22,1);--r:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);background:var(--forest);font:400 var(--s-body)/1.65 var(--text);transition:color .6s var(--ease);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--s-hero);line-height:1.08}
h2{font-size:var(--s-h2);line-height:1.12}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}

/* The sky behind everything. */
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 100%);overflow:hidden}
.arc{position:absolute;inset-inline:4vw;inset-block-start:7vh;width:92vw;height:56vh}
.arc path{stroke:color-mix(in srgb,var(--fg) 28%,transparent);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sun,.moon{position:absolute;inset-block-start:0;inset-inline-start:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;will-change:transform,opacity}
.sun{background:radial-gradient(circle,#FFF4D6 0 34%,#F7D27A 35% 48%,rgba(247,210,122,.35) 50%,rgba(247,210,122,0) 70%)}
.moon{width:56px;height:56px;margin:-28px 0 0 -28px;box-shadow:-12px 6px 0 2px #F3EEE3;background:transparent;opacity:0}
.stars{position:absolute;inset:0;opacity:var(--night);transition:opacity .4s}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#F3EEE3;animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.horizon{position:absolute;inset-inline:0;inset-block-end:0;width:100%;height:14vh}
.horizon path{fill:var(--hill);transition:fill .6s var(--ease)}

.top{position:absolute;inset-block-start:0;inset-inline:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:20px var(--m)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 24px/1 var(--display);background:#F3EEE3;color:#1D2A23;padding:6px 18px 6px 8px;border-radius:999px}
.mark img{border-radius:10px}

.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;text-decoration:none;font-weight:500;font-size:17px;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.pill:hover{transform:translateY(-3px)}
.pill:active{transform:scale(.97)}
.pill-solid{background:var(--gold);color:var(--ink)}
.pill-solid:hover{background:#E6C47E}
.pill-ghost{background:#F3EEE3;color:#1D2A23}
.pill-ghost:hover{background:#FFFFFF}
.pill-big{min-height:64px;padding:0 40px;font-size:20px}

/* Hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--m);padding:110px var(--m) 22vh;max-width:1440px;margin:0 auto}
.hero > *{min-width:0}
.hero-text{display:flex;flex-direction:column;gap:28px;min-width:0}
.lede{max-width:32ch;font-size:clamp(18px,1.5vw,23px)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.next{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:4px 8px;max-width:100%;align-items:center;padding:12px 20px;border-radius:999px;background:color-mix(in srgb,var(--fg) 12%,transparent);font-size:var(--s-small)}
.next b{font-weight:500}
.hero-phone{display:flex;justify-content:center}

.phone{position:relative;width:min(100%,330px);aspect-ratio:9/19.5;border-radius:48px;padding:10px;background:#0B1712;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.08);overflow:hidden}
.phone video,.phone .screen{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:38px}
.phone-float{animation:float 7s ease-in-out infinite;transform-origin:50% 60%}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-1deg)}}

/* The story: text on one side, a phone that stays and changes screens. */
.story{display:grid;grid-template-columns:1fr 1fr;max-width:1440px;margin:0 auto;padding:0 var(--m)}
.story-text{grid-column:1;grid-row:1;min-width:0}
.story-phone{grid-column:2;grid-row:1;position:sticky;inset-block-start:12vh;height:76vh;display:flex;align-items:center;justify-content:center}
.story-phone .phone{width:min(100%,320px);transform:rotate(2deg)}
.story-phone .screen{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.story-phone .screen.on{opacity:1;transform:none}
.chapter{min-height:110svh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:12vh 0}
.chapter > p:not(.time){max-width:34ch}
.time{display:inline-flex;align-self:flex-start;padding:6px 18px;border-radius:999px;background:color-mix(in srgb,var(--fg) 14%,transparent);font-weight:500;font-size:var(--s-small)}
.inline-shot{display:none}

.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;background:color-mix(in srgb,var(--fg) 12%,transparent);max-width:360px}
.tick{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;position:relative;flex:none;transition:background .4s var(--ease)}
.tick::after{content:"";position:absolute;inset-inline-start:10px;inset-block-start:6px;width:8px;height:14px;border:solid var(--forest);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.in .ticks li:nth-child(1) .tick{background:var(--gold);transition-delay:.3s}
.in .ticks li:nth-child(2) .tick{background:var(--gold);transition-delay:.8s}
.in .ticks li:nth-child(1) .tick::after{transform:rotate(45deg) scale(1);transition-delay:.3s}
.in .ticks li:nth-child(2) .tick::after{transform:rotate(45deg) scale(1);transition-delay:.8s}

.facts{display:flex;gap:12px;flex-wrap:wrap}
.fact{flex:1 1 140px;padding:20px;border-radius:var(--r);background:color-mix(in srgb,var(--fg) 12%,transparent);display:flex;flex-direction:column}
.fact b{font:700 clamp(40px,4vw,60px)/1 var(--display)}
.fact span{font-size:var(--s-small)}

.city{padding:24px;border-radius:var(--r);background:#FAF7F1;color:#1D2A23;display:flex;flex-direction:column;gap:12px;max-width:560px}
.city label{font-size:var(--s-small)}
.city input{border:0;background:transparent;color:#1D2A23;font:700 clamp(36px,4vw,56px)/1.2 var(--display);padding:0}
.city input:focus{outline:none}
.city input:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:12px}
.times{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.times .t{padding:12px 8px;border-radius:18px;background:#EFE8DA;text-align:center;display:flex;flex-direction:column;gap:2px;font-size:var(--s-small)}
.times .t span{font-weight:500;font-variant-numeric:tabular-nums}
.times .t.n{background:var(--gold);color:var(--ink)}
.times > p{grid-column:1/-1;font-size:var(--s-small)}

.deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;padding-block:12px}
.card{aspect-ratio:4/5;margin:0;padding:20px;border-radius:var(--r);display:flex;flex-direction:column;justify-content:space-between;transition:transform .9s var(--ease)}
.card blockquote{margin:0;font:700 clamp(17px,1.35vw,22px)/1.6 var(--display)}
.card figcaption{font-size:var(--s-small)}
.card-ayah{background:var(--forest);color:var(--cream);transform:rotate(4deg) translateY(24px)}
.card-dhikr{background:var(--cream);color:var(--ink);transform:translateY(48px)}
.card-wird{background:var(--gold);color:var(--ink);transform:rotate(-4deg) translateY(24px)}
.in .card-ayah{transform:rotate(3deg)}
.in .card-dhikr{transform:translateY(-10px)}
.in .card-wird{transform:rotate(-3deg)}
.films{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;margin-block-start:96px}
.films figure{margin:0;display:flex;flex-direction:column;gap:8px;font-size:var(--s-small)}
.films video{width:100%;aspect-ratio:406/720;object-fit:cover;border-radius:22px;background:#0B1712}

.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:560px}
.timeline li{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-radius:22px;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.timeline b{font:700 24px/1 var(--display);color:var(--gold)}
.timeline span{font-size:var(--s-small)}
.timeline em{font-style:normal;font-size:var(--s-small);white-space:nowrap}

.close{min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:16vh var(--m) 26vh}
.close-icon{border-radius:24px}
.foot{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:24px var(--m) 40px;font-size:var(--s-small);background:var(--hill);color:var(--cream)}

.js .rise{opacity:0;transform:translateY(28px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:100px;text-align:start}
  .hero-phone .phone{width:min(70%,280px)}
  .story{grid-template-columns:1fr}
  .story-phone{display:none}
  .chapter{min-height:auto;padding:12vh 0}
  .inline-shot{display:block;width:min(72%,300px);border-radius:32px}
  .times{grid-template-columns:repeat(3,1fr)}
  .deck{grid-template-columns:1fr;gap:14px;max-width:340px}
  .card{aspect-ratio:auto;min-height:150px;padding:20px;gap:16px}
  .card-ayah,.in .card-ayah{transform:rotate(2deg)}
  .card-dhikr,.in .card-dhikr{transform:rotate(-2deg)}
  .card-wird,.in .card-wird{transform:rotate(1deg)}
  .close{min-height:auto;padding:8vh var(--m) 18vh}
  .films{margin-block-start:24px}
  .films{grid-template-columns:repeat(2,1fr);margin-block-start:40px}
  .arc{height:40vh}
  .sun{width:64px;height:64px;margin:-32px 0 0 -32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rise{opacity:1;transform:none}
}