/* ==========================================================================
   TafsirKurd 2.0 — homepage hero motion (sky, orb, ridges).
   On load (finite, once): the orb rises, the three ridges come up back-to-front,
   stars fade in at night. While scrolling: parallax — far layers move slower than
   near ones, the orb sets behind the mountains, the headline drifts up and fades.
   A25 floor: transform/opacity only (compositor), nothing infinite, no filters.
   Scroll motion uses CSS scroll-driven animations where supported (Chrome/Android,
   Safari 26+); elsewhere a rAF-throttled fallback sets --hp (0..1) on the hero,
   only while it is on screen (tk3-home.js). prefers-reduced-motion: all off.
   ========================================================================== */
.tk-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tk-hero__orbwrap, .tk-hero__stars { position: absolute; inset: 0; }

/* orb: the glow is a soft gradient (the old 120px box-shadow was clipped into a
   visible square on phones); the disc is ::after so the glow can sit behind it */
.tk-hero__orb { background: none !important; box-shadow: none !important; }
.tk-hero__orb::before { content: ''; position: absolute; inset: -115%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-glow), rgba(0, 0, 0, 0)); }
.tk-hero__orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--orb);
  transition: background-color var(--d5) var(--ease); }

.tk-hero__ridge { position: absolute; inset-inline: 0; bottom: 0; height: 30%; min-height: 170px; }
.tk-hero__ridge svg { display: block; width: 100%; height: 100%; }
.tk-hero__ridge path { transition: fill var(--d5) var(--ease); }
@media (max-width: 900px) { .tk-hero__ridge { height: 220px; min-height: 0; } }

/* stars: one static layer of dots, visible only in the dark phases */
.tk-hero__stars { opacity: var(--stars, 0); transition: opacity var(--d5) var(--ease);
  background:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 17% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 26% 8%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 33% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 44% 6%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 52% 28%, #fff 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 61% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 69% 34%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 77% 9%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 85% 24%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 92% 15%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 12% 42%, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 39% 40%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 58% 44%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 88% 40%, #fff 50%, transparent 52%), radial-gradient(1.1px 1.1px at 3% 26%, #fff 50%, transparent 52%);
  background-repeat: no-repeat; }
[data-phase="night"]   { --stars: .9; }
[data-phase="maghrib"] { --stars: .45; }
[data-phase="fajr"]    { --stars: .25; }

@media (prefers-reduced-motion: no-preference) {
  /* ── on load, once ── */
  html.tk-js .tk-hero__orb { animation: tkOrbRise 1.9s var(--ease) both; }
  @keyframes tkOrbRise { from { translate: 0 110px; scale: .8; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
  html.tk-js .tk-hero__ridge svg { animation: tkRidgeUp 1.3s var(--ease) both; }
  html.tk-js .tk-hero__ridge--1 svg { animation-delay: .1s; }
  html.tk-js .tk-hero__ridge--2 svg { animation-delay: .28s; }
  html.tk-js .tk-hero__ridge--3 svg { animation-delay: .46s; }
  @keyframes tkRidgeUp { from { translate: 0 90px; } to { translate: 0 0; } }
  html.tk-js .tk-hero__stars { animation: tkStarsIn 2.6s var(--ease) .4s both; }
  @keyframes tkStarsIn { from { opacity: 0; } }

  /* ── while scrolling: native scroll-driven (compositor) ── */
  @supports (animation-timeline: scroll()) {
    .tk-hero__orbwrap, .tk-hero__stars, .tk-hero__ridge {
      animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .tk-hero__orbwrap    { animation-name: tkPxOrb; }
    .tk-hero__ridge--1   { animation-name: tkPxR1; }
    .tk-hero__ridge--2   { animation-name: tkPxR2; }
    .tk-hero__ridge--3   { animation-name: tkPxR3; }
    /* the headline drift/fade only where the hero fits one screen — on phones the hero
       also holds the verse of the day, which must stay readable while scrolling */
    @media (min-width: 901px) {
      .tk-hero__in { animation: tkPxIn linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    }
    /* stars already run tkStarsIn on load — parallax them via their own wrapper property */
    html.tk-js .tk-hero__stars { animation: tkStarsIn 2.6s var(--ease) .4s both, tkPxStars linear both;
      animation-timeline: auto, scroll(root block); animation-range: normal, 0 90vh; }
  }
  @keyframes tkPxOrb   { to { transform: translate3d(0, 36vh, 0); } }
  @keyframes tkPxStars { to { transform: translate3d(0, 20vh, 0); } }
  @keyframes tkPxR1    { to { transform: translate3d(0, 14vh, 0); } }
  @keyframes tkPxR2    { to { transform: translate3d(0, 7vh, 0); } }
  @keyframes tkPxR3    { to { transform: translate3d(0, 2vh, 0); } }
  @keyframes tkPxIn    { to { transform: translate3d(0, -9vh, 0); opacity: .1; } }

  /* ── fallback (no scroll-driven animations): tk3-home.js writes --hp 0..1 ── */
  html.tk-hpx .tk-hero__orbwrap  { transform: translate3d(0, calc(var(--hp, 0) * 36vh), 0); }
  html.tk-hpx .tk-hero__stars    { transform: translate3d(0, calc(var(--hp, 0) * 20vh), 0); }
  html.tk-hpx .tk-hero__ridge--1 { transform: translate3d(0, calc(var(--hp, 0) * 14vh), 0); }
  html.tk-hpx .tk-hero__ridge--2 { transform: translate3d(0, calc(var(--hp, 0) * 7vh), 0); }
  html.tk-hpx .tk-hero__ridge--3 { transform: translate3d(0, calc(var(--hp, 0) * 2vh), 0); }
  @media (min-width: 901px) {
    html.tk-hpx .tk-hero__in     { transform: translate3d(0, calc(var(--hp, 0) * -9vh), 0); opacity: calc(1 - var(--hp, 0) * .9); }
  }
}

/* ==========================================================================
   Hero app ad (replaces the verse-of-the-day card; the verse moved to §1).
   Real screenshots in a phone frame; four feature buttons switch the screen
   (crossfade = opacity/transform only). Keeps .tk-hero__quran for the card
   shell and its entrance animation.
   ========================================================================== */
.tk-hero__app { width: min(460px, 100%); padding: var(--s5) var(--s5) var(--s5); text-align: start; }
.tk-happ__head { display: flex; align-items: center; gap: 12px; }
.tk-happ__icon { flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 18px -8px rgba(15, 58, 37, .5); background: var(--green); }
.tk-happ__icon img { width: 100%; height: 100%; object-fit: cover; }
.tk-happ__head b { display: block; font-size: var(--t-lg); color: var(--green-ink); line-height: 1.35; }
.tk-happ__head small { color: var(--muted); font-size: var(--t-xs); }

.tk-happ__stage { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: var(--s4); align-items: center; margin: var(--s5) 0; }
.tk-happ__phone { position: relative; aspect-ratio: 540 / 1174; border-radius: 28px; padding: 6px; background: linear-gradient(145deg, #4a4f4c, #1c201e 45%, #2e3331); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 24px 40px -18px rgba(8, 20, 14, .65);
  transform: perspective(900px) rotateY(10deg) rotateZ(-1deg); transition: transform var(--d4) var(--ease); }
[dir="ltr"] .tk-happ__phone { transform: perspective(900px) rotateY(-10deg) rotateZ(1deg); }
.tk-hero__app:hover .tk-happ__phone { transform: perspective(900px) rotateY(2deg); }
/* no drawn notch: the real iPhone screenshots already carry the Dynamic Island */
.tk-happ__phone img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 23px;
  opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.tk-happ__phone img.is-on { opacity: 1; transform: none; }

.tk-happ__feats { display: grid; gap: 6px; }
.tk-happ__feats button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-md); text-align: start; color: var(--ink);
  border: 1px solid transparent; transition: background-color var(--d2) var(--ease), border-color var(--d2) var(--ease); }
.tk-happ__feats button:hover { background: var(--wash); }
.tk-happ__feats button[aria-pressed="true"] { background: var(--wash-2); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.tk-happ__feats .tk-icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--surface-2); color: var(--green); }
.tk-happ__feats button[aria-pressed="true"] .tk-icon { background: var(--green); color: var(--on-green); }
.tk-happ__feats b { display: block; font-size: var(--t-sm); line-height: 1.35; }
.tk-happ__feats small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }

.tk-happ__stores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* ==========================================================================
   "Today" band, right under the hero: the first thing to do now. Rows are links
   (not cards); each appears only when it is real. Phones: a list. Desktop: the
   rows sit side by side, continue-reading first and widest.
   ========================================================================== */
.tk-todaywrap { position: relative; z-index: 2; margin-top: calc(var(--s6) * -1); }
.tk-today { display: grid; gap: 0; padding: var(--s4); text-align: start; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2, 0 18px 40px -24px rgba(15, 58, 37, .35)); }
.tk-today__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 var(--s2) var(--s3); }
.tk-today__head h2 { margin: 0; font: 700 var(--t-lg)/1.3 var(--f-ui); color: var(--green-ink); }
.tk-today__date { color: var(--muted); font-size: var(--t-xs); }
.tk-today__rows { display: grid; }
.tk-today__row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; min-width: 0; padding: 12px var(--s2); color: var(--ink);
  border-top: 1px solid var(--line); transition: background-color var(--d2) var(--ease); }
.tk-today__row:hover { background: var(--wash); color: var(--ink); }
.tk-today__row:active { transform: scale(.99); }
.tk-today__row:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tk-today__txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.tk-today__txt small { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.tk-today__txt b { font-size: var(--t-md, 1rem); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-today__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wash-2); color: var(--green); }
.tk-today__ico .tk-icon { width: 20px; height: 20px; }
.tk-today__sub { color: var(--muted); font-size: var(--t-xs); }
.tk-today__ar { font: 400 1.35rem/1.9 var(--f-quran); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-today__thumb { flex: none; width: 64px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.tk-today__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the anchor row: continue reading (or the first step) */
.tk-today__read { min-height: 84px; background: var(--wash-2); border-top: 0; border-radius: var(--r-md); }
.tk-today__read:hover { background: color-mix(in srgb, var(--green) 12%, var(--wash-2)); }
.tk-today__read > .tk-icon { flex: none; width: 20px; height: 20px; color: var(--green); }
.tk-today__read b { font-size: var(--t-lg); color: var(--green-ink); }
.tk-today__glyph { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--surface); color: var(--green-ink);
  font: 400 1.9rem/1 var(--f-surah); box-shadow: 0 0 0 1px var(--line); }
.tk-today__bar { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: color-mix(in srgb, var(--green) 14%, transparent); overflow: hidden; }
.tk-today__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--green); transform-origin: right; transform: scaleX(var(--p, 0)); }
[dir="ltr"] .tk-today__bar i { transform-origin: left; }
@media (min-width: 901px) {
  .tk-today { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; padding: var(--s3); }
  .tk-today__head { flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--s4); border-inline-end: 1px solid var(--line); }
  .tk-today__rows { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1.35fr); gap: var(--s2); padding-inline-start: var(--s3); }
  .tk-today__row { border-top: 0; border-radius: var(--r-md); }
  .tk-today__row + .tk-today__row::before { content: ''; position: absolute; inset-inline-start: calc(var(--s2) / -2 - .5px); top: 14px; bottom: 14px; width: 1px; background: var(--line); }
}
@media (max-width: 900px) { .tk-todaywrap { margin-top: calc(var(--s7) * -1); } .tk-today__rows > .tk-today__read + .tk-today__row { border-top: 0; } }
@media (prefers-reduced-motion: reduce) { .tk-today__row { transition: none; } }

.tk-store { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: #0d1510; color: #fff;
  transition: transform var(--d2) var(--ease), background-color var(--d2) var(--ease); }
.tk-store:hover { background: #1a2a21; color: #fff; transform: translate3d(0, -2px, 0); }
.tk-store:active { transform: scale(.98); }
.tk-store svg { flex: none; width: 22px; height: 24px; }
.tk-store span { display: grid; line-height: 1.2; text-align: start; }
.tk-store small { font-size: 10px; opacity: .8; }
.tk-store b { font-size: 15px; font-weight: 700; }
:root[data-theme="sakina"] .tk-store { background: #F4E8CC; color: #0d1510; }
:root[data-theme="sakina"] .tk-store:hover { background: #fff; color: #0d1510; }
[data-phase="maghrib"] .tk-happ__phone, [data-phase="night"] .tk-happ__phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 24px 40px -18px rgba(0, 0, 0, .8); }

@media (max-width: 420px) {
  .tk-happ__stage { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
  .tk-happ__feats button { padding: 7px 8px; gap: 8px; }
  .tk-happ__feats .tk-icon { width: 30px; height: 30px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tk-happ__phone img, .tk-happ__phone { transition: none; } }