/* ==========================================================================
   TafsirKurd 2.0 — homepage «قورئانا پیرۆز» story, driven by scroll.
   .tk-story.is-sd (set by tk3-home.js only when the browser supports CSS view
   timelines, the reader didn't ask for reduced motion, and the device isn't weak):
   the story is a tall track with the card pinned; one named view timeline (--story)
   drives everything, each piece in its own window of the scroll:
     tilt-in → basmala → words write in (per word: --a) → reading highlight (--h)
     → recitation wave (--w, --s) → tafsir unveiled → tools fly in → read button.
   A25 floor: transform/opacity only (compositor), nothing plays on its own, nothing
   infinite. Everyone else keeps the old 3-step behaviour from tk3.css.
   ========================================================================== */

/* pieces that only exist in the scroll version */
.tk-story__deco { position: absolute; inset: 50% auto auto 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  color: var(--green); opacity: .07; pointer-events: none; z-index: 0; }
.tk-story__deco svg { width: 100%; height: 100%; }
.tk-story__stage > :not(.tk-story__deco):not(.tk-story__bar) { position: relative; z-index: 1; }
.tk-story__bsm { margin: var(--s2) 0 0; font: 400 1.15rem/1.8 var(--f-quran); color: var(--green); opacity: .85; }
.tk-story__wave { display: none; }
.tk-story__tafsirwrap { position: relative; }
.tk-story__veil { display: none; }
.tk-story__read { margin-top: 24px; }

html .tk-quran .tk-story.is-sd { view-timeline: --story block; height: 200vh; }   /* 320vh held the ayah for 3+ screens and felt stuck */
html .tk-quran .tk-story.is-sd .tk-story__stage { position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 900px) {
  html .tk-quran .tk-story.is-sd { height: 300vh; }
  html .tk-quran .tk-story.is-sd .tk-story__stage { top: calc(var(--nav-h) + 8px); padding: var(--s5) var(--s4); }
  .tk-story.is-sd .tk-story__ayah { font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.95; margin: var(--s3) 0; }
  .tk-story.is-sd .tk-story__tafsir { font-size: 1.02rem; line-height: 1.85;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .tk-story__deco { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
}

/* every animated piece rides the story's view timeline */
.tk-story.is-sd .tk-story__stage, .tk-story.is-sd .tk-story__deco, .tk-story.is-sd .tk-story__bar i,
.tk-story.is-sd .tk-story__label, .tk-story.is-sd .tk-story__bsm, .tk-story.is-sd .tk-story__ayah .w,
.tk-story.is-sd .tk-story__ayah .w::after, .tk-story.is-sd .tk-story__wave i, .tk-story.is-sd .tk-story__tafsir,
.tk-story.is-sd .tk-story__veil, .tk-story.is-sd .tk-story__tools span, .tk-story.is-sd .tk-story__read {
  animation-timeline: --story; animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; }

/* 1 · the card tilts up into place as the section arrives */
.tk-story.is-sd .tk-story__stage { animation-name: tkStTilt; animation-range: entry 20% contain 6%; transform-origin: 50% 100%; }
@keyframes tkStTilt { from { transform: perspective(1400px) rotateX(18deg) scale(.9); opacity: .35; } to { transform: none; opacity: 1; } }
/* the star pattern turns slowly for the whole journey */
.tk-story.is-sd .tk-story__deco { animation-name: tkStSpin; animation-range: cover 0% cover 100%; }
@keyframes tkStSpin { from { transform: rotate(0deg) scale(.9); } to { transform: rotate(135deg) scale(1.1); } }
/* progress line along the top */
.tk-story.is-sd .tk-story__bar i { width: 100%; transform-origin: right; animation-name: tkStBar; animation-range: contain 0% contain 100%; transition: none; }
[dir="ltr"] .tk-story.is-sd .tk-story__bar i { transform-origin: left; }
@keyframes tkStBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 2 · reference + basmala */
.tk-story.is-sd .tk-story__label { animation-name: tkStRise; animation-range: contain 0% contain 6%; }
.tk-story.is-sd .tk-story__bsm { animation-name: tkStRise; animation-range: contain 5% contain 12%; }
@keyframes tkStRise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* 3 · the ayah writes itself, word by word (each word's window comes from --a) */
.tk-story.is-sd .tk-story__ayah .w { display: inline-block; position: relative; isolation: isolate;
  animation-name: tkStWord; animation-range: contain calc(var(--a) * 1%) contain calc(var(--a) * 1% + 6%); }
@keyframes tkStWord { from { opacity: 0; transform: translate3d(0, .5em, 0) scale(.94); } to { opacity: 1; transform: none; } }
/* 4 · a reading line sweeps under the words, right to left (--h) — like a finger following the text */
.tk-story.is-sd .tk-story__ayah .w::after { content: ''; position: absolute; inset: auto -.14em .12em; height: .1em; z-index: -1; border-radius: 1em;
  background: var(--green); opacity: .55; transform-origin: right; animation-name: tkStHi; animation-range: contain calc(var(--h) * 1%) contain calc(var(--h) * 1% + 4%); }
[dir="ltr"] .tk-story.is-sd .tk-story__ayah .w::after { transform-origin: left; }
@keyframes tkStHi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 5 · recitation wave: each bar rises and settles in its own window (--w), to its own height (--s) */
.tk-story.is-sd .tk-story__wave { display: flex; justify-content: center; align-items: center; gap: 4px; height: 38px; margin: 0 0 var(--s3); }
.tk-story.is-sd .tk-story__wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--green);
  animation-name: tkStBarWave; animation-range: contain calc(var(--w) * 1%) contain calc(var(--w) * 1% + 9%); }
@keyframes tkStBarWave { 0% { transform: scaleY(.08); opacity: .25; } 45% { transform: scaleY(var(--s)); opacity: 1; } 100% { transform: scaleY(.18); opacity: .45; } }

/* 6 · the Kurdish tafsir is unveiled top to bottom (a veil slides away — no clip-path repaint) */
.tk-story.is-sd .tk-story__tafsirwrap { overflow: hidden; }
.tk-story.is-sd .tk-story__tafsir { clip-path: none; opacity: 1; transition: none; animation-name: tkStTafsir; animation-range: contain 60% contain 74%; }
@keyframes tkStTafsir { from { transform: translate3d(0, 18px, 0); opacity: .2; } to { transform: none; opacity: 1; } }
.tk-story.is-sd .tk-story__veil { display: block; position: absolute; inset: -2px 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, color-mix(in srgb, var(--surface) 86%, transparent) 26px);   /* text shows through faintly: a promise of what's coming */
  animation-name: tkStVeil; animation-range: contain 60% contain 76%; }
@keyframes tkStVeil { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 105%, 0); } }

/* 7 · the tools fly in one by one, then the read button */
.tk-story.is-sd .tk-story__tools { opacity: 1; transform: none; transition: none; }
.tk-story.is-sd .tk-story__tools span { animation-name: tkStTool; animation-range: contain calc(78% + var(--i) * 3%) contain calc(84% + var(--i) * 3%); }
@keyframes tkStTool { from { opacity: .14; transform: translate3d(calc((var(--i) - 1) * -46px), 16px, 0) scale(.8); } to { opacity: 1; transform: none; } }
.tk-story.is-sd .tk-story__read { animation-name: tkStRead; animation-range: contain 88% contain 95%; }
@keyframes tkStRead { from { opacity: .14; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* scroll cue — people stopped at the empty card and took it for a bug. A pill at the card's foot:
   the chevrons bob a few times (finite, transform only), the whole cue fades out over the first
   stretch of the story's own timeline, so it is gone by the time the words start writing in. */
.tk-story__hint { display: none; }
html .tk-quran .tk-story.is-sd .tk-story__stage > .tk-story__hint { display: flex; justify-content: center; position: absolute; inset: auto 0 14px; z-index: 2; pointer-events: none;
  animation: tkStHint linear both; animation-timeline: --story; animation-range: contain 0% contain 11%; }
.tk-story__hint span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: var(--on-green); box-shadow: var(--shadow-1); }
.tk-story__hint svg { animation: tkStBob 1.3s var(--ease) 6; }
@keyframes tkStHint { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes tkStBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .tk-story__hint svg { animation: none; } }
/* room under the read button for the cue, so the two never overlap */
html .tk-quran .tk-story.is-sd .tk-story__stage { padding-bottom: 64px; }