/* ==========================================================================
   Alpha Media — فروشگاه آثار
   Product cards, shop index, product detail page, purchase panel.
   Every cover uses the same frame and ratio so a mixed catalogue (film,
   animation, podcast, audiobook) still reads as one shelf; the type is
   carried by a badge rather than by a different card shape.
   ========================================================================== */

/* ==========================================================================
   1. CARD
   ========================================================================== */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, var(--purple-800), var(--purple-850));
  border: 1px solid var(--border-dark);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  isolation: isolate;
}
.pcard:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--pc-accent, var(--accent)) 55%, transparent);
  box-shadow: var(--sh-lg), 0 0 44px -14px var(--pc-accent, var(--accent));
}

/* ---------- cover ---------- */
.pcard__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--purple-900);
  /* the veil below blends with multiply — isolate so it can only reach the
     artwork, never the section behind the card */
  isolation: isolate;
}
.pcard__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Studio posters are printed loud — full-saturation reds and cyans next to
     each other out-shout the page's own purple/gold hierarchy. Pulling the
     saturation back lets the grid read as one surface; hover returns the
     artwork to full colour, so the card the user is aiming at is the one
     that pops. */
  filter: saturate(.62) brightness(.9) contrast(1.04);
  transition: transform var(--t-slow), filter var(--t-slow);
}
.pcard:hover .pcard__cover img {
  transform: scale(1.05);
  filter: saturate(1) brightness(1) contrast(1);
}

/* purple veil, above the artwork and below the badges */
.pcard__cover::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(107,47,143,.30), transparent 70%),
    linear-gradient(0deg, rgba(74,20,110,.52), rgba(61,24,87,.40));
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity var(--t-slow);
  pointer-events: none;
}
.pcard:hover .pcard__cover::before { opacity: .25; }

/* bottom scrim that carries the title — stays above the veil */
.pcard__cover::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(37,13,54,.96) 4%, rgba(37,13,54,.35) 34%, transparent 62%);
  pointer-events: none;
}

/* type badge */
.pcard__type {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-size: .68rem;
  font-weight: 700;
  color: var(--purple-950);
  background: var(--pc-accent, var(--accent));
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.pcard__type svg { width: 12px; height: 12px; fill: currentColor; }

/* duration pill */
.pcard__dur {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: .66rem;
  font-weight: 600;
  color: var(--text-on-dark);
  background: rgba(21,5,32,.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
}

/* trailer play button — centred, appears on hover, always visible on touch */
.pcard__play {
  position: absolute;
  z-index: 4;
  inset-block-start: 44%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) scale(.82);
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(21,5,32,.6);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), transform var(--t), background var(--t-fast), border-color var(--t-fast);
}
.pcard__play svg { width: 20px; height: 20px; fill: currentColor; margin-inline-start: 2px; }
.pcard:hover .pcard__play,
.pcard.is-playing .pcard__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pcard__play:hover {
  background: var(--pc-accent, var(--accent));
  color: var(--purple-950);
  border-color: transparent;
}
.pcard.is-playing .pcard__play {
  background: var(--pc-accent, var(--accent));
  color: var(--purple-950);
  border-color: transparent;
}

/* title block sits over the cover */
.pcard__head {
  position: absolute;
  z-index: 3;
  inset-inline: var(--s-4);
  inset-block-end: var(--s-4);
}
.pcard__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 2px;
}
.pcard__tagline { font-size: .72rem; color: var(--pc-accent, var(--accent)); font-weight: 600; }

/* ---------- body ---------- */
.pcard__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.pcard__short {
  font-size: .82rem;
  line-height: 1.95;
  color: var(--text-on-dark-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__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);
}
.pcard__price { font-size: 1.02rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.pcard__price small { font-size: .66rem; font-weight: 400; color: var(--text-on-dark-muted); }
.pcard__buy { white-space: nowrap; }

/* whole card links to the product page; play + buy sit above it */
.pcard__link { position: absolute; inset: 0; z-index: 2; }
.pcard__play, .pcard__foot { }
.pcard__foot { position: relative; z-index: 5; }

/* ==========================================================================
   2. HOMEPAGE STRIP
   ========================================================================== */
.works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}
.works__more { display: flex; justify-content: center; }

/* ==========================================================================
   3. SHOP INDEX
   ========================================================================== */
.shero {
  background:
    radial-gradient(70% 90% at 78% 0%, rgba(107,47,143,.5), transparent 65%),
    var(--purple-950);
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-12);
  border-bottom: 1px solid var(--border-dark);
}
.shero__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 900;
  color: var(--accent-strong);
  margin-bottom: var(--s-3);
}
.shero__sub { max-width: 620px; font-size: .98rem; line-height: 2.1; color: var(--text-on-dark-muted); }

.shop { background: var(--purple-900); }
.shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.pcard.is-hidden { display: none; }

.shop__empty {
  text-align: center;
  padding-block: var(--s-12);
  color: var(--text-on-dark-muted);
}

/* ==========================================================================
   4. PRODUCT PAGE
   ========================================================================== */
.phero-p {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(65% 100% at 75% 0%, color-mix(in srgb, var(--pc-accent, var(--accent)) 22%, transparent), transparent 68%),
    var(--purple-950);
  padding-block: calc(var(--header-h) + var(--s-12)) var(--s-12);
}
.pdetail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-12);
  align-items: start;
}

.pdetail__cover {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 2/3;
  border: 1px solid var(--border-dark);
  box-shadow: var(--sh-lg), 0 0 60px -20px var(--pc-accent, var(--accent));
}
.pdetail__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Gentler than the grid: this is the one poster on the page, so it is
     allowed most of its colour — just enough veil to sit in the palette. */
  filter: saturate(.82) brightness(.96);
  transition: filter var(--t-slow);
}
.pdetail__cover:hover img { filter: none; }
.pdetail__cover::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(74,20,110,.34), rgba(61,24,87,.22));
  mix-blend-mode: multiply;
  transition: opacity var(--t-slow);
  pointer-events: none;
}
.pdetail__cover:hover::before { opacity: 0; }
.pdetail__cover .pcard__play { opacity: 1; transform: translate(-50%,-50%) scale(1); width: 66px; height: 66px; }
.pdetail__cover .pcard__play svg { width: 23px; height: 23px; }

.pdetail__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: .74rem;
  font-weight: 700;
  color: var(--purple-950);
  background: var(--pc-accent, var(--accent));
  margin-bottom: var(--s-4);
}
.pdetail__type svg { width: 13px; height: 13px; fill: currentColor; }

.pdetail__title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--s-2);
}
.pdetail__tagline { font-size: 1rem; color: var(--pc-accent, var(--accent)); font-weight: 600; margin-bottom: var(--s-5); }

.pdetail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  padding-block: var(--s-5);
  margin-bottom: var(--s-5);
  border-block: 1px solid var(--border-dark);
}
.pdetail__meta div { font-size: .78rem; color: var(--text-on-dark-muted); }
.pdetail__meta b { display: block; font-size: .95rem; color: var(--white); font-weight: 700; margin-bottom: 2px; }

.pdetail__desc p { font-size: .94rem; line-height: 2.25; color: var(--text-on-dark); margin-bottom: var(--s-4); }

/* ---------- cast + crew ---------- */
.pcredits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.pcredits__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-dark);
}
.pcredit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  border-inline-start: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
a.pcredit:hover { background: rgba(168,85,247,.12); border-inline-start-color: var(--accent); }
.pcredit__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--purple-700);
  border: 1px solid var(--border-dark);
  display: grid; place-items: center;
  font-weight: 800;
  color: var(--purple-200);
}
.pcredit__av img { width: 100%; height: 100%; object-fit: cover; }
.pcredit__av.is-empty img { display: none; }
.pcredit__txt { min-width: 0; }
.pcredit__name { font-size: .88rem; font-weight: 700; color: var(--text-on-dark); }
.pcredit__role { font-size: .72rem; color: var(--text-on-dark-muted); }
a.pcredit .pcredit__name { color: var(--purple-100); }
a.pcredit:hover .pcredit__name { color: var(--accent); }
.pcredit__go { margin-inline-start: auto; opacity: .5; }
.pcredit__go svg { width: 14px; height: 14px; fill: currentColor; }
a.pcredit:hover .pcredit__go { opacity: 1; color: var(--accent); }

/* ==========================================================================
   5. PURCHASE PANEL
   ========================================================================== */
.buy {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  background: linear-gradient(165deg, var(--purple-800), var(--purple-850));
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-md);
}
.buy__label { font-size: .78rem; color: var(--text-on-dark-muted); margin-bottom: var(--s-2); }

.buy__total {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.buy__total small { font-size: .8rem; font-weight: 400; color: var(--text-on-dark-muted); }
.buy__base { font-size: .76rem; color: var(--text-on-dark-muted); margin-top: 4px; }

/* support stepper */
.buy__support {
  margin-block: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(21,5,32,.45);
  border: 1px solid var(--border-dark);
}
.buy__support-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.buy__support-title { font-size: .84rem; font-weight: 700; color: var(--purple-100); }
.buy__stepper { display: flex; align-items: center; gap: var(--s-2); }
.buy__step {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(168,85,247,.18);
  border: 1px solid var(--border-dark);
  color: var(--purple-100);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  line-height: 1;
}
.buy__step:hover:not(:disabled) { background: var(--accent); color: var(--purple-950); }
.buy__step:active:not(:disabled) { transform: scale(.92); }
.buy__step:disabled { opacity: .3; cursor: not-allowed; }
.buy__amount {
  min-width: 92px;
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.buy__support-note { font-size: .72rem; line-height: 1.85; color: var(--text-on-dark-muted); }

/* gift */
.buy__gift-toggle {
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer; user-select: none;
  padding: var(--s-3) 0;
  font-size: .86rem;
  color: var(--text-on-dark);
}
.buy__gift-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.buy__switch {
  width: 40px; height: 22px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.16);
  position: relative;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.buy__switch::after {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t-fast);
}
.buy__gift-toggle input:checked + .buy__switch { background: var(--accent); }
[dir="rtl"] .buy__gift-toggle input:checked + .buy__switch::after { transform: translateX(-18px); }
[dir="ltr"] .buy__gift-toggle input:checked + .buy__switch::after { transform: translateX(18px); }
.buy__gift-toggle input:focus-visible + .buy__switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.buy__gift {
  display: none;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(21,5,32,.45);
  border: 1px solid var(--border-dark);
}
.buy__gift.is-open { display: flex; }
.buy__field { display: flex; flex-direction: column; gap: 5px; }
.buy__field label { font-size: .74rem; color: var(--text-on-dark-muted); }
.buy__field input, .buy__field textarea {
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: rgba(21,5,32,.6);
  border: 1px solid var(--border-dark);
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: .86rem;
  transition: border-color var(--t-fast);
}
.buy__field input:focus, .buy__field textarea:focus { outline: none; border-color: var(--accent); }
.buy__field textarea { resize: vertical; min-height: 62px; line-height: 1.9; }
.buy__field input[dir="ltr"] { text-align: left; }
.buy__err { font-size: .72rem; color: #ff8a9b; display: none; }
.buy__field.has-err input { border-color: #ff8a9b; }
.buy__field.has-err .buy__err { display: block; }

.buy__cta { width: 100%; justify-content: center; margin-top: var(--s-2); }
.buy__secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--s-3);
  font-size: .7rem;
  color: var(--text-on-dark-muted);
}
.buy__secure svg { width: 13px; height: 13px; fill: currentColor; }

/* ==========================================================================
   The film's song — one track, on the product page
   --------------------------------------------------------------------------
   A row, not a card: it sits under the synopsis and should read as part of
   the film's entry rather than a second thing competing with the buy panel.
   The artwork does the work — these are proper single covers, so they get to
   be square and sharp instead of cropped into a banner.
   ========================================================================== */
.psong {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 70%);
  transition: border-color var(--t), background var(--t);
}
.psong:hover,
.psong.is-current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.psong__art {
  width: 62px; height: 62px;
  flex: none;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: var(--sh-md);
}
.psong__text { display: grid; gap: 2px; min-width: 0; }
.psong__kicker {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}
.psong__title {
  font-size: .96rem;
  font-weight: 800;
  color: var(--text-on-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.psong__artist { font-size: .78rem; color: var(--text-on-dark-muted); }
.psong__len {
  margin-inline-start: auto;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-muted);
}
.psong__play { flex: none; width: 44px; height: 44px; }
/* The bars only animate while this track is the one playing. */
.psong.is-playing .psong__art { animation: psongPulse 2.4s ease-in-out infinite; }
@keyframes psongPulse {
  0%, 100% { box-shadow: var(--sh-md); }
  50%      { box-shadow: var(--sh-md), 0 0 26px -6px var(--accent); }
}
.psong__note {
  margin: var(--s-2) 0 0;
  font-size: .76rem;
  line-height: 1.9;
  color: var(--text-on-dark-muted);
}

@media (max-width: 560px) {
  .psong { gap: var(--s-3); padding: var(--s-3); }
  .psong__art { width: 50px; height: 50px; }
  .psong__len { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .psong.is-playing .psong__art { animation: none; }
}


/* ==========================================================================
   Sales closed
   --------------------------------------------------------------------------
   Not greyed out to the point of invisibility: the price is still the thing
   the visitor came to read, so it keeps its weight. What changes is the one
   element that used to be a promise — the button.
   ========================================================================== */
.pcard__buy.is-off,
.buy__cta[disabled] {
  background: transparent;
  color: var(--text-on-dark-muted);
  border: 1px dashed var(--border-dark);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.buy--closed .buy__base { color: var(--accent); }
.buy__closed-note {
  margin: var(--s-4) 0 var(--s-4);
  font-size: .78rem;
  line-height: 2;
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* What the buyer gets, listed from the files actually attached to the title
   so the panel cannot promise a download that is not there. */
.buy__files {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-dark);
  font-size: .72rem;
  line-height: 1.9;
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* confirmation */
.buy__done {
  display: none;
  text-align: center;
  padding: var(--s-5) 0;
}
.buy__done.is-on { display: block; }
.buy__done-ico {
  width: 54px; height: 54px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(240,180,41,.16);
  color: var(--accent);
}
.buy__done-ico svg { width: 28px; height: 28px; fill: currentColor; }
.buy__done h3 { font-size: 1.05rem; color: var(--white); margin-bottom: var(--s-2); }
.buy__done p { font-size: .84rem; line-height: 2; color: var(--text-on-dark-muted); }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .works__grid, .shop__grid { grid-template-columns: repeat(3, 1fr); }
  .pdetail { grid-template-columns: 260px 1fr; gap: var(--s-8); }
}

@media (max-width: 860px) {
  .works__grid, .shop__grid { grid-template-columns: repeat(2, 1fr); }
  .pdetail { grid-template-columns: 1fr; }
  .pdetail__cover { max-width: 300px; }
  .buy { position: static; }
  .pcredits { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 560px) {
  .works__grid, .shop__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  /* no hover on touch — keep the trailer button visible */
  .pcard__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pcard__foot { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .pcard__buy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__cover img, .pcard__play { transition: none; }
}

/* credits not supplied yet — say so rather than showing an empty column */
.pcredits__pending {
  font-size: .84rem;
  line-height: 2;
  color: var(--text-on-dark-muted);
  padding: var(--s-4);
  border: 1px dashed var(--border-dark);
  border-radius: var(--r-sm);
}

/* a placeholder cover, so it is never mistaken for the real poster */
.pcard__placeholder {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--s-3);
  inset-inline-start: var(--s-3);
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  background: rgba(21,5,32,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}