/* Ihsan landing page.
   Colours are the app's own sky tokens (IhsanDesignSystem/Tokens/SkyPalette.swift).
   main.js rewrites the custom properties below as the clock moves; the values
   here are the night state, which is also what a visitor without JavaScript sees. */

:root {
  --zenith: #0A0E28;
  --sky-top: #0E1330;
  --sky-bottom: #141A3A;
  --wash: #232B5C;
  --plane: #0A0E26;
  --ink: #ECEEF5;
  --ink-2: #A9AFC4;
  --metal: #C9A96A;
  --gold: #D2AC5C;
  --glow: #F0D18B;
  --panel: #191F46;
  --lapis: #39447F;
  --stars: 1;

  --serif: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --arabic: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-color: var(--metal); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 4px; }

/* ───────── Hero: the sky ───────── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  background: linear-gradient(180deg,
    var(--zenith) 0%, var(--sky-top) 42%, var(--sky-bottom) 84%, var(--wash) 100%);
}

.stars {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; border-radius: 50%;
  opacity: var(--stars);
  pointer-events: none;
}

.masthead {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0;
}

.wordmark {
  display: inline-flex; align-items: center; gap: .65rem;
  font: 500 1.375rem/1 var(--serif);
  text-decoration: none;
}
.wordmark img { border-radius: 22%; }
.wordmark-ar { font: 400 1.25rem/1 var(--arabic); color: var(--ink-2); }

.store {
  font-size: .9375rem; font-weight: 600; line-height: 1;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--gold); color: #10163A; text-decoration: none;
  white-space: nowrap;
}
.store-pending { background: none; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--metal); font-weight: 500; }

.hero-grid {
  position: relative;
  flex: 1;
  display: grid;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 4vh, 3rem) 0 1rem;
}

h1 {
  font: 500 clamp(2.75rem, 5.6vw, 5rem)/1.02 var(--serif);
  letter-spacing: -.018em;
  max-width: 11ch;
  text-wrap: balance;
}

.lede {
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--ink-2);
}

.instrument { min-width: 0; }
.instrument svg { display: block; width: 100%; height: auto; max-height: 62svh; overflow: visible; }

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* the drawn day */

.arc-faint { fill: none; stroke: var(--ink-2); stroke-width: .6; opacity: .22; }
.arc-track { fill: none; stroke: var(--metal); stroke-width: 1; opacity: .3; }
.arc-travelled {
  fill: none; stroke: var(--gold); stroke-width: 2.25; stroke-linecap: round;
  stroke-dasharray: 0 164;
}

.sunrise, .p-name, .p-time {
  font-family: var(--sans); fill: var(--ink); text-anchor: middle;
  text-transform: uppercase; letter-spacing: .16em;
}
.sunrise { font-size: 10.5px; fill: var(--ink-2); text-anchor: start; }
.p-name { font-size: 12px; font-weight: 600; }
.p-time { font-size: 11.5px; fill: var(--ink-2); }

.prayer[data-prayer="maghrib"] text { text-anchor: end; }

.glyph { fill: var(--gold); stroke: var(--lapis); stroke-width: .9; stroke-linejoin: round; }
.glyph-eye, .glyph-vein { fill: var(--lapis); stroke: none; }
.glyph-open { fill: none; stroke: var(--metal); stroke-width: 1.3; }

.now-halo { opacity: 0; transition: opacity .5s ease; }
.prayer.is-now .now-halo { opacity: 1; }
.prayer .glyph { transition: transform .5s ease; transform-box: fill-box; transform-origin: center; }
.prayer.is-now .glyph { transform: scale(1.22); }
.prayer.is-now .glyph-open { fill: var(--gold); stroke: var(--lapis); }

.orb-moon { fill: #EFE4D6; }
#orb[data-body="sun"] .orb-halo { opacity: 0; }
#orb .orb-sun, #orb .orb-moon, #orb .orb-halo { transition: opacity .4s ease; }
#orb[data-body="sun"] .orb-moon { opacity: 0; }
#orb[data-body="moon"] .orb-sun { opacity: 0; }
#orb[data-body="moon"] .orb-halo { opacity: .45; }

/* the one orchestrated moment: the arc is drawn once, on load */
@media (prefers-reduced-motion: no-preference) {
  .js .arc-track { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw 1.8s cubic-bezier(.6, 0, .2, 1) .15s forwards; }
  .js .prayer, .js #orb, .js .sunrise { opacity: 0; animation: arrive .7s ease forwards; }
  .js .prayer[data-prayer="fajr"] { animation-delay: .25s; }
  .js .sunrise { animation-delay: .5s; }
  .js .prayer[data-prayer="dhuhr"] { animation-delay: .9s; }
  .js .prayer[data-prayer="asr"] { animation-delay: 1.2s; }
  .js .prayer[data-prayer="maghrib"] { animation-delay: 1.45s; }
  .js .prayer[data-prayer="isha"] { animation-delay: 1.65s; }
  .js #orb { animation-delay: 1.9s; }
  .js .arc-travelled { opacity: 0; animation: arrive .8s ease 1.9s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes arrive { to { opacity: 1; } }

/* readout and scrubber */

.dial {
  position: relative;
  display: grid; gap: 1.25rem 3rem; align-items: end;
  padding: 1rem 0 2.25rem;
}
@media (min-width: 60rem) {
  .dial { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }
.readout-name { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--serif); }
.readout-ar { font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--arabic); color: var(--ink-2); }
.readout-line { flex-basis: 100%; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.scrub label { display: block; font-size: .9375rem; color: var(--ink-2); margin-bottom: .35rem; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 2.75rem; margin: 0;
  background: transparent; cursor: grab; touch-action: pan-y;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--metal); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--metal); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.5rem; height: 1.5rem; margin-top: calc(-.75rem + .5px);
  border-radius: 50%; border: 2px solid var(--sky-bottom);
  background: var(--gold); box-shadow: 0 0 0 1px var(--metal), 0 0 22px var(--glow);
}
input[type="range"]::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%; border: 2px solid var(--sky-bottom);
  background: var(--gold); box-shadow: 0 0 0 1px var(--metal), 0 0 22px var(--glow);
}

.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}

/* ───────── Below the horizon: the ground ───────── */

main { padding: 0 var(--gutter); }

.folios { padding: clamp(3.5rem, 9vw, 7rem) 0 0; }

.frieze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
}
.frieze img {
  width: 100%;
  border-radius: 11.5% / 5.3%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--metal) 45%, transparent),
              0 30px 60px -30px rgba(5, 7, 24, .55);
}
.frieze h2 {
  margin-top: 1.75rem;
  font: 500 1.4375rem/1.2 var(--serif);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.frieze p { margin-top: .6rem; color: var(--ink-2); font-size: 1rem; }

@media (max-width: 62rem) {
  .frieze { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
}
@media (max-width: 36rem) {
  /* on a phone the folios become a strip you swipe through */
  .frieze {
    display: flex; gap: 1.25rem;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }
  .frieze::-webkit-scrollbar { display: none; }
  .frieze li { flex: 0 0 72vw; scroll-snap-align: start; }
}

.also, .privacy {
  margin-top: clamp(4rem, 10vw, 8rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--metal) 40%, transparent);
}

.also h2, .privacy h2 {
  font: 500 clamp(1.875rem, 3.4vw, 2.75rem)/1.1 var(--serif);
  letter-spacing: -.012em;
}

.also dl {
  margin-top: 2.25rem;
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.also dt { font: 500 1.1875rem/1.3 var(--serif); }
.also dd { margin-top: .35rem; color: var(--ink-2); font-size: 1rem; max-width: 26rem; }

.privacy { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 60rem) {
  .privacy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.privacy-lead p { margin-top: 1.25rem; color: var(--ink-2); max-width: var(--measure); }
.privacy-list { max-width: 38rem; }
.privacy-list ul { margin: 1rem 0 1.5rem; }
.privacy-list li {
  padding: .9rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-2) 28%, transparent);
  color: var(--ink-2);
}
.privacy-list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink-2) 28%, transparent); }
.privacy-list strong { color: var(--ink); font-weight: 600; }
.privacy-list .fine { margin-bottom: 1.25rem; color: var(--ink-2); font-size: 1rem; }

.colophon {
  margin-top: clamp(4rem, 10vw, 8rem);
  padding: 2rem var(--gutter) 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
  border-top: 1px solid color-mix(in srgb, var(--metal) 40%, transparent);
  color: var(--ink-2); font-size: .9375rem;
}
.colophon .wordmark { color: var(--ink); margin-right: auto; }

/* ───────── Small screens ───────── */

@media (max-width: 36rem) {
  .wordmark-ar { display: none; }
  .store { font-size: .875rem; padding: .6rem .9rem; }
  .p-time, .sunrise { display: none; }
  .p-name { font-size: 17px; letter-spacing: .12em; }
  .prayer[data-prayer="maghrib"] .p-name { transform: translate(4px, 4px); }
}