/* IROMUSIC homepage (/fa/, /en/) — the sections only the homepage has. Loaded after site.css, which
 * owns the fonts, colour/space/type tokens, buttons, glass cards, the download panel, command rows,
 * FAQ items and the footer. Readable class names; no per-element one-off classes.
 *
 * Liquid Glass rules (README "Styling rules", enforced on this file by glass.test.mjs):
 * - backdrop-filter blur on exactly two surfaces: the sticky .site-nav and the floating .hero-chip.
 * - solid fallbacks: no backdrop-filter, reduced transparency / more contrast, phones <= 640px.
 * - 44px pill buttons, visible keyboard focus, hover only inside @media (hover: hover).
 * - transitions: transform/opacity only, at most 240ms. prefers-reduced-motion turns motion off
 *   (landing.mjs skips the scroll reveals and parallax on its own).
 */

/* Liquid Glass tokens — identical copy in site.css (glass.test.mjs). */
:root {
  --glass-fill: linear-gradient(180deg, rgb(255 255 255 / .08) 0%, rgb(255 255 255 / .03) 100%);
  --glass-fill-strong: linear-gradient(180deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .05) 100%);
  --glass-fill-tint: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-600) 80%, var(--color-accent-700)) 0%, var(--color-accent-700) 100%);
  --glass-edge: rgb(255 255 255 / .14);
  --glass-edge-soft: rgb(255 255 255 / .08);
  --glass-edge-hover: rgb(255 255 255 / .28);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / .12);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(255 255 255 / .03), 0 20px 40px -24px rgb(0 0 0 / .8);
  --glass-blur: 18px;
  --glass-radius: 24px;
  --ease-glass: cubic-bezier(.2, .7, .2, 1);
}

/* overflow-x: hidden would make #app-root a scroll container and break the sticky nav; clip does not. */
#app-root { overflow-x: clip; }

/* The inline SVG sprite (logo mark) takes no space. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Buttons are 44px pills (full button system in site.css). */
.btn { min-height: 44px; border-radius: 999px; }

/* Keyboard focus is always visible, on every interactive control. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 3px;
}

/* ── sticky glass nav ───────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(calc(100% - 24px), calc(var(--container) + 32px));
  min-height: 60px;
  margin: 12px auto 0;
  padding-inline: var(--space-2) 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill), color-mix(in srgb, var(--color-bg) 58%, transparent);
  box-shadow: var(--glass-shadow);
}

/* Blur budget: exactly two surfaces. */
.site-nav, .hero-chip {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-neutral-100);
  white-space: nowrap;
}
.brand__mark { flex: none; width: 26px; height: 26px; color: var(--color-accent-400); }
.brand__name { font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .12em; }
.brand__alt { font-family: "Vazirmatn", "Inter", system-ui, sans-serif; font-size: 14px; color: var(--color-neutral-400); }
.brand__alt::before { content: "·"; margin-inline-end: 10px; color: var(--color-neutral-600); }

.nav-links { margin-inline: auto; }
.nav-links ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-neutral-300);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.nav-links + .nav-actions { margin-inline-start: 0; }
.lang-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--glass-edge-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-neutral-200);
}

@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 480px) {
  .brand__alt { display: none; }
  .site-nav { gap: var(--space-1); padding-inline-start: 12px; }
  .nav-actions .btn { padding-inline: 14px; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(48px, 9vw, 112px) clamp(64px, 9vw, 112px); }
.hero__glow {
  position: absolute;
  inset-inline: 0;
  top: -120px;
  z-index: -1;
  height: 720px;
  background:
    radial-gradient(520px 360px at 72% 30%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    radial-gradient(420px 320px at 20% 60%, color-mix(in srgb, #5f7bd8 14%, transparent), transparent 70%);
  pointer-events: none;
}
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: 6px 14px;
  border: 1px solid var(--glass-edge-soft);
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight);
  font-size: 13px;
  color: var(--color-neutral-200);
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }

.hero__title {
  max-width: 18ch;
  margin: 0;
  font-size: var(--text-display);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
:lang(fa) .hero__title { max-width: 20ch; font-weight: 600; line-height: 1.32; letter-spacing: 0; }
.hero__latin { font-family: "Inter", system-ui, sans-serif; letter-spacing: -0.01em; }

.hero__sub {
  max-width: 54ch;
  margin: var(--space-3) 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--color-neutral-300);
}
.hero__actions { margin: var(--space-4) 0 0; }
.hero__aka { max-width: 60ch; margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-neutral-500); }
.hero__aka strong { font-weight: 500; color: var(--color-neutral-300); }

/* "Recommended for you": platform.mjs picks the <template id="rec-…">, landing.mjs clones it in. */
.rec-card {
  display: grid;
  gap: var(--space-1);
  max-width: 560px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--glass-edge-soft);
  border-radius: 20px;
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight);
}
.rec-card .btn { justify-self: start; }
.rec-eyebrow { margin: 0; font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-400); }
:lang(fa) .rec-eyebrow { font-size: 13px; letter-spacing: 0; }
.rec-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-400); }
.rec-note a { color: var(--color-neutral-200); text-decoration: underline; text-decoration-color: var(--glass-edge-hover); }
.rec-card .cmd { margin: 0; }

/* Device frame: a glass bezel around the real screenshot. */
.hero__media { position: relative; justify-self: center; width: min(100%, 340px); }
.device-frame {
  padding: 10px;
  border: 1px solid var(--glass-edge);
  border-radius: 46px;
  background: var(--glass-fill-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 40px 80px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .4);
}
.device-frame img { width: 100%; border-radius: 36px; background: var(--color-neutral-900); }
@media (max-width: 959px) { .hero__media { width: min(78%, 300px); } }

/* The one floating chip; blurred (see the blur budget above). */
.hero-chip {
  position: absolute;
  inset-inline-start: -18%;
  bottom: 14%;
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-fill), color-mix(in srgb, var(--color-bg) 50%, transparent);
  box-shadow: var(--glass-shadow);
}
.hero-chip__value { font-family: var(--font-heading); font-size: clamp(24px, 2.8vw, 30px); font-weight: 650; line-height: 1.1; color: var(--color-neutral-100); font-variant-numeric: tabular-nums; }
.hero-chip__label { font-size: 13px; color: var(--color-neutral-300); }
@media (max-width: 959px) { .hero-chip { inset-inline-start: -12%; bottom: 10%; } }

/* ── feature cards ──────────────────────────────────────────────────────── */
.feature-grid { display: grid; gap: var(--space-3); }
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  padding-block-end: 0;
}
.feature__title { margin: 0 0 var(--space-1); font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.025em; }
:lang(fa) .feature__title { line-height: 1.45; letter-spacing: 0; }
.feature__body { margin: 0; color: var(--color-neutral-400); }
/* the screenshot rises out of the card's bottom edge: its top part shows, the rest is cropped */
.feature__shot {
  width: min(100%, 248px);
  aspect-ratio: 5 / 6;
  margin: auto auto 0;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background: var(--color-neutral-900);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  padding: 8px 8px 0;
}
.feature__shot img { width: 100%; border-radius: 24px 24px 0 0; }
@media (min-width: 640px) and (max-width: 999px) {
  .feature { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: end; }
  .feature__text { align-self: center; padding-block-end: var(--space-4); }
}
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── downloads ──────────────────────────────────────────────────────────── */
.downloads__grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .downloads__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.downloads__intro .callout { margin-top: var(--space-2); }
.downloads__intro .section-lead { margin-bottom: var(--space-3); }
.downloads__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.downloads__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-neutral-200); text-decoration: underline; text-decoration-color: var(--glass-edge-hover); }

/* ── extension + Telegram, side by side ─────────────────────────────────── */
.duo { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo .glass-card { display: flex; flex-direction: column; }
.duo__title { margin: 0 0 var(--space-1); font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.025em; }
:lang(fa) .duo__title { line-height: 1.45; letter-spacing: 0; }
.duo__body { margin: 0 0 var(--space-3); color: var(--color-neutral-400); }
.duo .btn-row { margin-top: auto; }
.duo .small { margin: var(--space-1) 0 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-neutral-200); text-decoration: underline; text-decoration-color: var(--glass-edge-hover); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1000px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .faq__grid .section-head { position: sticky; top: 104px; } }
.faq__grid .faq-list { padding-bottom: 0; }

/* ── footer (homepage) ──────────────────────────────────────────────────── */
.footer-brand { display: grid; gap: var(--space-1); align-content: start; }
.footer-brand p { margin: 0; color: var(--color-neutral-400); }

/* ── popular block (markup generated by tools/landing_popular.mjs; classes fixed there) ── */
.om-pop-section {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-pad);
  display: grid;
  gap: var(--space-6);
}
.om-pop-kicker { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-400); }
:lang(fa) .om-pop-kicker { font-size: 13px; letter-spacing: 0; }
.om-pop-h2 { margin: 0 0 var(--space-2); max-width: 24ch; font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -0.025em; }
:lang(fa) .om-pop-h2 { line-height: 1.4; letter-spacing: 0; }
.om-pop-intro { max-width: 60ch; margin: 0; font-size: var(--text-md); line-height: 1.65; color: var(--color-neutral-400); }
.om-pop-group { display: grid; gap: var(--space-2); }
.om-pop-heading { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-300); }
.om-pop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 760px) { .om-pop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.om-pop-card { display: grid; gap: var(--space-1); color: var(--color-neutral-200); transition: transform .2s var(--ease-glass); }
.om-pop-card img { width: 100%; height: auto; object-fit: cover; border: 1px solid var(--glass-edge-soft); border-radius: 14px; background: var(--color-neutral-900); }
.om-pop-poster img { aspect-ratio: 2 / 3; }
.om-pop-square img { aspect-ratio: 1; }
.om-pop-round img { aspect-ratio: 1; border-radius: 50%; }
.om-pop-round { text-align: center; }
.om-pop-title { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.om-pop-meta { margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--color-neutral-500); overflow-wrap: anywhere; }
@media (hover: hover) { .om-pop-card:hover { color: var(--color-neutral-100); text-decoration: none; transform: translateY(-3px); } }

/* ── below the fold renders lazily ──────────────────────────────────────── */
#features, #trending, #popular, #downloads, .duo, #faq, .site-footer {
}

/* ── hover (pointer devices only) ───────────────────────────────────────── */
@media (hover: hover) {
  .nav-links a:hover { background: rgb(255 255 255 / .06); color: var(--color-neutral-100); text-decoration: none; }
  .lang-pill:hover { border-color: var(--glass-edge-hover); color: var(--color-neutral-100); text-decoration: none; }
  .brand:hover { color: var(--color-neutral-100); text-decoration: none; }
}

/* ── fallbacks: solid where blur is unsupported, unwanted or too expensive ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav, .hero-chip { background: var(--color-surface); }
}
@media (max-width: 640px) {
  .site-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--color-bg) 94%, transparent); border-radius: 20px; }
  .hero-chip { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-nav, .hero-chip { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); }
  .rec-card, .hero__badge, .device-frame, .feature__shot, .lang-pill { background: var(--color-surface); }
  .site-nav, .hero-chip, .rec-card, .hero__badge, .device-frame, .lang-pill { border-color: rgb(255 255 255 / .5); }
  .hero__aka, .rec-note, .om-pop-meta { color: var(--color-neutral-300); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .om-pop-card, .trend-card, .trend-play { transition: none; }
}

/* ===== Trending strip: ranked cards that open the web player =====
   No auto-play motion (a moving target is hard to click and fails WCAG 2.2.2), no blur (the blur budget
   is the nav and the stat chip). Six columns from 1000px, three from 640px, a scroll-snap rail below.
   Keep this block last: trending-cards.test.mjs reads everything after .trend-rail. */
.trend-rail {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: calc(var(--container) + 2 * var(--gutter));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}
.trend-card {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 8px 8px 16px;
  border: 1px solid var(--glass-edge-soft);
  border-radius: 20px;
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight);
  color: var(--color-neutral-200);
  transition: transform .2s var(--ease-glass);
}
.trend-cover { position: relative; display: block; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; border-radius: 14px; background: var(--color-neutral-900); }
.trend-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trend-rank {
  position: absolute; top: 8px; inset-inline-start: 8px;
  display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 8px;
  border: 1px solid var(--glass-edge); border-radius: 999px;
  background: rgb(10 10 13 / .7);
  font-size: 12px; font-weight: 500; color: var(--color-neutral-100);
}
.trend-play {
  position: absolute; inset-inline-end: 8px; bottom: 8px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 50%;
  background: var(--glass-fill-tint);
  opacity: 0; transform: translateY(6px) scale(.92);
  transition: opacity .2s var(--ease-glass), transform .2s var(--ease-glass);
}
.trend-play::before { content: ""; margin-inline-start: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
[dir="rtl"] .trend-play::before { margin-inline-start: 0; margin-inline-end: 3px; }
.trend-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  padding-inline: 4px;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--color-neutral-100);
}
.trend-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 4px; font-size: 12.5px; color: var(--color-neutral-400); }
.trend-card:focus-visible .trend-play { opacity: 1; transform: none; }
@media (hover: hover) {
  .trend-card:hover { transform: translateY(-3px); border-color: var(--glass-edge-hover); text-decoration: none; }
  .trend-card:hover .trend-play { opacity: 1; transform: none; }
}
@media (hover: none) { .trend-play { opacity: 1; transform: none; } }
.trend-more { margin: var(--space-4) 0 0; text-align: center; }
@media (max-width: 999px) { .trend-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .trend-rail {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .trend-rail::-webkit-scrollbar { display: none; }
  .trend-item { flex: 0 0 min(46vw, 176px); scroll-snap-align: start; }
}