/* ==========================================================================
   Landing page only. Apple-grade restraint (docs/DESIGN-APPLE.md §7): one focal object (the sentence card) on a calm
   aurora; big quiet numbers; khatam tiles only where they mean progress (roadmap, final call to action).
   Rules: the h1 (LCP) is visible from the first paint; transform/opacity animations only; every loop is gated by
   motion tier (html[data-motion]); tier 0 = calm static page; logical properties (RTL-first).
   ========================================================================== */

/* ---- hero: copy intro (pure CSS; starts visible so the LCP paint never waits) ---------------------------------- */
.hero-grid { position: relative; }
.hero-copy { position: relative; z-index: 1; }
.hero-title .hw { display: inline-block; }
html:not([data-motion="0"]) .hero-title .hw { animation: hw-rise 1000ms var(--spring) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
html[data-motion="1"] .hero-title .hw { animation: hw-fade 500ms var(--ease-out) both; animation-delay: 0ms; }
.hero-title .accent { white-space: nowrap; }
html:not([data-motion="0"]) .eyebrow, html:not([data-motion="0"]) .hero-lead, html:not([data-motion="0"]) .hero-in {
  animation: fade-up 900ms var(--spring) both;
}
html:not([data-motion="0"]) .hero-lead { animation-delay: 320ms; }
html:not([data-motion="0"]) .hero-cta.hero-in { animation-delay: 420ms; }
html:not([data-motion="0"]) .hero-proof.hero-in { animation-delay: 520ms; }

.hero-proof { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof .ic { inline-size: 16px; block-size: 16px; color: var(--teal); stroke-width: 2.25; }

/* ---- hero: stage (the sentence card materialises: blur + scale together, Apple "materialize, don't just fade") --- */
.hero-stage { position: relative; display: grid; place-items: center; }
.hero-card { position: relative; z-index: 1; }
html[data-motion="2"] .hero-card, html[data-motion="3"] .hero-card { animation: card-in 1100ms var(--spring) 260ms backwards; }
html[data-motion="1"] .hero-card { animation: hw-fade 500ms var(--ease-out) backwards; }
@media (max-width: 959px) { .hero-grid { gap: 32px; } }

/* ---- real content counters: big quiet numbers, no boxes ------------------------------------------------------- */
.stats { padding-block: clamp(36px, 5vw, 64px); }
.stats-wrap { display: grid; gap: 18px; }
.stats-t { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.stats-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 0; }
.stat-i { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding-inline-start: 14px; border-inline-start: 1px solid var(--sep); }
.stat-i dd { margin: 0; }
.stat-i .count { display: block; font-family: var(--f-display); font-weight: 750; font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); line-height: 1.15; color: var(--ink); }
.stat-i dt { color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); line-height: 1.5; }
@media (min-width: 820px) {
  .stats-wrap { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
  .stats-t { max-inline-size: 7em; line-height: 1.5; }
  .stats-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- roadmap: khatam tiles light up as you scroll -------------------------------------------------------------- */
.rnode { position: relative; z-index: 1; inline-size: 58px; justify-self: center; transition: transform 420ms var(--spring); }
.rnode b { position: relative; margin-block-end: 8%; font-size: var(--fs-base); font-weight: 800; color: var(--ti); transition: color 300ms; }
.rnode .k-face, .rnode .k-ledge { transition: fill 320ms var(--ease-std), stroke 320ms var(--ease-std); }
.step.lit .rnode { --tf: var(--tile-done); --ts: var(--tile-done); --tl: var(--tile-done-ledge); --ti: var(--on-done, #fff); transform: scale(1.08); }
.step.soon .rnode { --tf: var(--paper-2); --ts: var(--line); --tl: var(--hair); --ti: var(--ink-2); }
.step.soon .rnode .k-face { stroke-dasharray: 10 8; stroke-width: 4; }
.step.soon.lit .rnode { --tf: var(--paper-2); --ts: var(--line); --tl: var(--hair); --ti: var(--ink-2); transform: none; }
html[data-motion="0"] .step.lit .rnode { transform: none; }
@media (min-width: 900px) { .step .rnode { grid-column: 2; grid-row: 1; } }
.road-fill { background: linear-gradient(to bottom, var(--indigo), var(--teal-deco)); }

/* ---- exam dial: the label always says practice estimate, not official ------------------------------------------ */
.dial-num small[dir="rtl"] { font-weight: 600; font-size: var(--fs-2xs); line-height: 1.45; margin-block-start: 4px; }
#exams.on-dark { background: radial-gradient(90% 70% at 100% 0%, rgb(79 82 224 / 0.38), transparent 65%), radial-gradient(70% 60% at 0% 100%, rgb(34 184 171 / 0.22), transparent 70%), #000; }

/* ---- final call to action -------------------------------------------------------------------------------------- */
.cta-final { padding-block: clamp(40px, 6vw, 80px) 0; }
.cta-panel {
  position: relative; overflow: hidden; margin-inline: 0; display: grid; justify-items: center; text-align: center; gap: 16px;
  padding: clamp(36px, 6vw, 72px) clamp(18px, 4vw, 48px);
  background: radial-gradient(110% 80% at 50% 0%, rgb(79 82 224 / 0.55) 0%, transparent 62%), radial-gradient(70% 60% at 100% 100%, rgb(34 184 171 / 0.35), transparent 70%), #000;
}
.cta-panel h2 { font-size: var(--fs-h2-mkt); color: #fff; max-inline-size: 16em; }
.cta-panel p { color: var(--ink-2); max-inline-size: 34em; font-size: clamp(var(--fs-md), 0.2vw + 0.95rem, 1.1875rem); text-wrap: balance; }
.cta-panel .hero-cta { justify-content: center; margin-block-start: 8px; }
.cta-tiles { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: clamp(4px, 1.6vw, 14px); align-items: end; }
.cta-tiles li { display: grid; }
.cta-tiles .khatam { inline-size: clamp(40px, 8vw, 56px); --tf: rgb(255 255 255 / 0.08); --ts: rgb(255 255 255 / 0.2); --tl: rgb(255 255 255 / 0.1); --ti: #d1d1d6; }
.cta-tiles b { position: relative; margin-block-end: 8%; font-weight: 800; font-size: clamp(var(--fs-2xs), 1.3vw, var(--fs-sm)); color: var(--ti); }
.cta-tiles li:first-child .khatam { --tf: var(--tile-sun); --ts: var(--tile-sun); --tl: var(--tile-sun-ledge); --ti: var(--on-sun); }
html.js:not([data-motion="0"]) .cta-panel:not(.is-in) .cta-tiles li { opacity: 0; transform: translateY(14px) scale(0.9); }
.cta-tiles li { transition: opacity 500ms var(--ease-out), transform 700ms var(--spring); transition-delay: calc(var(--i, 0) * 70ms + 160ms); }
html.ready-all .cta-tiles li { opacity: 1 !important; transform: none !important; }
.cta-final + .site-footer { padding-block-start: 44px; }

/* roadmap badges: the generic .badge (a numbered circle in app.css) clipped "در نسخه‌ی اول" to "در" */
.scard-step .badge { display: inline-block; inline-size: auto; block-size: auto; border-radius: 999px; padding: 1px 10px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
  background: color-mix(in srgb, var(--teal-deco) 16%, transparent); color: var(--teal); }
.scard-step .badge.soon { background: var(--paper-2); color: var(--ink-2); }
@media (max-width: 480px) { .dials { gap: 14px; } .dial { inline-size: min(200px, 42vw); } .dial-num small { font-size: var(--fs-2xs); } }

/* ---- keyframes ------------------------------------------------------------------------------------------------- */
@keyframes hw-rise { from { opacity: 0.12; transform: translateY(0.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hw-fade { from { opacity: 0.2; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- hero demo card: three English micro-tasks (home.js §10) ----------------------------------------------------
   Panels share one grid cell, so switching tasks never changes the card's height (no layout shift). */
.hero-demo { display: grid; gap: 14px; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-title { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.demo-xp { font-weight: 700; font-size: var(--fs-sm); color: var(--indigo); font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 999px; background: var(--tint); }
/* segmented control with a sliding thumb (iOS) */
.seg-ctl { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg-ctl::before { content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: calc((100% - 4px) / var(--n, 3)); border-radius: 8px;
  background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04); transform: translateX(calc(var(--seg, 0) * -100%));
  transition: transform var(--dur-3) var(--spring); }
:root[data-theme="dark"] .seg-ctl::before { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg-ctl::before { background: #636366; } }
.seg-ctl button { position: relative; z-index: 1; border: 0; background: none; min-block-size: 36px; padding: 4px 8px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.seg-ctl button[aria-selected="true"] { font-weight: 650; }
@media (pointer: coarse) { .seg-ctl button { min-block-size: 40px; } }
.demo-panels { display: grid; touch-action: pan-y; }
.demo-panel { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transform: translateX(-12px);
  transition: opacity var(--dur-2) var(--ease-std), transform var(--dur-3) var(--spring), visibility 0s linear var(--dur-2); }
.demo-panel.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.demo-q { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.demo-fa { font-size: var(--fs-md); font-weight: 650; }
/* build: the answer line + the tile pool (English, LTR) */
.demo-line { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-block-size: 56px; padding: 8px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow var(--dur-2), background-color var(--dur-2); }
.demo-line:empty::before { content: "⋯"; color: var(--ink-2); opacity: 0.5; padding-inline: 8px; line-height: 40px; }
.demo-line.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 60%, transparent); }
.demo-pool { display: flex; flex-wrap: wrap; gap: 8px; min-block-size: 44px; }
.wtile, .dopt, .dword { font: 600 var(--fs-md)/1.3 "Atkinson Next", var(--f-body); color: var(--ink); background: var(--card); border: 0; cursor: pointer;
  box-shadow: var(--e1), inset 0 0 0 1px var(--hair); transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2), background-color var(--dur-2), color var(--dur-2), opacity var(--dur-2); }
.wtile { min-block-size: 40px; padding: 6px 14px; border-radius: 12px; }
@media (pointer: coarse) { .wtile { min-block-size: 44px; } }
.wtile:active:not(:disabled), .dopt:active:not(:disabled), .dword:active:not(:disabled) { transform: scale(0.95); transition-duration: var(--dur-1); }
@media (hover: hover) { .wtile:hover:not(:disabled), .dopt:hover:not(:disabled), .dword:hover:not(:disabled) { box-shadow: var(--e1), inset 0 0 0 1.5px var(--indigo); } }
.demo-line .wtile { background: var(--indigo); color: var(--on-indigo); box-shadow: none; }
.demo-line .wtile.ok { background: var(--ok); color: #fff; }
:root[data-theme="dark"] .demo-line .wtile.ok { color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-line .wtile.ok { color: #000; } }
.wtile:disabled, .dopt:disabled, .dword:disabled { cursor: default; }
/* listen */
.demo-listen { display: flex; align-items: center; gap: 12px; }
.demo-play.play-btn { inline-size: 52px; block-size: 52px; min-inline-size: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--indigo); color: var(--on-indigo); flex: none; }
.demo-play .ic { inline-size: 22px; block-size: 22px; margin-inline-start: 2px; }
.demo-play.playing { box-shadow: 0 0 0 6px var(--tint); }
.demo-opts { display: grid; gap: 8px; }
.dopt { min-block-size: 44px; padding: 8px 14px; border-radius: 12px; text-align: start; }
.dopt.ok { background: color-mix(in srgb, var(--ok) 14%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--ok); }
.dopt.no { opacity: 0.45; text-decoration: line-through; text-decoration-color: var(--bad); }
/* spot the mistake */
.demo-sent { display: flex; flex-wrap: wrap; gap: 6px; }
.dword { min-block-size: 44px; padding: 6px 12px; border-radius: 10px; box-shadow: none; background: transparent; text-decoration: underline dotted color-mix(in srgb, var(--ink-2) 50%, transparent); text-underline-offset: 5px; }
.dword.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); text-decoration: none; }
html:not([data-motion="0"]) .dword.ok { animation: flip-in 520ms var(--spring); }
/* feedback line: fixed height (two lines) so messages never shift the card */
.demo-msg { min-block-size: calc(2 * 1.6em); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.demo-msg.win { color: var(--ok); }
.demo-msg.no { color: var(--bad); }
.nope { animation: nope 360ms var(--ease-std); }
html[data-motion="0"] .demo-panel { transition: none; transform: none; }
@keyframes nope { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes flip-in { from { transform: rotateX(90deg); opacity: 0.2; } to { transform: none; opacity: 1; } }