/* =========================================================
   CS TRACK SHARE — luxury landing page
   ---------------------------------------------------------
   File: assets/css/cs-track-share.css
   Used by: cs-track-share.php (serves /tracks/{slug}/)

   Design language:
     • Deep space base (#0d0918 → #1b1333)
     • Gold (#f5b301) primary accent
     • Violet (#9d4dff) secondary accent
     • Glass panel with soft inner border
     • Aurora glow behind the cover
     • Fluid type via clamp()

   Non-negotiables:
     • Renders correctly with JS disabled
     • No layout shift (cover has fixed aspect-ratio)
     • Respects prefers-reduced-motion
     • Visible :focus-visible rings for keyboard users
   ========================================================= */

/* ── Design tokens ─────────────────────────────────── */
:root {
  --cs-bg-0:        #0b0715;
  --cs-bg-1:        #1b1333;
  --cs-bg-2:        #241a45;

  --cs-gold:        #f5b301;
  --cs-gold-soft:   #ffd24d;
  --cs-violet:      #9d4dff;
  --cs-violet-soft: #b57bff;
  --cs-cyan:        #4dd6ff;

  --cs-text:        #f6f2ff;
  --cs-text-dim:    #b9aee0;
  --cs-text-mute:   #7a6fa3;

  --cs-line:        rgba(157, 77, 255, 0.22);
  --cs-line-gold:   rgba(245, 179, 1, 0.35);

  --cs-glass:       rgba(27, 19, 51, 0.55);
  --cs-glass-edge:  rgba(255, 255, 255, 0.08);

  --cs-radius-sm:   10px;
  --cs-radius-md:   16px;
  --cs-radius-lg:   24px;
  --cs-radius-xl:   32px;

  --cs-shadow-panel:
    0 30px 80px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px var(--cs-glass-edge),
    0 0 60px -20px rgba(157, 77, 255, 0.35);

  --cs-shadow-cover:
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 80px -30px rgba(245, 179, 1, 0.35);

  --cs-shadow-btn:
    0 10px 24px -10px rgba(245, 179, 1, 0.65),
    0 0 0 1px rgba(245, 179, 1, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --cs-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --cs-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --cs-font:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cs-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Reset (minimal — this page has no WP chrome) ──── */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* ── Page base ─────────────────────────────────────── */
body.cs-track-share {
  font-family: var(--cs-font);
  color: var(--cs-text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(157, 77, 255, 0.28), transparent 60%),
    radial-gradient(1000px 700px at 0% 100%, rgba(245, 179, 1, 0.14), transparent 55%),
    radial-gradient(800px 600px at 50% 40%, rgba(77, 214, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--cs-bg-0) 0%, var(--cs-bg-1) 60%, var(--cs-bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain texture — subtle luxury depth */
body.cs-track-share::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
  background-image:
    radial-gradient(circle at 25% 25%, #fff 0.5px, transparent 0.6px),
    radial-gradient(circle at 75% 75%, #fff 0.5px, transparent 0.6px);
  background-size: 6px 6px, 8px 8px;
  mix-blend-mode: overlay;
}

/* ── Card (the glass panel) ────────────────────────── */
.cs-share-card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vw, 24px);

  padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 44px);
  border-radius: var(--cs-radius-xl);

  background:
    linear-gradient(180deg, rgba(36, 26, 69, 0.72), rgba(27, 19, 51, 0.65));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--cs-line);
  box-shadow: var(--cs-shadow-panel);

  text-align: center;
  isolation: isolate;
}

/* Aurora halo behind the card */
.cs-share-card::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  border-radius: calc(var(--cs-radius-xl) + 24px);
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(245, 179, 1, 0.22), transparent 70%),
    radial-gradient(50% 50% at 80% 100%, rgba(157, 77, 255, 0.28), transparent 70%);
  filter: blur(40px);
  opacity: 0.85;
  pointer-events: none;
}

/* Thin gold top border highlight */
.cs-share-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--cs-radius-xl) var(--cs-radius-xl) 0 0;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(245, 179, 1, 0.7) 50%,
    transparent 95%
  );
  pointer-events: none;
}

/* ── Cover art ─────────────────────────────────────── */
.cs-share-cover {
  display: block;
  width: clamp(200px, 55vw, 280px);
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-cover);

  /* Prevent layout shift before image loads */
  background:
    linear-gradient(135deg, var(--cs-bg-2), var(--cs-bg-0));
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* Subtle entrance */
  animation: cs-cover-in 0.7s var(--cs-ease) both;
}

@keyframes cs-cover-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Soft glow ring behind cover */
.cs-share-cover + h1 {
  margin-top: clamp(6px, 1vw, 12px);
}

/* ── Title ─────────────────────────────────────────── */
.cs-share-card h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;

  background: linear-gradient(
    180deg,
    var(--cs-text) 0%,
    var(--cs-text) 55%,
    var(--cs-gold-soft) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Fallback for browsers that drop the clip */
  color: var(--cs-text);

  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* ── Artist ────────────────────────────────────────── */
.cs-share-artist {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--cs-text-dim);
}

.cs-share-artist::before {
  content: "◆";
  display: inline-block;
  margin-right: 0.55em;
  color: var(--cs-gold);
  opacity: 0.9;
  transform: translateY(-1px);
  font-size: 0.7em;
}

/* ── Player controls ───────────────────────────────── */
.cs-share-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 16px);
  flex-wrap: wrap;
  margin-top: 4px;
}

#csSharePlay {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--cs-line-gold);

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: #1a0f00;
  background: linear-gradient(
    180deg,
    var(--cs-gold-soft) 0%,
    var(--cs-gold) 100%
  );
  box-shadow: var(--cs-shadow-btn);

  transition:
    transform 0.18s var(--cs-ease-soft),
    box-shadow 0.22s var(--cs-ease-soft),
    filter 0.18s var(--cs-ease-soft);
}

#csSharePlay:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 30px -10px rgba(245, 179, 1, 0.75),
    0 0 0 1px rgba(245, 179, 1, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#csSharePlay:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.98);
}

#csSharePlay:focus-visible {
  outline: 2px solid var(--cs-gold-soft);
  outline-offset: 3px;
}

/* Time readout — mono, tabular so it doesn't jump */
#csShareTime {
  font-family: var(--cs-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--cs-text-dim);

  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--cs-line);
  background: rgba(11, 7, 21, 0.45);
}

/* ── CTA — open in ConincStudio ────────────────────── */
.cs-share-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: clamp(6px, 1.4vw, 12px);
  padding: 12px 22px;
  border-radius: 999px;

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;

  color: var(--cs-text);
  background: rgba(157, 77, 255, 0.08);
  border: 1px solid var(--cs-line);

  transition:
    background 0.22s var(--cs-ease-soft),
    border-color 0.22s var(--cs-ease-soft),
    color 0.22s var(--cs-ease-soft),
    transform 0.18s var(--cs-ease-soft);
}

.cs-share-cta::after {
  content: "→";
  color: var(--cs-gold);
  transition: transform 0.22s var(--cs-ease-soft);
}

.cs-share-cta:hover {
  background: rgba(157, 77, 255, 0.16);
  border-color: rgba(157, 77, 255, 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.cs-share-cta:hover::after {
  transform: translateX(3px);
}

.cs-share-cta:focus-visible {
  outline: 2px solid var(--cs-violet-soft);
  outline-offset: 3px;
}

/* ── Tiny "powered by" — luxury signature ─────────── */
/* Injected via CSS content on a wrapper to keep the PHP clean */
.cs-share-card::marker { content: ""; }

.cs-share-card {
  --cs-signature-gap: clamp(18px, 3vw, 28px);
}

.cs-share-card .cs-share-cta {
  margin-bottom: var(--cs-signature-gap);
}

.cs-share-card .cs-share-cta + .cs-share-signature {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cs-text-mute);
  margin: 0 auto;
  padding-bottom: 2px;
}

.cs-share-card .cs-share-signature::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--cs-line-gold));
}

.cs-share-card .cs-share-signature::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--cs-line-gold), transparent);
}

/* ── Audio element (hidden, structural only) ──────── */
#csShareAudio {
  display: none;
}

/* ── Responsive tweaks ────────────────────────────── */
@media (max-width: 420px) {
  .cs-share-card {
    padding: 24px 18px;
    border-radius: 24px;
    gap: 14px;
  }

  .cs-share-cover {
    width: min(78vw, 240px);
  }

  #csSharePlay {
    padding: 11px 22px;
    font-size: 0.88rem;
  }
}

@media (min-width: 1440px) {
  .cs-share-card {
    max-width: 560px;
  }

  .cs-share-cover {
    width: 300px;
  }
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .cs-share-cover {
    animation: none !important;
  }
}

/* ── High contrast / forced colors ─────────────────── */
@media (forced-colors: active) {
  .cs-share-card,
  #csSharePlay,
  .cs-share-cta {
    border: 1px solid CanvasText;
  }

  .cs-share-card h1 {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    background: none;
  }
}

/* ── Print (someone might print a shared track) ───── */
@media print {
  body.cs-track-share {
    background: #fff !important;
    color: #000 !important;
    min-height: auto;
    padding: 20px;
  }

  .cs-share-card {
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff !important;
    backdrop-filter: none;
  }

  .cs-share-card::before,
  .cs-share-card::after,
  body.cs-track-share::before {
    display: none !important;
  }

  .cs-share-card h1 {
    -webkit-text-fill-color: #000;
    color: #000;
    background: none;
  }

  #csSharePlay,
  .cs-share-cta {
    display: none !important;
  }
}