/*
 * Product page polish: cover-art ambience, cover tilt + glare, staged
 * entrance, scroll reveals, license spotlight and add-to-cart feedback.
 * Driven by js/product-enhance.mjs. Everything that moves sits behind
 * prefers-reduced-motion: no-preference; the static styling works without JS.
 */

@property --pe-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.product-shelf {
  --pe-accent: var(--theme-accent, #00ff9d);
  --pe-accent-dk: var(--theme-accent-dk, #00c97d);
  --pe-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pe-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pe-ambient-opacity: 0.18;
}

html[data-theme="dark"] body.product-shelf {
  --pe-ambient-opacity: 0.32;
}

/* ---------- Ambient cover-art wash behind the top of the page ---------- */

.pe-ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 920px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  contain: strict;
}

.pe-ambient::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: var(--pe-cover, none);
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(1.5);
}

body.pe-has-cover .pe-ambient {
  opacity: var(--pe-ambient-opacity);
}

@media (max-width: 640px) {
  .pe-ambient {
    height: 640px;
  }
  .pe-ambient::before {
    filter: blur(48px) saturate(1.4);
  }
}

/* ---------- Cover: glow, tilt, glare, reveal ---------- */

body.product-shelf .cover-wrap {
  position: relative;
  isolation: isolate;
  transition: transform 0.6s var(--pe-ease-out);
}

body.product-shelf .cover-wrap.pe-tilting {
  transition: transform 0.08s linear;
}

.pe-cover-glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pe-cover, none);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.6);
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.9s ease, transform 0.9s var(--pe-ease-out);
}

body.pe-has-cover .pe-cover-glow {
  opacity: 0.55;
}

html[data-theme="dark"] body.pe-has-cover .pe-cover-glow {
  opacity: 0.75;
}

body.pe-playing .pe-cover-glow {
  opacity: 0.9;
  transform: translateY(16px) scale(0.98);
}

body.product-shelf .product-image-wrapper {
  position: relative;
}

body.product-shelf .product-image-wrapper .product-image {
  transition: scale 0.7s var(--pe-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.product-shelf .cover-wrap:hover .product-image {
    scale: 1.035;
  }
}

.pe-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--pe-gx, 50%) var(--pe-gy, 30%),
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    transparent 58%
  );
  mix-blend-mode: soft-light;
  transition: opacity 0.4s ease;
}

.cover-wrap.pe-tilting .pe-glare {
  opacity: 1;
}

/* Curtain that wipes away when a new cover finishes loading. */
.pe-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    var(--theme-bg2, #eeecea) 0%,
    var(--theme-surface, #fff) 50%,
    var(--theme-bg2, #eeecea) 100%
  );
  opacity: 0;
}

/* Now-playing badge (equalizer bars) */
.pe-eq {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  padding: 6px 9px 6px 8px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.72);
  color: var(--pe-accent);
  font-family: var(--commission-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.3s ease, translate 0.4s var(--pe-ease-out);
}

.pe-eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  transform: scaleY(0.35);
}

.pe-eq span {
  margin-left: 5px;
  align-self: center;
  line-height: 1;
}

body.pe-playing .pe-eq {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Header card + price ---------- */

body.pe-ready.product-shelf #name.product-header-title {
  background: linear-gradient(
    100deg,
    var(--catalog-ink, #0a0a0a) 0%,
    var(--catalog-ink, #0a0a0a) 40%,
    var(--pe-accent-dk) 50%,
    var(--catalog-ink, #0a0a0a) 60%,
    var(--catalog-ink, #0a0a0a) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
}

body.pe-ready.product-shelf #name.product-header-title {
  color: transparent !important;
}

body.product-shelf #price-display {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.product-shelf #price-display::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--pe-accent) 45%, transparent) 50%,
    transparent 70%
  );
  translate: -110% 0;
  pointer-events: none;
}

/* Tags */
body.product-shelf #tags > * {
  transition:
    translate 0.25s var(--pe-ease-out),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) {
  body.product-shelf #tags > *:hover {
    translate: 0 -2px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pe-accent) 22%, transparent);
  }
}

/* ---------- License cards ---------- */

body.product-shelf .license-card {
  isolation: isolate;
  overflow: hidden;
  transition:
    translate 0.35s var(--pe-ease-out),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

body.product-shelf .license-card > * {
  position: relative;
  z-index: 1;
}

/* Cursor spotlight */
body.product-shelf .license-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--pe-sx, 50%) var(--pe-sy, 0%),
    color-mix(in srgb, var(--pe-accent) 16%, transparent),
    transparent 55%
  );
  transition: opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.product-shelf .license-card:hover {
    translate: 0 -4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
  }
  body.product-shelf .license-card:hover::after {
    opacity: 1;
  }
}

/* Featured (Premium) card: accent ring + badge */
body.product-shelf .license-card.featured {
  border-color: color-mix(in srgb, var(--pe-accent-dk) 70%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pe-accent) 35%, transparent),
    0 14px 36px color-mix(in srgb, var(--pe-accent) 16%, transparent) !important;
}

body.product-shelf .license-card.featured::before {
  z-index: 2;
  background: var(--pe-accent) !important;
  color: #04120b !important;
}

/* Button press, ripple and success states */
body.product-shelf .license-btn,
body.product-shelf .beat-download-cta,
body.product-shelf #kit-add-cart-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    scale 0.15s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
}

body.product-shelf .license-btn:not(:disabled):hover {
  border-color: var(--catalog-ink, #0a0a0a) !important;
}

body.product-shelf .license-card.featured .license-btn:not(:disabled) {
  background: var(--catalog-ink, #0a0a0a) !important;
  border-color: var(--catalog-ink, #0a0a0a) !important;
  color: var(--bg, #f5f4f1) !important;
}

body.product-shelf .license-btn:not(:disabled):active,
body.product-shelf .beat-download-cta:not(:disabled):active {
  scale: 0.97;
}

.pe-ripple {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  scale: 0;
}

body.product-shelf #license-section .license-btn.pe-added,
body.product-shelf #kit-cart-section #kit-add-cart-btn.pe-added {
  background: var(--pe-accent) !important;
  border-color: var(--pe-accent) !important;
  color: #04120b !important;
}

.pe-spark {
  position: fixed;
  z-index: 9999;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  background: var(--pe-accent);
}

.pe-fly {
  position: fixed;
  z-index: 9998;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ---------- Stats + related ---------- */

body.product-shelf .cover-stat-item {
  transition: translate 0.3s var(--pe-ease-out);
}

@media (hover: hover) {
  body.product-shelf .cover-stat-item:hover {
    translate: 0 -2px;
  }
}

body.product-shelf .related-image-wrap img {
  transition: scale 0.6s var(--pe-ease-out), filter 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.product-shelf .related-card:hover .related-image-wrap img {
    scale: 1.07;
    filter: saturate(1.15);
  }
}

/* ---------- Motion (only for people who haven't asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes pe-rise {
    from {
      opacity: 0.55;
      translate: 0 14px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes pe-pop {
    0% {
      opacity: 0;
      scale: 0.6;
    }
    70% {
      opacity: 1;
      scale: 1.06;
    }
    100% {
      opacity: 1;
      scale: 1;
    }
  }

  @keyframes pe-cover-in {
    from {
      opacity: 0.6;
      scale: 0.94;
      translate: 0 12px;
    }
    to {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
  }

  @keyframes pe-veil-out {
    from {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 100%);
    }
  }

  @keyframes pe-img-settle {
    from {
      scale: 1.12;
    }
    to {
      scale: 1;
    }
  }

  @keyframes pe-title-sweep {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0% 0;
    }
  }

  @keyframes pe-price-sweep {
    from {
      translate: -110% 0;
    }
    to {
      translate: 110% 0;
    }
  }

  @keyframes pe-eq {
    0%,
    100% {
      transform: scaleY(0.3);
    }
    50% {
      transform: scaleY(1);
    }
  }

  @keyframes pe-glow-breathe {
    0%,
    100% {
      opacity: 0.75;
      transform: translateY(16px) scale(0.95);
    }
    50% {
      opacity: 1;
      transform: translateY(18px) scale(1.02);
    }
  }

  @keyframes pe-ring-spin {
    to {
      --pe-angle: 360deg;
    }
  }

  @keyframes pe-ripple {
    to {
      scale: 40;
      opacity: 0;
    }
  }

  @keyframes pe-bump {
    0% {
      scale: 1;
    }
    35% {
      scale: 1.35;
    }
    65% {
      scale: 0.92;
    }
    100% {
      scale: 1;
    }
  }

  @keyframes pe-added {
    0% {
      scale: 1;
    }
    40% {
      scale: 1.05;
    }
    100% {
      scale: 1;
    }
  }

  @keyframes pe-ambient-drift {
    0%,
    100% {
      transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
      transform: scale(1.08) translate3d(2%, -2%, 0);
    }
  }

  /* Staged entrance once the product has loaded */
  body.pe-ready [data-pe-enter] {
    animation: pe-rise 0.6s var(--pe-ease-out) both;
    animation-delay: calc(var(--pe-i, 0) * 50ms);
  }

  body.pe-ready .cover-wrap[data-pe-enter] {
    animation-name: pe-cover-in;
    animation-duration: 0.9s;
    animation-delay: 0ms;
  }

  body.pe-ready.product-shelf #name.product-header-title.branding {
    animation: pe-title-sweep 1.6s var(--pe-ease-out) 0.35s both !important;
  }

  body.pe-ready #price-display::after {
    animation: pe-price-sweep 1.1s ease 0.9s both;
  }

  body.pe-ready #tags > * {
    animation: pe-pop 0.5s var(--pe-ease-spring) both;
    animation-delay: calc(var(--pe-i, 0) * 45ms + 350ms);
  }

  /* Cover swap */
  .pe-veil.pe-veil-run {
    animation: pe-veil-out 0.8s var(--pe-ease-out) both;
  }

  body.product-shelf .product-image.pe-img-run {
    animation: pe-img-settle 1.1s var(--pe-ease-out) both;
  }

  /* Scroll reveals */
  .pe-reveal {
    translate: 0 22px;
  }

  body .pe-reveal.pe-in {
    translate: 0 0;
    transition: translate 0.8s var(--pe-ease-out);
    transition-delay: calc(var(--pe-i, 0) * 80ms);
  }

  /* Once revealed, hand translate back to the hover transitions. */
  body .pe-reveal.pe-in.pe-settled {
    transition-delay: 0ms;
  }

  body.product-shelf .license-card.pe-reveal.pe-in.pe-settled {
    transition:
      translate 0.35s var(--pe-ease-out),
      border-color 0.25s ease,
      box-shadow 0.35s ease;
  }

  /* Playing state */
  body.pe-playing .pe-eq i {
    animation: pe-eq 0.9s ease-in-out infinite;
  }
  body.pe-playing .pe-eq i:nth-child(2) {
    animation-duration: 0.7s;
    animation-delay: -0.2s;
  }
  body.pe-playing .pe-eq i:nth-child(3) {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
  }
  body.pe-playing .pe-eq i:nth-child(4) {
    animation-duration: 0.8s;
    animation-delay: -0.35s;
  }

  body.pe-playing .pe-cover-glow {
    animation: pe-glow-breathe 2.4s ease-in-out infinite;
  }

  body.pe-has-cover .pe-ambient::before {
    animation: pe-ambient-drift 24s ease-in-out infinite;
  }

  /* Rotating accent ring on the featured license */
  body.product-shelf .license-card.featured {
    border-color: transparent !important;
    background:
      linear-gradient(var(--bg, #f5f4f1), var(--bg, #f5f4f1)) padding-box,
      conic-gradient(
          from var(--pe-angle),
          color-mix(in srgb, var(--pe-accent) 15%, transparent),
          var(--pe-accent),
          color-mix(in srgb, var(--pe-accent) 15%, transparent) 40%,
          color-mix(in srgb, var(--pe-accent) 15%, transparent)
        )
        border-box !important;
    animation: pe-ring-spin 6s linear infinite;
  }

  .pe-ripple {
    animation: pe-ripple 0.6s ease-out forwards;
  }

  .pe-bump {
    animation: pe-bump 0.55s var(--pe-ease-spring);
  }

  body.product-shelf .license-btn.pe-added,
  body.product-shelf #kit-add-cart-btn.pe-added {
    animation: pe-added 0.45s var(--pe-ease-spring);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pe-ready.product-shelf #name.product-header-title {
    color: var(--catalog-ink, #0a0a0a) !important;
    background: none;
  }
  .pe-veil {
    display: none;
  }
}

/* =====================================================================
 * Conversion layout: get the free download and the leases above the fold,
 * hide empty social proof, tidy hierarchy. Classes set by product-enhance.mjs.
 * ===================================================================== */

/* Header CTA row */
.pe-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.pe-cta[hidden],
.pe-cta__btn[hidden],
.pe-trust[hidden],
.pe-bar-lease[hidden] {
  display: none !important;
}

.pe-cta__btn {
  flex: 1 1 11rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--catalog-border2, rgba(10, 10, 10, 0.17));
  background: transparent;
  color: var(--catalog-ink, #0a0a0a);
  font-family: var(--commission-font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    translate 0.2s var(--pe-ease-out),
    box-shadow 0.25s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.pe-cta__btn small {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.06em;
}

.pe-cta--free-only .pe-cta__btn--free,
.pe-cta__btn--lease {
  background: var(--pe-accent);
  border-color: var(--pe-accent);
  color: #04120b;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--pe-accent) 30%, transparent);
}

.pe-cta__btn:focus-visible {
  outline: 2px solid var(--pe-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pe-cta__btn:hover {
    translate: 0 -2px;
    border-color: var(--catalog-ink, #0a0a0a);
  }
  .pe-cta__btn--lease:hover {
    border-color: var(--pe-accent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--pe-accent) 42%, transparent);
  }
}

.pe-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--commission-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--catalog-ink2, #555550);
}

.pe-trust li::before {
  content: "✓ ";
  color: var(--pe-accent-dk);
  font-weight: 700;
}

html[data-theme="dark"] .pe-trust li::before {
  color: var(--pe-accent);
}

/* The price pill repeats what the lease button already says. */
body.pe-has-lease-cta #price-display {
  display: none !important;
}

/* Empty social proof: hide zero counters and the empty ratings card. */
body.product-shelf .cover-stat-item.pe-stat-empty {
  display: none !important;
}

body.product-shelf #cover-stats.cover-stats {
  grid-template-columns: repeat(var(--pe-stat-cols, 4), minmax(0, 1fr)) !important;
}

body.pe-no-ratings #rating-block {
  display: none !important;
}

/* Free MP3 hero: the subtitle had a solid strip behind it. */
body.product-shelf .beat-download-hero__sub {
  background: transparent !important;
}

/* License grid */
body.product-shelf #license-section {
  scroll-margin-top: 96px;
}

body.product-shelf #download {
  scroll-margin-top: 110px;
}

body.product-shelf #license-section > .studio-section-title {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  color: var(--catalog-ink, #0a0a0a) !important;
}

body.product-shelf .license-grid {
  align-items: stretch;
  padding-top: 0.75rem;
}

body.product-shelf .license-card {
  overflow: visible;
}

body.product-shelf .license-card::after {
  border-radius: inherit;
}

/* Badge sits on the top edge so it no longer squeezes the tier name. */
body.product-shelf .license-card.featured::before {
  top: 0 !important;
  right: auto !important;
  left: 50% !important;
  translate: -50% -50%;
  white-space: nowrap;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pe-accent) 35%, transparent);
}

body.product-shelf .license-name {
  padding-right: 0 !important;
}

body.product-shelf .license-price {
  font-size: 2rem !important;
  letter-spacing: -0.02em;
}

body.product-shelf .license-features {
  flex: 1 1 auto;
}

body.product-shelf .license-card .action-note {
  min-height: 2.6em;
}

body.product-shelf .license-btn {
  width: 100%;
  min-height: 46px;
  white-space: nowrap;
  letter-spacing: 0.04em !important;
}

body.pe-thin-stats #cover-stats {
  display: none !important;
}

.pe-license-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--commission-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--catalog-ink2, #555550);
}

.pe-license-trust li::before {
  content: "✓ ";
  color: var(--pe-accent-dk);
  font-weight: 700;
}

html[data-theme="dark"] .pe-license-trust li::before {
  color: var(--pe-accent);
}

/* Small print */
body.product-shelf .product-details-stack > p.subtle {
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  opacity: 0.7;
  text-align: center;
}

/* Mobile */
@media (max-width: 767px) {
  body.product-shelf #product-bpm-key-stats.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.product-shelf #product-bpm-key-stats .stat-box {
    padding: 0.7rem 0.5rem !important;
  }
  body.product-shelf #cover-stats .cover-stat-item {
    padding: 0.6rem 0.25rem !important;
  }
  body.product-shelf #cover-stats .cover-stat-value {
    font-size: 1.25rem !important;
  }
  .pe-cta__btn {
    flex-basis: 100%;
  }
  .pe-trust {
    justify-content: center;
  }
  body.product-shelf .license-grid {
    gap: 1.5rem !important;
  }
}

/* Mobile sticky bar: lease shortcut next to the free download. */
body.product-shelf #beat-mobile-dl-bar.pe-bar-split {
  display: flex;
  gap: 0.5rem;
}

body.product-shelf #beat-mobile-dl-bar.pe-bar-split.hidden {
  display: none;
}

body.product-shelf #beat-mobile-dl-bar.pe-bar-split > * {
  flex: 1 1 0;
  min-width: 0;
}

.pe-bar-lease {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--pe-accent);
  background: var(--pe-accent);
  color: #04120b;
  font-family: var(--commission-font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

/* Description moved under the cover on desktop */
body.product-shelf #product-desc-card.pe-desc-side {
  margin-top: var(--product-section-gap, 1.25rem);
}

body.product-shelf #product-desc-card.pe-desc-side .desc-body {
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}

/* Descriptions pasted from elsewhere can carry inline highlight colours. */
body.product-shelf #desc * {
  background: transparent !important;
  color: inherit !important;
}