/* ==========================================================================
   Alpha Media — آلفا مدیا
   Design tokens + full stylesheet (RTL, Persian)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Primitive: purples --- */
  --purple-950: #150520;
  --purple-900: #1d0a2b;
  --purple-850: #250d36;
  --purple-800: #2d1040;
  --purple-750: #35144b;
  --purple-700: #3d1857;
  --purple-600: #4c1d68;
  --purple-500: #6b2f8f;
  --purple-400: #8b45b3;
  --purple-300: #a855f7;
  --purple-200: #c084fc;
  --purple-100: #ddb8f5;

  /* --- Primitive: gold --- */
  --gold-600: #b8860b;
  --gold-500: #d4a017;
  --gold-400: #f0b429;
  --gold-300: #ffc93c;
  --gold-200: #ffd966;

  /* --- Primitive: neutrals / light --- */
  --lav-50:  #f6eefb;
  --lav-100: #efe3f7;
  --lav-200: #e4d3f0;
  --white:   #ffffff;
  --ink:     #1a0726;

  /* --- Semantic --- */
  --bg-dark:        var(--purple-900);
  --bg-darker:      var(--purple-950);
  --bg-panel:       var(--purple-800);
  --bg-panel-2:     var(--purple-750);
  --bg-light:       var(--lav-100);
  --bg-light-2:     var(--lav-50);

  --text-on-dark:        #f3e9fb;
  --text-on-dark-muted:  #b79ccb;
  --text-on-light:       #2a0b3d;
  --text-on-light-muted: #6b4a80;

  --accent:        var(--gold-400);
  --accent-strong: var(--gold-300);
  --accent-deep:   var(--gold-600);

  --wave:          #c026d3;
  --wave-soft:     rgba(192, 38, 211, .45);

  --border-dark:  rgba(192, 132, 252, .18);
  --border-light: rgba(107, 47, 143, .16);

  /* --- Radii --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- Spacing scale --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* --- Shadows --- */
  --sh-sm: 0 2px 8px rgba(21, 5, 32, .25);
  --sh-md: 0 8px 24px rgba(21, 5, 32, .35);
  --sh-lg: 0 18px 48px rgba(21, 5, 32, .45);
  --sh-gold: 0 6px 20px rgba(240, 180, 41, .35);
  --sh-glow: 0 0 32px rgba(168, 85, 247, .35);

  /* --- Layout --- */
  --container: 1220px;
  --header-h: 74px;

  /* --- Motion --- */
  --t-fast: .18s cubic-bezier(.4,0,.2,1);
  --t: .3s cubic-bezier(.4,0,.2,1);
  --t-slow: .55s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  line-height: 1.75;
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.4; font-weight: 700; }
p { margin: 0; }

::selection { background: var(--accent); color: var(--purple-950); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--purple-950); }
::-webkit-scrollbar-thumb { background: var(--purple-600); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--purple-500); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section { padding-block: var(--s-20); position: relative; }
.section--dark  { background: var(--bg-dark); }
.section--darker{ background: var(--bg-darker); }
.section--light { background: var(--bg-light); color: var(--text-on-light); }

/* --- Section heading with sparkle divider (as in reference) --- */
.sec-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-10);
}
.sec-head__title {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.section--light .sec-head__title { color: var(--purple-500); }

.sec-head__deco {
  flex: 1;
  height: 26px;
  min-width: 40px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a855f7' opacity='.55'%3E%3Cpath d='M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z'/%3E%3C/svg%3E");
  opacity: .8;
}
.sec-head--center { justify-content: center; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 30px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .95rem;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.btn--gold {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--purple-950);
  box-shadow: var(--sh-gold);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(240,180,41,.5); }
.btn--gold:active { transform: translateY(0); }

.btn--ghost {
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: var(--purple-950); }

.btn--sm { padding: 8px 22px; font-size: .84rem; }
.btn--block { display: flex; width: 100%; }

/* --- Icon buttons / play buttons --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  color: var(--text-on-dark-muted);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { color: var(--accent); background: rgba(240,180,41,.1); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
/* toggled-on state for shuffle / repeat */
.icon-btn.is-on { color: var(--accent); background: rgba(240,180,41,.16); }
.icon-btn.is-on::after {
  content: '';
  position: absolute;
  inset-block-end: 3px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 4px; height: 4px;
  border-radius: var(--r-full);
  background: currentColor;
}
.icon-btn { position: relative; }

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--purple-950);
  box-shadow: var(--sh-gold);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.play-btn svg { width: 18px; height: 18px; fill: currentColor; margin-inline-start: 2px; }
.play-btn:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(240,180,41,.55); }
.play-btn--lg { width: 62px; height: 62px; }
.play-btn--lg svg { width: 24px; height: 24px; }
.play-btn--xl { width: 74px; height: 74px; }
.play-btn--xl svg { width: 28px; height: 28px; }
.play-btn--sm { width: 34px; height: 34px; }
.play-btn--sm svg { width: 14px; height: 14px; }

/* --- Carousel arrows --- */
.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--purple-400);
  transition: color var(--t-fast), background var(--t-fast);
  z-index: 5;
}
.car-arrow:hover { color: var(--accent); background: rgba(240,180,41,.12); }
.car-arrow svg { width: 22px; height: 22px; fill: currentColor; }
.car-arrow--prev { right: -6px; }
.car-arrow--next { left: -6px; }

/* --- Waveform helper (pure CSS bars) --- */
.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  flex: 1;
  overflow: hidden;
}
.wave span {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: var(--wave-soft);
  transition: background var(--t-fast);
}
.wave span.is-played { background: var(--wave); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t), backdrop-filter var(--t), box-shadow var(--t);
}
.header.is-stuck {
  background: rgba(29, 10, 43, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
}

.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand__mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand__text { line-height: 1.3; display: flex; flex-direction: column; }
.brand__name { font-size: 1.02rem; font-weight: 800; color: var(--accent); }
.brand__tag  { font-size: .63rem; color: var(--text-on-dark-muted); letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav a {
  position: relative;
  padding: 8px 15px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-on-dark);
  border-radius: var(--r-full);
  transition: color var(--t-fast);
}
.nav a:hover { color: var(--accent); }
.nav a.is-active { color: var(--accent); font-weight: 700; }
.nav a.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 1px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--border-dark);
}
.nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  /* One knob for the band the equaliser + transport occupy at the bottom.
     The hero's bottom padding and the waveform's offset are both derived
     from it, so copy can never end up sitting on top of the bars. */
  --hero-wave-h: 120px;
  --hero-wave-gap: 96px;          /* wave bottom edge -> section bottom */
  --hero-wave-space: calc(var(--hero-wave-h) + var(--hero-wave-gap) + var(--s-8));

  position: relative;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--purple-950);
  padding-block: calc(var(--header-h) + var(--s-12)) var(--hero-wave-space);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
  opacity: .85;
}
/* Fallback studio gradient when no image asset present */
.hero__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 22% 45%, rgba(168,85,247,.45), transparent 58%),
    radial-gradient(80% 70% at 8% 80%, rgba(192,38,211,.35), transparent 60%),
    linear-gradient(115deg, #24082f 0%, #1a0626 45%, #14041d 100%);
  z-index: -1;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(270deg, rgba(21,5,32,.94) 0%, rgba(21,5,32,.78) 34%, rgba(21,5,32,.28) 62%, rgba(21,5,32,.55) 100%),
    linear-gradient(180deg, rgba(21,5,32,.75) 0%, transparent 26%, rgba(21,5,32,.85) 100%);
}
.hero__inner { position: relative; z-index: 3; }

.hero__content { max-width: 620px; }

/* brand mark above the slogan */
.hero__kicker {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--purple-100);
  padding: 6px 18px;
  margin-bottom: var(--s-5);
  border: 1px solid rgba(240, 180, 41, .45);
  border-radius: var(--r-full);
  background: rgba(21, 5, 32, .45);
  backdrop-filter: blur(8px);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.hero__title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 900;
  color: var(--accent-strong);
  line-height: 1.5;
  margin-bottom: var(--s-8);
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.hero__title span { display: block; }
.hero__sub {
  font-size: clamp(.92rem, 1.35vw, 1.06rem);
  color: var(--text-on-dark);
  line-height: 2.15;
  margin-bottom: var(--s-12);
  max-width: 480px;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.hero__sub em { font-style: normal; color: var(--purple-100); }

/* Big decorative waveform across hero */
.hero__wave {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: var(--hero-wave-gap);
  height: var(--hero-wave-h);
  display: flex;
  align-items: center;
  gap: 3px;
  padding-inline: 4%;
  pointer-events: none;
  opacity: .95;
}
.hero__wave span {
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(180deg, #e879f9, #a21caf);
  box-shadow: 0 0 10px rgba(217,70,239,.6);
  animation: waveBeat 1.35s ease-in-out infinite;
}
@keyframes waveBeat {
  0%,100% { transform: scaleY(.55); }
  50%     { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__wave span { animation: none; }
}

/* Hero transport bar */
.hero__player {
  position: absolute;
  z-index: 4;
  inset-block-end: var(--s-8);
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding-inline: var(--s-8);
}
.hero__player-time { font-size: .78rem; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.hero__player-track {
  width: min(150px, 16vw);
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.18);
  position: relative;
}
.hero__player-track::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 42%;
  border-radius: var(--r-full);
  background: var(--white);
}
.hero__player-ctrls { display: flex; align-items: center; gap: var(--s-3); }
.hero__player-ctrls .play-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); }
.hero__player-ctrls .play-btn:hover { background: var(--accent); color: var(--purple-950); border-color: transparent; }

/* ==========================================================================
   6. SHOWCASE  (منتخب صدا و تصویر)
   ========================================================================== */
.showcase { position: relative; overflow: hidden; }
/* waveform runs behind the cards, centred on the side cards */
.showcase__wave-bg {
  position: absolute;
  z-index: 0;
  inset-inline: -6vw;
  inset-block-start: 50%;
  height: 120px;
  margin-block-start: -84px; /* stage has bottom padding — nudge up to card centre */
  background: url('assets/ui/waveform-purple.svg') center / 100% 100% no-repeat;
  opacity: .6;
  pointer-events: none;
}

.showcase__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  margin-bottom: calc(-1 * var(--s-10));
  padding-bottom: var(--s-16);
  z-index: 2;
}

.show-card {
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--purple-800);
  box-shadow: var(--sh-lg);
  transition: transform var(--t), box-shadow var(--t);
  cursor: pointer;
  flex-shrink: 0;
}
.show-card img { width: 100%; height: 100%; object-fit: cover; }
.show-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(21,5,32,.9) 0%, rgba(21,5,32,.15) 48%, transparent 75%);
}
.show-card__meta {
  position: absolute;
  z-index: 2;
  inset-inline: var(--s-4);
  inset-block-end: var(--s-4);
  text-align: start;
}
.show-card__kicker { font-size: .68rem; color: var(--purple-200); margin-bottom: 2px; }
.show-card__title { font-size: .98rem; font-weight: 700; color: var(--white); }

.show-card--side {
  width: 148px; height: 148px;
  border-radius: var(--r-md);
  opacity: .88;
}
.show-card--side:hover { transform: translateY(-6px); opacity: 1; }
.show-card--side .show-card__title { font-size: .84rem; }

.show-card--main {
  width: min(430px, 42vw);
  aspect-ratio: 16 / 10;
  border: 3px solid rgba(192,132,252,.35);
  box-shadow: var(--sh-lg), var(--sh-glow);
}
.show-card--main:hover { transform: translateY(-6px); }
.show-card--main .show-card__title { font-size: 1.12rem; }
.show-card__play {
  position: absolute;
  z-index: 3;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.92);
  color: var(--purple-800);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.show-card--main:hover .show-card__play { transform: translate(-50%,-50%) scale(1.08); }

/* --- Full player card --- */
.player {
  position: relative;
  z-index: 3;
  background: linear-gradient(160deg, var(--purple-800), var(--purple-850));
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  max-width: 1000px;
  margin-inline: auto;
}
.player__top {
  display: grid;
  grid-template-columns: 168px 1fr 300px;
  gap: var(--s-6);
  padding: var(--s-5);
  align-items: stretch;
}
.player__art {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--purple-700);
  box-shadow: var(--sh-md);
}
.player__art img { width: 100%; height: 100%; object-fit: cover; }

.player__info { padding-block: var(--s-2); }
.player__title { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: var(--s-2); }
.player__sub {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: .82rem; color: var(--purple-200);
  margin-bottom: var(--s-4);
}
.player__sub .dot { width: 4px; height: 4px; border-radius: var(--r-full); background: currentColor; opacity: .6; }
.player__desc { font-size: .86rem; color: var(--text-on-dark-muted); line-height: 2; }

.playlist {
  background: rgba(21,5,32,.4);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.playlist__head {
  font-size: .74rem;
  color: var(--purple-200);
  padding: var(--s-1) var(--s-3) var(--s-2);
  font-weight: 600;
}
.playlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-radius: var(--r-sm);
  font-size: .82rem;
  color: var(--text-on-dark-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  width: 100%;
  text-align: start;
}
.playlist__item:hover { background: rgba(168,85,247,.14); color: var(--text-on-dark); }
.playlist__item.is-active {
  background: rgba(168,85,247,.24);
  color: var(--white);
  font-weight: 600;
}
.playlist__item.is-active::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.playlist__time { font-size: .74rem; opacity: .75; font-variant-numeric: tabular-nums; }

.player__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5) var(--s-2);
}
.player__bar .t { font-size: .74rem; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.player__wave { height: 40px; }

.player__ctrls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-5) var(--s-5);
}
.player__ctrls-group { display: flex; align-items: center; gap: var(--s-2); }
.player__ctrls-center { display: flex; align-items: center; gap: var(--s-3); }

/* ==========================================================================
   6b. CREED — the dubbing mission statements
   A quiet band between the showreel and the academy. Type-led, no imagery,
   so it reads as a statement rather than another content block.
   ========================================================================== */
.creed {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-20);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(107, 47, 143, .55), transparent 62%),
    var(--purple-950);
  text-align: center;
}
.creed::before,
.creed::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
}
.creed::before { inset-block-start: 0; }
.creed::after  { inset-block-end: 0; }

/* the waveform asset, very faint, running behind the text */
.creed__wave {
  position: absolute;
  inset-inline: -4%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  height: 150px;
  background: url('assets/ui/waveform-purple.svg') center / 100% 100% no-repeat;
  opacity: .16;
  pointer-events: none;
}
.creed__inner { position: relative; z-index: 2; }

.creed__lead {
  max-width: 820px;
  margin: 0 auto var(--s-12);
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 2;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.creed__lead em {
  font-style: normal;
  color: var(--accent);
}

.creed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: 1000px;
  margin-inline: auto;
}
.creed__card {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-md);
  background: rgba(21, 5, 32, .5);
  border: 1px solid var(--border-dark);
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.creed__card:hover {
  border-color: rgba(240, 180, 41, .45);
  transform: translateY(-5px);
  background: rgba(37, 13, 54, .6);
}
.creed__no {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .1em;
  margin-bottom: var(--s-3);
  opacity: .75;
}
.creed__card p {
  font-size: .95rem;
  line-height: 2.05;
  color: var(--text-on-dark);
}

/* ==========================================================================
   7. ACADEMY  (کلاس‌های آلفا)
   ========================================================================== */
/* The academy sits on a light band — the page alternates
   light lavender / deep purple all the way down. */
.academy__motto {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.95;
  color: var(--text-on-light);
  margin-bottom: var(--s-8);
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--purple-500);
}
.academy__motto em { font-style: normal; color: var(--purple-500); }
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.course {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(74,20,110,.08);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.course:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(74,20,110,.18);
  border-color: rgba(107,47,143,.35);
}
.course__thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--purple-700); position: relative; isolation: isolate; }
.course__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Class photos are lit warm and shot on mixed backgrounds; the veil below
     plus a saturation pull keeps the three of them looking like a set and
     stops them competing with the purple/gold system around them. */
  filter: saturate(.70) contrast(1.05);
  transition: transform var(--t-slow), filter var(--t-slow);
}
.course__thumb::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  /* Lighter than the shop veil: these cards sit on the light section, so a
     heavy multiply would read as a hole in the row. */
  background:
    radial-gradient(110% 90% at 50% 10%, rgba(107,47,143,.22), transparent 72%),
    linear-gradient(0deg, rgba(74,20,110,.38), rgba(61,24,87,.24));
  mix-blend-mode: multiply;
  transition: opacity var(--t-slow);
  pointer-events: none;
}
.course:hover .course__thumb img {
  transform: scale(1.06);
  filter: saturate(1) brightness(1) contrast(1);
}
.course:hover .course__thumb::before { opacity: .22; }
.course__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.course__title { font-size: 1.05rem; font-weight: 800; color: var(--text-on-light); }
.course__tutor { font-size: .82rem; line-height: 1.9; color: var(--text-on-light-muted); }
.course__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-light);
}
.course__hours { font-size: .76rem; font-weight: 600; color: var(--purple-500); }

/* Levels panel */
.levels {
  background: rgba(21,5,32,.45);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.levels__head { font-size: .88rem; font-weight: 700; color: var(--purple-100); margin-bottom: var(--s-4); text-align: start; }
.levels__list { display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.level {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
  width: 100%;
  text-align: start;
}
.level:hover { background: rgba(168,85,247,.1); }
.level.is-active {
  background: rgba(240,180,41,.08);
  border-color: rgba(240,180,41,.55);
}
.level__body { flex: 1; min-width: 0; }
.level__title { font-size: .86rem; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.level__meta { font-size: .7rem; color: var(--text-on-dark-muted); display: flex; gap: var(--s-3); }
.level__dot {
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  background: var(--purple-600);
  flex-shrink: 0;
  position: relative;
}
.level.is-active .level__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(240,180,41,.18); }
.level .play-btn { width: 32px; height: 32px; background: rgba(255,255,255,.1); color: var(--purple-100); box-shadow: none; }
.level .play-btn svg { width: 13px; height: 13px; }
.level.is-active .play-btn { background: linear-gradient(135deg,var(--gold-300),var(--gold-500)); color: var(--purple-950); }

/* ==========================================================================
   8. TESTIMONIALS  (صدای شما، افتخار ما)
   ========================================================================== */
.testi__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-inline: var(--s-8);
}
.testi {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: 0 4px 18px rgba(74,20,110,.08);
  transition: transform var(--t), box-shadow var(--t);
}
.testi:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(74,20,110,.16); }
.testi__avatar {
  width: 62px; height: 62px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--lav-200);
  border: 2px solid rgba(168,85,247,.3);
}
.testi__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi__body { flex: 1; min-width: 0; }
.testi__quote {
  font-size: .82rem;
  color: var(--text-on-light);
  line-height: 1.85;
  margin-bottom: var(--s-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testi__foot { display: flex; align-items: center; gap: var(--s-3); }
.testi__who { display: flex; flex-direction: column; line-height: 1.5; }
.testi__name { font-size: .8rem; font-weight: 700; color: var(--purple-500); }
.testi__role { font-size: .68rem; color: var(--text-on-light-muted); }
.testi__dur { font-size: .7rem; color: var(--text-on-light-muted); font-variant-numeric: tabular-nums; }
.testi .play-btn { width: 34px; height: 34px; }
.testi .play-btn svg { width: 13px; height: 13px; }
.section--light .car-arrow { color: var(--purple-400); }

/* ==========================================================================
   9. SERVICES / PATCH BAY  (پروژه‌ات را صدا بدیم)
   ========================================================================== */
.services { background: var(--purple-900); }
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s-12);
  align-items: center;
}
.services__copy { max-width: 460px; }
/* "رقص صدا در آیینه‌ی تصویر" */
.services__motto {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.9;
  margin-bottom: var(--s-4);
  background: linear-gradient(120deg, var(--gold-200), var(--gold-400) 45%, var(--purple-200));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.services__lead { font-size: .95rem; color: var(--text-on-dark); margin-bottom: var(--s-5); line-height: 2; }
.services__list { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-8); }
.services__list li { display: flex; align-items: center; gap: var(--s-3); font-size: .87rem; color: var(--text-on-dark-muted); }
.services__list svg { width: 17px; height: 17px; fill: var(--accent); flex-shrink: 0; }
.services__actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.services__phone { display: flex; align-items: center; gap: var(--s-2); font-size: .95rem; font-weight: 700; color: var(--accent); direction: ltr; }
.services__phone svg { width: 18px; height: 18px; fill: currentColor; }

/* ==========================================================================
   Audio console — the patch bay
   The artwork is a photograph, so the interaction is built as light on top of
   it rather than as redrawn UI: the panel tilts toward the cursor, a specular
   highlight tracks the pointer across the metal, and hovering a channel
   patches it in — that jack lights magenta and the others dim.
   ========================================================================== */
.console {
  position: relative;
  perspective: 1100px;
}

.console__panel {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--ry, 0) * -3.2deg))
    rotateY(calc(var(--rx, 0) * 3.6deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow var(--t);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  will-change: transform;
}
.console:hover .console__panel {
  transition: transform .12s linear, box-shadow var(--t);
  box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 60px -18px rgba(192,38,211,.5);
}

.console__panel img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter var(--t);
}
/* the rack dims slightly while a channel is soloed, so the lit jack reads */
.console.is-patched .console__panel img { filter: brightness(.82) saturate(1.05); }

/* ---------- specular highlight that follows the pointer ---------- */
.console__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .16),
    rgba(192, 132, 252, .10) 38%,
    transparent 68%);
  mix-blend-mode: screen;
}
.console:hover .console__sheen { opacity: 1; }

/* ---------- a slow scan line, like a meter sweeping ---------- */
.console__scan {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -30%;
  width: 30%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,.16), transparent);
  mix-blend-mode: screen;
}
.console:hover .console__scan {
  opacity: 1;
  animation: consoleScan 1.9s cubic-bezier(.4,0,.2,1);
}
@keyframes consoleScan {
  from { transform: translateX(0); }
  to   { transform: translateX(440%); }
}

/* ---------- per-channel hotspots ---------- */
.console__jack {
  position: absolute;
  /* Ring centres measured off assets/project/audio-console.webp (2017×780). */
  top: 41%;
  /* Physical `left`, not inset-inline-start: the panel is a photograph and
     does not mirror with text direction, so the hotspots must not either. */
  left: var(--jx);
  transform: translate(-50%, -50%);
  width: 9.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* The glow. No ring or outline — a soft radial halo only, so nothing draws a
   hard edge that would not line up perfectly with the photographed jack. */
.console__jack::before {
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(circle,
    rgba(240, 170, 255, .50) 0%,
    rgba(217, 70, 239, .34) 34%,
    rgba(192, 38, 211, .16) 56%,
    transparent 72%);
  filter: blur(6px);
}
.console__jack:hover::before,
.console__jack:focus-visible::before { opacity: 1; }

/* the channel that is patched in by default */
.console__jack.is-live::before { opacity: .9; animation: jackPulse 2.8s ease-in-out infinite; }
.console.is-patched .console__jack.is-live::before { opacity: 0; animation: none; }
.console.is-patched .console__jack:hover::before { opacity: 1; }

@keyframes jackPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* the label, lifted off the artwork on hover */
.console__jack::after {
  content: attr(data-label);
  position: absolute;
  bottom: 112%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 5px 13px;
  border-radius: var(--r-full);
  background: rgba(21,5,32,.92);
  border: 1px solid rgba(232,121,249,.45);
  color: var(--purple-100);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(6px);
}
.console__jack:hover::after,
.console__jack:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.console__jack:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .console__panel { transform: none !important; transition: none; }
  .console__jack.is-live::before { animation: none; }
  .console:hover .console__scan { animation: none; opacity: 0; }
}

/* touch: no pointer to track, so drop the tilt and keep the labels legible */
@media (hover: none) {
  .console__panel { transform: none !important; }
  .console__sheen, .console__scan { display: none; }
  .console__jack::after { display: none; }
}

/* ==========================================================================
   10. VOICE TALENT  (فروشگاه صدا و قصه — گویندگان)
   ========================================================================== */
.talent { position: relative; overflow: hidden; }
/* waveform runs through the centre of the circular portraits */
.talent__wave-bg {
  position: absolute;
  z-index: 0;
  inset-inline: -6vw;
  inset-block-start: 59px;      /* half of .artist__photo height */
  transform: translateY(-50%);
  height: 118px;
  background: url('assets/ui/waveform-purple.svg') center / 100% 100% no-repeat;
  opacity: .55;
  pointer-events: none;
}

.talent__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  padding-inline: var(--s-8);
}
.artist { text-align: center; position: relative; z-index: 1; }

/* whole card links through to the member's profile; the sample button and
   the CTA sit above the overlay */
.artist__link { position: absolute; inset: 0; z-index: 2; }
.artist__play, .artist .btn { position: relative; z-index: 3; }

/* monogram shows when a portrait file isn't there yet */
.artist__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--purple-400);
  opacity: .45;
  user-select: none;
}
.artist__photo.is-empty img { display: none; }
.artist__photo {
  position: relative;
  width: 118px; height: 118px;
  margin-inline: auto;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--purple-800);
  border: 3px solid rgba(168,85,247,.35);
  box-shadow: 0 8px 24px rgba(74,20,110,.25);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.artist:hover .artist__photo {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(74,20,110,.35);
}
.artist__photo img { width: 100%; height: 100%; object-fit: cover; }
.artist__play {
  position: absolute;
  z-index: 2;
  inset-block-end: 6px;
  inset-inline-start: 50%;
  transform: translateX(50%);
}
.artist__name { font-size: .95rem; font-weight: 700; color: var(--text-on-light); margin-top: var(--s-4); }
.artist__role { font-size: .74rem; color: var(--text-on-light-muted); margin-bottom: var(--s-3); }

/* ==========================================================================
   11. STORE  (فروشگاه صدا و قصه — آثار)
   ========================================================================== */
.store { background: var(--purple-850); }
.store__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}
.product {
  background: linear-gradient(170deg, var(--purple-800), var(--purple-750));
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(192,132,252,.45);
}
.product__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--purple-700); }
.product__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%; /* portrait covers — keep the subject in frame */
  transition: transform var(--t-slow);
}
.product:hover .product__thumb img { transform: scale(1.06); }
.product__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.product__title { font-size: 1rem; font-weight: 700; color: var(--white); }
.product__meta { font-size: .74rem; color: var(--purple-200); }
.product__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-dark);
}
.product__price { font-size: 1rem; font-weight: 800; color: var(--accent); }
.product__price small { font-size: .68rem; font-weight: 400; color: var(--text-on-dark-muted); }
.product__buy {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(192,38,211,.22);
  border: 1px solid rgba(232,121,249,.4);
  color: #f0abfc;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.product__buy svg { width: 16px; height: 16px; fill: currentColor; }
.product__buy:hover { background: var(--wave); color: #fff; transform: translateY(-2px); }
.product__tag { font-size: .68rem; color: var(--text-on-dark-muted); }
.store__more { display: flex; justify-content: center; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.footer {
  background: var(--purple-950);
  border-top: 1px solid var(--border-dark);
  padding-block: var(--s-12) var(--s-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: var(--s-8);
}
.footer__col-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__links a {
  font-size: .84rem;
  color: var(--text-on-dark-muted);
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.footer__links a:hover { color: var(--accent); padding-inline-start: 4px; }

.footer__about { font-size: .82rem; color: var(--text-on-dark-muted); line-height: 2; margin-bottom: var(--s-4); }
.footer__brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.footer__brand .brand__mark { width: 52px; height: 52px; }
.footer__contact { display: flex; flex-direction: column; gap: var(--s-3); font-size: .84rem; color: var(--text-on-dark-muted); }
.footer__contact div { display: flex; align-items: flex-start; gap: var(--s-2); line-height: 1.9; }
.footer__contact svg { width: 16px; height: 16px; fill: var(--accent); flex-shrink: 0; margin-top: 5px; }

.socials { display: flex; gap: var(--s-3); }
.socials a {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(168,85,247,.14);
  border: 1px solid var(--border-dark);
  color: var(--purple-100);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.socials a:hover { background: var(--accent); color: var(--purple-950); transform: translateY(-3px); }

/* eNamad trust seal — sits between the footer columns and the copyright line.
   The badge arrives as a fixed-size PNG from enamad.ir, so it is boxed rather
   than sized: a light plate keeps it legible on the dark footer. */
.footer__seals {
  margin-top: var(--s-10);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.footer__seals a {
  display: inline-flex;
  padding: var(--s-2);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-sm);
  line-height: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.footer__seals a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.footer__seals img { display: block; height: 90px; width: auto; }
@media (max-width: 480px) {
  .footer__seals img { height: 76px; }
}

.footer__bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: .76rem;
  color: var(--text-on-dark-muted);
  flex-wrap: wrap;
}

/* ==========================================================================
   13. MOBILE DRAWER
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(10,2,16,.75);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(320px, 84vw);
  background: linear-gradient(180deg, var(--purple-900), var(--purple-950));
  border-inline-start: 1px solid var(--border-dark);
  padding: var(--s-6);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  overflow-y: auto;
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--accent); border: 1px solid var(--border-dark); }
.drawer__close svg { width: 22px; height: 22px; fill: currentColor; }
.drawer__nav { display: flex; flex-direction: column; gap: var(--s-1); }
.drawer__nav a {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-on-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.drawer__nav a:hover, .drawer__nav a.is-active { background: rgba(240,180,41,.12); color: var(--accent); }

/* ==========================================================================
   13b. MEDIA — play overlays, mini-player, lightbox
   ========================================================================== */

/* --- generic: any thumb that triggers audio --- */
.course__thumb, .product__thumb, .show-card { cursor: pointer; }

.course__play, .product__play {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--s-3);
  inset-inline-start: var(--s-3);
  width: 42px; height: 42px;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transition: opacity var(--t), transform var(--t);
}
.course:hover .course__play,
.product:hover .product__play,
.course__thumb.is-current .course__play,
.product__thumb.is-current .product__play {
  opacity: 1;
  transform: none;
}
/* keep it visible while that track is the active one */
.course__thumb.is-playing .course__play,
.product__thumb.is-playing .product__play {
  opacity: 1; transform: none;
  box-shadow: 0 0 0 4px rgba(240,180,41,.25), var(--sh-gold);
}

/* dim the artwork while its audio is playing */
.course__thumb.is-playing img,
.product__thumb.is-playing img,
.show-card.is-playing img { filter: brightness(.72) saturate(1.1); }

/* --- video badge on showcase cards --- */
.show-card__badge {
  position: absolute;
  z-index: 4;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(21,5,32,.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.show-card__badge:hover {
  background: var(--accent);
  color: var(--purple-950);
  border-color: transparent;
  transform: scale(1.1);
}
.show-card__badge svg { width: 16px; height: 16px; fill: currentColor; }
.show-card--side .show-card__badge { width: 26px; height: 26px; }
.show-card--side .show-card__badge svg { width: 13px; height: 13px; }

/* --- artist play button: always visible when that demo is playing --- */
.artist__play.is-playing,
.testi .play-btn.is-playing {
  box-shadow: 0 0 0 4px rgba(240,180,41,.25), var(--sh-gold);
}

/* --- playlist: equaliser bars on the playing row --- */
.playlist__item { gap: var(--s-2); }
.playlist__name { flex: 1; text-align: start; }
.playlist__eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.playlist__item.is-playing .playlist__eq { display: flex; }
.playlist__eq i {
  flex: 1;
  background: var(--accent);
  border-radius: 1px;
  animation: eqBounce .9s ease-in-out infinite;
}
.playlist__eq i:nth-child(2) { animation-delay: .18s; }
.playlist__eq i:nth-child(3) { animation-delay: .36s; }
.playlist__eq i:nth-child(4) { animation-delay: .54s; }
@keyframes eqBounce {
  0%,100% { height: 25%; }
  50%     { height: 100%; }
}

/* --- seekable waveforms --- */
.wave.is-seekable { cursor: pointer; }
.wave.is-seekable:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-xs); }
.wave.is-seekable span { transition: background .12s linear; }
.wave.is-seekable:hover span:not(.is-played) { background: rgba(192,38,211,.62); }

/* ==========================================================================
   MINI-PLAYER BAR
   ========================================================================== */
body.has-minibar { padding-bottom: 92px; }

.minibar {
  position: fixed;
  z-index: 150;
  inset-inline: 0;
  inset-block-end: 0;
  background: linear-gradient(180deg, rgba(37,13,54,.97), rgba(21,5,32,.99));
  backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid rgba(192,132,252,.28);
  box-shadow: 0 -10px 40px rgba(0,0,0,.55);
  transform: translateY(105%);
  transition: transform var(--t-slow);
  visibility: hidden;
}
.minibar.is-up { transform: none; visibility: visible; }

/* thin animated hairline that lights up while playing */
.minibar::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wave), var(--accent), var(--wave), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.minibar.is-playing::before { opacity: .9; }

.minibar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-3) var(--s-6);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 2.2fr) minmax(150px, 1fr);
  align-items: center;
  gap: var(--s-5);
}

/* --- left: cover + text --- */
.minibar__meta { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.minibar__cover {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--purple-700);
  box-shadow: var(--sh-sm);
}
.minibar.is-playing .minibar__cover { animation: coverGlow 3s ease-in-out infinite; }
@keyframes coverGlow {
  0%,100% { box-shadow: var(--sh-sm); }
  50%     { box-shadow: 0 0 20px rgba(192,38,211,.55); }
}
.minibar__text { min-width: 0; line-height: 1.45; }
.minibar__title {
  font-size: .9rem; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.minibar__artist {
  font-size: .72rem; color: var(--text-on-dark-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- centre: transport + seek --- */
.minibar__center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%; }
.minibar__ctrls { display: flex; align-items: center; gap: var(--s-2); }
.minibar__ctrls .play-btn { width: 40px; height: 40px; }
.minibar__ctrls .play-btn svg { width: 16px; height: 16px; }

.minibar__seekrow {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
}
.minibar__t { font-size: .7rem; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.minibar__wave { height: 26px; flex: 1; min-width: 0; gap: 1px; }
.minibar__wave span { min-width: 1px; max-width: 3px; }

/* --- right: volume --- */
.minibar__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.minibar__right .icon-btn.is-off { color: var(--wave); }
.minibar__vol {
  width: 84px;
  height: 4px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-full);
  cursor: pointer;
  direction: ltr;
}
.minibar__vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
  cursor: pointer;
}
.minibar__vol::-moz-range-thumb {
  width: 13px; height: 13px; border: 0;
  border-radius: var(--r-full);
  background: var(--accent);
  cursor: pointer;
}

/* ==========================================================================
   VIDEO LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
  padding: var(--s-6);
}
.lightbox.is-open { visibility: visible; pointer-events: auto; }
.lightbox__scrim {
  position: absolute; inset: 0;
  background: rgba(8,2,13,.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t);
}
.lightbox.is-open .lightbox__scrim { opacity: 1; }

.lightbox__panel {
  position: relative;
  width: min(1000px, 100%);
  opacity: 0;
  transform: scale(.94) translateY(14px);
  transition: opacity var(--t), transform var(--t-slow);
}
.lightbox.is-open .lightbox__panel { opacity: 1; transform: none; }

/* the player itself is styled in videoplayer.css */
.lightbox__close {
  position: absolute;
  z-index: 2;
  inset-block-start: -14px;
  inset-inline-start: -14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--purple-950);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast);
}
.lightbox__close:hover { transform: rotate(90deg); }
.lightbox__close svg { width: 20px; height: 20px; fill: currentColor; }

/* ==========================================================================
   14. REVEAL ANIMATION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .playlist__eq i { animation: none; height: 60%; }
  .minibar.is-playing .minibar__cover { animation: none; }
  .minibar, .lightbox__panel { transition: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* --- ≤1200px --- */
@media (max-width: 1200px) {
  .player__top { grid-template-columns: 140px 1fr 260px; }
  .show-card--main { width: min(380px, 40vw); }
  .talent__row, .testi__row { padding-inline: var(--s-6); }
}

/* --- ≤1024px : tablet --- */
@media (max-width: 1024px) {
  :root { --s-20: 60px; --s-24: 72px; }

  .nav { display: none; }
  .nav-toggle { display: grid; }

  .hero { min-height: 600px; --hero-wave-h: 100px; --hero-wave-gap: 84px; }

  .academy__grid { grid-template-columns: 1fr; }
  .levels { order: -1; }
  .course-grid { grid-template-columns: repeat(3, 1fr); }

  .services__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .services__copy { max-width: none; }

  .store__grid { grid-template-columns: repeat(2, 1fr); }
  .talent__row { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .testi__row { grid-template-columns: repeat(2, 1fr); }
  .testi__row .testi:nth-child(3) { display: none; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}

/* --- ≤860px --- */
@media (max-width: 860px) {
  .player__top { grid-template-columns: 1fr; }
  .player__art { width: 160px; aspect-ratio: 1; }
  .playlist { max-height: 240px; overflow-y: auto; }

  .showcase__stage { flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-10); margin-bottom: 0; }
  .show-card--main { width: 100%; max-width: 480px; }
  .show-card--side { width: 100%; max-width: 480px; height: 120px; }
  .showcase__wave-bg { display: none; }

  .course-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- ≤768px : mobile --- */
@media (max-width: 768px) {
  :root { --header-h: 64px; --s-20: 52px; }

  .container { padding-inline: var(--s-4); }

  .sec-head { gap: var(--s-3); margin-bottom: var(--s-8); }
  .sec-head__title { font-size: 1.18rem; white-space: normal; }

  .hero {
    min-height: 540px;
    --hero-wave-h: 76px;
    --hero-wave-gap: 72px;
    padding-block: calc(var(--header-h) + var(--s-8)) var(--hero-wave-space);
  }
  .hero__kicker { font-size: .72rem; letter-spacing: .16em; margin-bottom: var(--s-4); }
  .hero__title { margin-bottom: var(--s-6); }
  .hero__sub { margin-bottom: var(--s-8); }
  .hero__bg img { object-position: 60% center; }
  .hero__scrim { background: linear-gradient(180deg, rgba(21,5,32,.7) 0%, rgba(21,5,32,.55) 30%, rgba(21,5,32,.95) 100%); }
  .hero__title { font-size: 1.6rem; }
  .hero__sub { font-size: .9rem; }
  .hero__wave { opacity: .7; }
  .hero__player { gap: var(--s-3); padding-inline: var(--s-4); }
  .hero__player-time, .hero__player-track { display: none; }

  .creed { padding-block: var(--s-16); }
  .creed__grid { grid-template-columns: 1fr; gap: var(--s-4); max-width: 460px; }
  .creed__lead { margin-bottom: var(--s-8); }
  .creed__wave { display: none; }
  .academy__motto { padding-inline-start: var(--s-4); }

  .talent__row { grid-template-columns: repeat(2, 1fr); padding-inline: var(--s-2); }
  .talent__wave-bg { display: none; }
  .testi__row { grid-template-columns: 1fr; padding-inline: var(--s-2); }
  .testi__row .testi:nth-child(2) { display: none; }

  .player__bar { flex-wrap: wrap; }
  .player__wave { min-width: 100%; order: 3; }
  .player__ctrls { flex-wrap: wrap; justify-content: center; }
  .player__ctrls-group { display: none; }
  .player__ctrls-center { width: 100%; justify-content: center; }
  .player__title { font-size: 1.2rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__bottom { flex-direction: column; text-align: center; gap: var(--s-2); }

  .car-arrow { display: none; }

  /* --- mini-player: drop the volume column, stack cover over transport --- */
  body.has-minibar { padding-bottom: 118px; }
  .minibar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'meta close' 'center center';
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
  .minibar__meta   { grid-area: meta; }
  .minibar__center { grid-area: center; }
  .minibar__right  { grid-area: close; }
  .minibar__vol, .minibar__right .icon-btn[data-mb="mute"] { display: none; }
  .minibar__cover { width: 42px; height: 42px; }
  .minibar__seekrow { gap: var(--s-2); }

  /* --- lightbox --- */
  .lightbox { padding: var(--s-4); }
  .lightbox__close { inset-block-start: -46px; inset-inline-start: 0; }

  /* touch devices have no hover — keep the audio overlays visible */
  .course__play, .product__play { opacity: .92; transform: none; }
}

/* --- ≤480px : small mobile --- */
@media (max-width: 480px) {
  :root { --s-20: 44px; }

  .brand__tag { display: none; }
  .brand__name { font-size: .92rem; }

  .hero__title { font-size: 1.38rem; }
  .btn { padding: 11px 24px; font-size: .88rem; }

  .course-grid { grid-template-columns: 1fr; }
  .store__grid { grid-template-columns: 1fr; }
  .talent__row { grid-template-columns: 1fr; }

  .services__actions { flex-direction: column; align-items: stretch; }
  .services__phone { justify-content: center; }
}

/* brand slogan in the footer */
.footer__motto {
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--accent);
  margin-bottom: var(--s-4);
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid rgba(240, 180, 41, .5);
}

/* ==========================================================================
   The faces band
   --------------------------------------------------------------------------
   A single quiet row of portraits drifting past. No script and nothing
   measured: the set is repeated three times in the markup and the track
   slides exactly one copy, so the loop closes on pixel-identical content
   and the seam cannot be seen.

   Used twice — the «پیشکسوت + جوان» band on داستان ما at 64px, and the
   گویندگان row on the homepage at 96px with a name and a profile link
   under each face. Size comes from --face-size; the labelled variant adds
   .faces--labelled, which pins the caption open instead of revealing it on
   hover, because it holds a link somebody has to be able to click.

   The restraint is the design. An earlier version scaled whichever face sat
   at the centre of the screen, which needed a per-frame loop and read as
   busy next to the text it sits under. This does one thing — it moves — and
   answers only when someone points at a face.
   ========================================================================== */
.faces {
  --face-size: 64px;
  margin-bottom: var(--s-12);
  overflow: hidden;
  padding-block: var(--s-4) var(--s-8);   /* room for the lift and the name */
  /* Dissolve at both ends so faces arrive rather than appear. A mask, not an
     overlay: the section behind is not one flat colour. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.faces__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: faces-drift 64s linear infinite;
}
/* Slow enough to read as ambient. Pausing on hover is what makes the row
   feel responsive without any of it being interactive. */
.faces:hover .faces__track,
.faces:focus-within .faces__track { animation-play-state: paused; }

/* A percentage in a transform resolves against the element's own width, so
   one third of a three-copy track is exactly one copy: slide by that and the
   loop closes on pixel-identical content.

   The offsets are positive, and that is the whole trick. The page is RTL, so
   a track wider than its container is pinned by its RIGHT edge and hangs off
   to the LEFT — every copy but the first sits at negative x. Sliding to a
   negative offset therefore drags the content away from the right edge and
   leaves a growing hole, which is exactly the "band runs out and stops"
   everything else here was blamed for. Starting two copies in and unwinding
   to one keeps the window inside the track for the entire cycle, while the
   offset still decreases — so the faces drift right-to-left, with the
   reading direction, as they should on a Persian page. */
@keyframes faces-drift {
  from { transform: translate3d(66.6666%, 0, 0); }
  to   { transform: translate3d(33.3333%, 0, 0); }
}

.face {
  position: relative;
  flex: none;
  margin: 0 var(--s-3);
  line-height: 0;
  transition: transform var(--t);
}

.face img {
  width: var(--face-size); height: var(--face-size);
  border-radius: var(--r-full);
  object-fit: cover;
  display: block;
  border: 2px solid var(--bg-light);
  /* Held back at rest so the band is a texture, not a queue of portraits
     each asking to be looked at. */
  filter: saturate(.6) brightness(.94);
  box-shadow: 0 4px 14px rgba(74, 20, 110, .16);
  transition: filter var(--t), border-color var(--t), box-shadow var(--t);
}

.face figcaption {
  position: absolute;
  inset-inline: -34px;
  inset-block-start: calc(100% + 9px);
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--purple-500);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

/* ---- the only reaction ------------------------------------------------- */
.face:hover,
.face:focus-within { transform: translateY(-6px) scale(1.16); z-index: 2; }

.face:hover img,
.face:focus-within img {
  filter: none;
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(74, 20, 110, .34);
}
.face:hover figcaption,
.face:focus-within figcaption { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .faces { --face-size: 54px; }
  .face { margin: 0 var(--s-2); }
  .face figcaption { font-size: .64rem; inset-inline: -28px; }
}

@media (prefers-reduced-motion: reduce) {
  .faces { -webkit-mask-image: none; mask-image: none; }
  .faces__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  /* With the drift gone the extra copies are just repetition — hide them. */
  .face[aria-hidden="true"] { display: none; }
  .face, .face img, .face figcaption { transition: none; }
  .face:hover, .face:focus-within { transform: scale(1.08); }
}


/* ==========================================================================
   Labelled variant — the homepage roster
   --------------------------------------------------------------------------
   The caption is always open here. A hover-reveal works for a decorative
   band, but this one carries a link, and a control that only exists while
   the cursor is already on it is a control most people never find.
   ========================================================================== */
.faces--labelled { --face-size: 96px; }
.faces--labelled .faces__row,
.faces--labelled { padding-block: var(--s-5) var(--s-10); }

/* The caption is wider than the circle — it has to be, names do not fit in
   96px — so the figure takes the caption's width and the image, being a
   block, sits at the start edge of it. In RTL that reads as every portrait
   nudged to the right of its own name. Centring the figure's own children
   is the fix; nothing here should depend on which of the two is wider. */
.faces--labelled .face {
  margin: 0 var(--s-5);
  display: grid;
  justify-items: center;
}

/* One copy is now ~3060px wide rather than the ~1500px of the داستان ما
   band, so the shared 64s would move it at twice the speed. Matched by
   duration, not by a second animation. */
.faces--labelled .faces__track { animation-duration: 130s; }

.faces--labelled figcaption {
  position: static;
  opacity: 1;
  transform: none;
  margin-top: var(--s-3);
  display: grid;
  gap: 4px;
  justify-items: center;
  white-space: normal;
  line-height: 1.5;
  width: calc(var(--face-size) + 44px);
}
.faces--labelled .face__name {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-on-light);
}
.faces--labelled .face__more {
  pointer-events: auto;          /* the caption itself is inert; this is not */
  font-size: .68rem;
  font-weight: 700;
  color: var(--purple-500);
  padding: 3px 10px;
  border: 1px solid rgba(107, 47, 143, .3);
  border-radius: var(--r-full);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.faces--labelled .face__more:hover,
.faces--labelled .face__more:focus-visible {
  color: var(--purple-950);
  background: var(--accent);
  border-color: var(--accent);
}
/* Lift only the portrait; the label underneath stays put so the button does
   not slide out from under the cursor on the way to being clicked. */
.faces--labelled .face:hover,
.faces--labelled .face:focus-within { transform: none; }
.faces--labelled .face:hover img,
.faces--labelled .face:focus-within img { transform: translateY(-6px) scale(1.06); }
.faces--labelled .face img { transition: filter var(--t), border-color var(--t),
                                         box-shadow var(--t), transform var(--t); }

@media (max-width: 768px) {
  .faces--labelled { --face-size: 76px; }
  .faces--labelled .face { margin: 0 var(--s-3); }
}



/* ==========================================================================
   Hero deck — two slides on a timer
   --------------------------------------------------------------------------
   Slides are display:none / block rather than a translated track. A track
   needs every slide to share a height; these two do not, and the release
   slide would either be cropped or force the studio hero to grow. Swapping
   display costs a crossfade and buys a layout that cannot go wrong.

   The deck carries id="home" so the menu anchor always lands somewhere
   visible, whichever slide is showing.
   ========================================================================== */
.herodeck { position: relative; }

.herodeck__slide { display: none; }
.herodeck__slide.is-on { display: flex; animation: heroFade .5s ease both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

.herodeck__dots {
  position: absolute;
  z-index: 6;
  inset-block-end: var(--s-5);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: var(--s-3);
}
.herodeck__dot {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  cursor: pointer;
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.herodeck__dot:hover { transform: scale(1.2); }
.herodeck__dot.is-on { background: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .herodeck__slide.is-on { animation: none; }
}


/* ==========================================================================
   Release slide
   ========================================================================== */
.hero--promo {
  /* The studio hero reserves a deep band at the bottom for the equaliser and
     the transport bar. This slide has neither, so it reclaims that space
     instead of ending in 250px of nothing. */
  padding-block: calc(var(--header-h) + var(--s-12)) var(--s-20);
  min-height: 640px;
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(168,85,247,.34), transparent 62%),
    radial-gradient(90% 80% at 12% 85%, rgba(240,180,41,.16), transparent 60%),
    linear-gradient(150deg, var(--purple-900), var(--purple-950) 70%);
}
.hero--promo .hero__scrim { background: none; }

.promo__inner {
  display: grid;
  gap: var(--s-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .promo__inner { grid-template-columns: 1.05fr .95fr; }
}

.promo__text { max-width: 560px; }

.promo__badge {
  display: inline-block;
  margin-bottom: var(--s-4);
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 800;
  color: var(--purple-950);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
}

.promo__title {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 900;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: var(--s-4);
}
.promo__title span { display: block; }
.promo__title-sub {
  font-size: .52em;
  font-weight: 700;
  color: var(--accent);
  margin-top: var(--s-2);
}
.promo__lead {
  font-size: .95rem;
  line-height: 2.1;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--s-6);
}

/* ---- the song, inline ---------------------------------------------------- */
.promo__song {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  background: rgba(21,5,32,.42);
  backdrop-filter: blur(10px);
  max-width: 420px;
  transition: border-color var(--t);
}
.promo__song.is-current { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.promo__song-play { flex: none; width: 44px; height: 44px; }
.promo__song-text { display: grid; gap: 1px; min-width: 0; }
.promo__song-kicker { font-size: .64rem; font-weight: 700; color: var(--accent); }
.promo__song-title  { font-size: .92rem; font-weight: 800; color: var(--white); }
.promo__song-artist { font-size: .74rem; color: var(--text-on-dark-muted); }
.promo__song-len {
  margin-inline-start: auto;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-muted);
}

.promo__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.promo__trailer-btn { display: inline-flex; align-items: center; gap: 8px; }
.promo__trailer-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ---- poster in front, trailer behind ------------------------------------- */
.promo__media {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo__trailer {
  position: relative;
  width: min(420px, 74%);
  aspect-ratio: 16 / 10;
  margin-inline-start: 18%;    /* RTL: margin on the right, leaving the poster room there */
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-lg);
  transform: rotate(2deg);
  transition: transform var(--t), box-shadow var(--t);
}
.promo__trailer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__trailer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(21,5,32,.6), transparent 60%);
}
.promo__trailer:hover { transform: rotate(2deg) translateY(-6px); box-shadow: var(--sh-lg), var(--sh-glow); }
.promo__trailer-play {
  position: absolute;
  z-index: 2;
  /* Off-centre, away from the poster. Dead centre put it half underneath
     the poster's edge, which is a play button you cannot press. */
  inset-block-start: 50%; inset-inline-start: 36%;
  transform: translate(-50%,-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  color: var(--purple-800);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.promo__trailer-play svg { width: 19px; height: 19px; fill: currentColor; margin-inline-start: 3px; }
.promo__trailer-tag {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--s-3);
  inset-inline-start: var(--s-4);
  font-size: .7rem;
  font-weight: 700;
  color: var(--white);
}

.promo__poster {
  position: absolute;
  z-index: 3;
  inset-inline-start: 0;       /* RTL: the right-hand edge */
  inset-block-start: 50%;
  width: min(216px, 40%);
  transform: translateY(-50%) rotate(-7deg);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  border: 3px solid rgba(255,255,255,.14);
  transition: transform var(--t), box-shadow var(--t);
}
.promo__poster img { width: 100%; display: block; }
.promo__poster:hover {
  transform: translateY(-50%) rotate(-3deg) scale(1.03);
  box-shadow: 0 26px 60px rgba(0,0,0,.6), var(--sh-glow);
}

@media (max-width: 899px) {
  .promo__media { min-height: 260px; margin-top: var(--s-4); }
  .promo__trailer { width: 74%; margin-inline-start: 20%; }
  .promo__poster { width: 38%; }
}
@media (max-width: 560px) {
  .promo__song { max-width: none; }
  .promo__song-len { display: none; }
  .promo__trailer { width: 78%; margin-inline-start: 18%; }
  .promo__poster { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .promo__trailer, .promo__poster { transition: none; }
}