/* ═══════════════════════════════════════════════════════════
   KIROS Front Page Styles
   Loaded only on is_front_page().
   Component CSS ported from ui-preview.html.
   ═══════════════════════════════════════════════════════════ */

/* ── Token aliases ─────────────────────────────────────────
   Maps shorthand vars used throughout this file to the
   canonical KIROS design tokens (defined in tokens.css).
   Never define raw color values here — always alias a token.
   ─────────────────────────────────────────────────────────── */
:root {
  --accent:         var(--kiros-accent);
  --accent-hover:   var(--kiros-accent-hover);
  --accent-dim:     var(--kiros-accent-dim);
  --accent-border:  var(--kiros-accent-border);
  --heart:          var(--kiros-heart);
  --heart-dim:      var(--kiros-heart-dim);
  --journal:        var(--kiros-journal);
  --journal-dim:    var(--kiros-journal-dim);
  --journal-border: var(--kiros-journal-border);
  --bg:             var(--kiros-bg);
  --surface:        var(--kiros-surface);
  --surface-2:      var(--kiros-surface-2);
  --surface-3:      var(--kiros-surface-3);
  --border:         var(--kiros-border);
  --text:           var(--kiros-text);
  --text-muted:     var(--kiros-text-muted);
  --text-subtle:    var(--kiros-text-subtle);
  --font:           var(--kiros-font-sans);
  --font-mono:      var(--kiros-font-mono);
  --ease-spring:    var(--kiros-ease);
  --radius-btn:     var(--kiros-radius-btn);
  /* Art color — JS updates these per track; default = KIROS accent blue */
  --art-r: 107; --art-g: 154; --art-b: 196;
}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
.kfp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 32px;
}

.kfp-nav-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.kfp-nav-logo span { color: var(--accent); }

.kfp-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.kfp-nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.kfp-nav-links a:hover,
.kfp-nav-links a.active { color: var(--text); }
.kfp-nav-links a.journal-link:hover { color: var(--journal); }

.kfp-nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s;
  flex-shrink: 0;
}
.kfp-nav-cta:hover { background: var(--accent-hover); }

/* ════════════════════════════════════════
   PAGE LAYOUT
════════════════════════════════════════ */
.kfp-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 32px 100px;
}

.kfp-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 56px 0 20px;
}
.kfp-section-label:first-child { margin-top: 0; }
.kfp-section-label.journal { color: var(--journal); }
.kfp-section-label.artist  { color: var(--accent); }

hr.kfp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 56px 0;
}

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.kfp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  border: none;
}
.kfp-btn-primary { background: var(--accent); color: #000; padding: 11px 22px; }
.kfp-btn-primary:hover { background: var(--accent-hover); color: #000; }
.kfp-btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 10px 22px; }
.kfp-btn-ghost:hover { background: var(--surface-2); }
.kfp-btn-sm { font-size: 12px; padding: 7px 14px; }

/* ════════════════════════════════════════
   HERO / DISPLAY TYPE
════════════════════════════════════════ */
.kfp-type-display {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.kfp-type-display .accent { color: var(--accent); }
.kfp-type-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 520px;
}

/* ════════════════════════════════════════
   CATALOG SEARCH
════════════════════════════════════════ */
.kfp-catalog-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.kfp-catalog-search-wrap .kfp-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--text-subtle);
  transition: color 0.15s;
  flex-shrink: 0;
}
.kfp-catalog-search-wrap:focus-within .kfp-search-icon {
  color: var(--accent);
}
.kfp-catalog-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  padding: 11px 40px 11px 42px;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}
.kfp-catalog-search::-webkit-search-cancel-button,
.kfp-catalog-search::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.kfp-catalog-search::placeholder { color: var(--text-subtle); }
.kfp-catalog-search:hover { border-color: rgba(255,255,255,0.12); background: var(--surface-2); }
.kfp-catalog-search:focus {
  border-color: var(--accent-border);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(107,154,196,0.10);
}
.kfp-catalog-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.kfp-catalog-search-clear:hover { background: var(--surface-2); color: var(--text); }
.kfp-catalog-search-clear.visible { display: flex; }

.kfp-catalog-no-results {
  text-align: center;
  padding: 40px 0 20px;
  color: var(--text-subtle);
  font-size: 14px;
  display: none;
}
.kfp-catalog-no-results strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.kfp-catalog-no-results.visible { display: block; }

/* ════════════════════════════════════════
   CHIPS
════════════════════════════════════════ */
.kfp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kfp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.kfp-chip:hover { border-color: var(--accent-border); color: var(--text); }
.kfp-chip.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }

/* ════════════════════════════════════════
   SONG ROW (Catalog)
════════════════════════════════════════ */
.kfp-song-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--surface); margin-bottom: 8px;
  transition: background 0.15s; cursor: pointer;
  border: 1px solid transparent;
}
.kfp-song-row:hover { background: var(--surface-2); }
.kfp-song-row.active { background: var(--accent-dim); border-color: var(--accent-border); }
.kfp-song-thumb {
  width: 44px; height: 44px; border-radius: 6px;
  background: var(--surface-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  overflow: hidden;
}
.kfp-song-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kfp-song-info { flex: 1; min-width: 0; }
.kfp-song-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfp-song-row.active .kfp-song-title { color: var(--accent); }
.kfp-song-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.kfp-song-heart {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-subtle);
  transition: color 0.15s; padding: 4px 6px;
}
.kfp-song-heart:hover { color: var(--heart); }
.kfp-song-heart.hearted { color: var(--heart); }

/* ════════════════════════════════════════
   FOLLOWING CARD — animated border
════════════════════════════════════════ */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes kfp-border-spin {
  to { --border-angle: 360deg; }
}
@keyframes kfp-float-in {
  from { opacity: 0; transform: scale(0.96) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.kfp-following-card {
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  animation: kfp-float-in 0.9s var(--ease-spring) both;
  margin-bottom: 32px;
}
.kfp-following-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 70%,
    rgba(107,154,196,0.45) 82%,
    rgba(137,180,217,0.8) 86%,
    rgba(107,154,196,0.45) 90%,
    transparent 100%
  );
  animation: kfp-border-spin 9s linear infinite;
  z-index: -1;
}
.kfp-following-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--surface);
  border-radius: 17px;
  z-index: -1;
}

.kfp-following-hero {
  display: block;
  height: 188px;
  background: linear-gradient(160deg, #050d14 0%, #0d2035 40%, #132940 70%, #0a1a28 100%);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.kfp-following-hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 55%, rgba(107,154,196,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 35%, rgba(107,154,196,0.08) 0%, transparent 45%);
}
.kfp-following-hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(29,29,31,0.85) 0%, transparent 100%);
}
.kfp-following-hero-content {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.kfp-following-hero-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.kfp-following-hero-genre {
  font-size: 12px;
  color: rgba(240,239,237,0.55);
  margin-top: 4px;
  font-weight: 500;
}
.kfp-following-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-btn);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1.5px solid var(--accent-border);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.kfp-following-badge:hover { background: var(--accent); color: #000; border-color: var(--accent); }

/* ════════════════════════════════════════
   FT-ROW — Epidemic Sound-style track rows
   (inside following-card)
════════════════════════════════════════ */
.kfp-ft-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.kfp-ft-row:hover { background: var(--surface-2); }
.kfp-ft-row.ft-playing { background: var(--accent-dim); }
.kfp-ft-row.ft-playing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.kfp-ft-art {
  width: 44px; height: 44px;
  background: var(--surface-3);
  border-radius: 7px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  position: relative; overflow: hidden;
}
.kfp-ft-art-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.12s;
}
.kfp-ft-row:hover .kfp-ft-art-overlay,
.kfp-ft-row.ft-playing .kfp-ft-art-overlay { opacity: 1; }
.kfp-ft-info { flex: 1; min-width: 0; }
.kfp-ft-title {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.kfp-ft-row.ft-playing .kfp-ft-title { color: var(--accent); }
.kfp-ft-mood { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kfp-ft-dur { font-size: 11px; color: var(--text-subtle); flex-shrink: 0; min-width: 28px; text-align: right; }

.kfp-ft-footer {
  text-align: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.kfp-ft-footer a {
  font-size: 12px; font-weight: 600;
  color: var(--accent); text-decoration: none;
  transition: color 0.15s;
}
.kfp-ft-footer a:hover { color: var(--accent-hover); }

/* Track heart / license buttons (shared) */
.kfp-track-heart {
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: var(--text-subtle);
  transition: color 0.15s, transform 0.2s var(--ease-spring);
  padding: 2px 4px; line-height: 1;
}
.kfp-track-heart:hover { color: var(--heart); transform: scale(1.2); }
.kfp-track-heart.hearted { color: var(--heart); }
.kfp-track-license-btn {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid var(--accent-border);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.kfp-track-license-btn:hover { background: var(--accent); color: #000; }

/* ════════════════════════════════════════
   ALL ARTISTS — vertical track list + More
════════════════════════════════════════ */
.kfp-atrack-list {
  height: 186px;
  overflow-y: hidden;
  position: relative;
  transition: height 0.35s var(--ease-spring);
}
.kfp-atrack-list.expanded {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.kfp-atrack-list:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(29,29,31,0) 0%, rgba(29,29,31,0.96) 100%);
  pointer-events: none;
  z-index: 1;
}
.kfp-atrack-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.kfp-atrack-row:hover { background: var(--surface-2); }
.kfp-atrack-num { font-size:12px; color:var(--text-subtle); width:14px; text-align:right; flex-shrink:0; }
.kfp-atrack-title { flex:1; min-width:0; }
.kfp-atrack-title strong { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kfp-atrack-title span  { display:block; font-size:11px; color:var(--text-muted); }
.kfp-atrack-dur { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.kfp-atrack-footer {
  border-top: 1px solid var(--border);
  text-align: center; padding: 9px 16px;
  flex-shrink: 0;
}
.kfp-atrack-more-btn {
  background: none; border: none;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: pointer;
  transition: color 0.15s;
  padding: 0;
}
.kfp-atrack-more-btn:hover { color: var(--accent-hover); }

/* ════════════════════════════════════════
   FEATURE CARDS (2-up)
════════════════════════════════════════ */
.kfp-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kfp-feature-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
  transition: background 0.15s;
}
.kfp-feature-card:hover { background: var(--surface-2); }
.kfp-feature-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.kfp-feature-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.kfp-feature-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.kfp-feature-link {
  font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none;
  margin-top: 20px; display: inline-block;
  border-bottom: 1px solid var(--accent-border); transition: border-color 0.15s;
}
.kfp-feature-link:hover { border-color: var(--accent); }

/* ════════════════════════════════════════
   JOURNAL — Apple Newsroom style
════════════════════════════════════════ */
.kfp-journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.kfp-journal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: background 0.15s, transform 0.3s var(--ease-spring);
}
.kfp-journal-card:hover { background: var(--surface-2); transform: translateY(-3px); }

.kfp-journal-card-img {
  height: 140px;
  background: linear-gradient(135deg, #1a0a00 0%, #2d1500 60%, #1a0a00 100%);
  position: relative; overflow: hidden;
}
.kfp-journal-card-img-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,107,0,0.25) 0%, transparent 70%);
}
.kfp-journal-card-img-label {
  position: absolute; bottom: 12px; left: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--journal); background: rgba(0,0,0,0.5);
  padding: 3px 8px; border-radius: 4px;
}
.kfp-journal-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.kfp-journal-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--journal); margin-bottom: 8px; }
.kfp-journal-title { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 8px; }
.kfp-journal-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.kfp-journal-meta { font-size: 11px; color: var(--text-subtle); margin-top: 14px; font-weight: 500; }

.kfp-journal-card.featured .kfp-journal-card-img { height: 200px; }
.kfp-journal-card.featured .kfp-journal-title { font-size: 20px; }

/* ════════════════════════════════════════
   PRICING
════════════════════════════════════════ */
.kfp-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
.kfp-price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.kfp-price-card.featured {
  border-color: var(--accent-border);
  background: linear-gradient(160deg, rgba(107,154,196,0.09) 0%, var(--surface) 70%);
}
.kfp-price-card.locked {
  opacity: 0.52;
  filter: saturate(0.4);
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.kfp-price-card.locked::after {
  content: 'Coming Soon';
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
}
.kfp-price-tier {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 10px;
}
.kfp-price-card.featured .kfp-price-tier { color: var(--accent); }
.kfp-price-amount {
  font-size: 38px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 2px;
}
.kfp-price-amount sup { font-size: 20px; vertical-align: super; font-weight: 600; margin-right: 1px; }
.kfp-price-amount sub { font-size: 14px; vertical-align: baseline; color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
.kfp-price-period { font-size: 12px; color: var(--text-subtle); margin-bottom: 14px; }
.kfp-price-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 20px; flex: 1; }
.kfp-price-features { list-style: none; margin-bottom: 22px; display: flex; flex-direction: column; gap: 9px; }
.kfp-price-features li {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}
.kfp-price-features li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ════════════════════════════════════════
   GRADIENT HEADLINE (Campaign CTA)
════════════════════════════════════════ */
.kfp-gradient-headline {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding-bottom: 0.12em;
  background: linear-gradient(90deg, #e4f6f0, #9dcfca 31%, #6b9ac4 68%, #45657d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ════════════════════════════════════════
   SCROLL ANIMATIONS
════════════════════════════════════════ */
.kfp-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}
.kfp-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════
   PERSISTENT MINI-PLAYER  (V3 — waveform)
════════════════════════════════════════ */
@keyframes kfp-glow-flicker {
  0%,100% { opacity: 0.75; }
  20%      { opacity: 1;    }
  45%      { opacity: 0.55; }
  70%      { opacity: 0.9;  }
}

.kfp-mini-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-spring);
  background: rgba(12,12,12,0.97);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: visible;
}
.kfp-mini-player.active { transform: translateY(0); }

/* ── Ambient glow (art color leaks above player) ── */
.kfp-mp-glow {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 80px;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(var(--art-r),var(--art-g),var(--art-b),0.24) 0%,
    transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  border-radius: 0;
}
.kfp-mini-player.kfp-playing .kfp-mp-glow {
  opacity: 1;
  animation: kfp-glow-flicker 5s ease-in-out infinite;
}

/* ── Post-play prompt ── */
.kfp-mp-prompt {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s var(--ease-spring), opacity 0.3s ease, padding 0.4s ease;
}
.kfp-mp-prompt.visible { max-height: 56px; opacity: 1; padding: 12px 16px 10px; }
.kfp-mp-prompt-label { font-size: 11px; color: var(--text-subtle); font-weight: 500; font-family: var(--font-mono); }
.kfp-mp-prompt-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-btn);
  border: none; cursor: pointer; transition: all 0.15s;
}
.kfp-mp-prompt-btn.more  { background: var(--accent-dim); color: var(--accent); border: 1.5px solid var(--accent-border); }
.kfp-mp-prompt-btn.more:hover  { background: var(--accent); color: #000; }
.kfp-mp-prompt-btn.skip  { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.kfp-mp-prompt-btn.skip:hover  { background: var(--surface-3); color: var(--text); }

/* ── Waveform scrubber ── */
.kfp-mp-scrubber {
  position: relative;
  height: 52px;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.kfp-mp-waveform {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.kfp-mp-scrub-indicator {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.65);
  pointer-events: none; opacity: 0; transition: opacity 0.08s;
  z-index: 2;
}
.kfp-mp-scrub-time {
  position: absolute; bottom: 5px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 6px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity 0.08s;
  transform: translateX(-50%); white-space: nowrap; z-index: 3;
}
.kfp-mp-scrubber:hover .kfp-mp-scrub-indicator,
.kfp-mp-scrubber:hover .kfp-mp-scrub-time { opacity: 1; }
.kfp-mp-scrubber.touching .kfp-mp-scrub-indicator,
.kfp-mp-scrubber.touching .kfp-mp-scrub-time { opacity: 1; }

/* ── Main row ── */
.kfp-mp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 12px;
}

/* ── Album art ── */
.kfp-mp-art {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid rgba(var(--art-r),var(--art-g),var(--art-b),0.25);
  box-shadow: 0 3px 12px rgba(var(--art-r),var(--art-g),var(--art-b),0.12);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--text-subtle);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.kfp-mp-art img { width: 100%; height: 100%; object-fit: cover; }

/* ── Track info ── */
.kfp-mp-info { flex: 1; min-width: 0; }
.kfp-mp-title {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); line-height: 1.2;
}
.kfp-mp-artist {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400; letter-spacing: 0.07em;
  color: #A8A8A4;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Controls ── */
.kfp-mp-controls {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}

.kfp-mp-heart {
  background: none; border: none;
  color: var(--text-subtle);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  transition: color 0.15s, transform 0.2s var(--ease-spring);
}
.kfp-mp-heart:hover   { color: var(--heart); transform: scale(1.1); }
.kfp-mp-heart.hearted { color: var(--heart); }
.kfp-mp-heart.hearted .kfp-icon-heart { fill: var(--heart); }

.kfp-mp-prev, .kfp-mp-next {
  background: none; border: none;
  color: rgba(255,255,255,0.35);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  transition: color 0.15s, transform 0.18s var(--ease-spring);
}
.kfp-mp-prev:hover, .kfp-mp-next:hover { color: rgba(255,255,255,0.7); transform: scale(1.08); }
.kfp-mp-prev:active, .kfp-mp-next:active { transform: scale(0.9); }

/* Play/Pause — no circle, just the icon, art color */
.kfp-mp-playpause {
  background: none; border: none;
  color: rgba(var(--art-r),var(--art-g),var(--art-b),1);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color 0.3s ease, transform 0.2s var(--ease-spring), filter 0.2s ease;
  filter: drop-shadow(0 0 0px rgba(var(--art-r),var(--art-g),var(--art-b),0));
  margin: 0 2px;
}
.kfp-mp-playpause:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(var(--art-r),var(--art-g),var(--art-b),0.6));
}
.kfp-mp-playpause:active { transform: scale(0.9); }
.kfp-mini-player.kfp-playing .kfp-mp-playpause {
  filter: drop-shadow(0 0 6px rgba(var(--art-r),var(--art-g),var(--art-b),0.45));
}

/* ── Download button ── */
.kfp-mp-download {
  position: relative;
  background: none; border: none;
  color: rgba(255,255,255,0.25);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  transition: color 0.15s;
}
.kfp-mp-download:hover { color: rgba(255,255,255,0.6); }
.kfp-mp-download.is-admin {
  color: rgba(var(--art-r),var(--art-g),var(--art-b),0.75);
}
.kfp-mp-download.is-admin:hover {
  color: rgba(var(--art-r),var(--art-g),var(--art-b),1);
}
/* Tooltip for non-admin */
.kfp-mp-download:not(.is-admin)::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; white-space: nowrap;
  padding: 5px 10px; border-radius: 6px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.kfp-mp-download:not(.is-admin):hover::after { opacity: 1; }

body.kfp-player-active .kfp-page { padding-bottom: 120px; }

/* ════════════════════════════════════════
   RESPONSIVE — mobile-first adjustments
════════════════════════════════════════ */
@media (max-width: 600px) {
  .kfp-nav { padding: 0 20px; gap: 0; justify-content: space-between; }
  .kfp-nav-links { display: none; }
  .kfp-page { padding: 48px 20px 100px; }
  .kfp-feature-grid  { grid-template-columns: 1fr; }
  .kfp-journal-grid  { grid-template-columns: 1fr; }
  .kfp-price-grid    { grid-template-columns: 1fr; max-width: 100%; }
  .kfp-type-display  { font-size: clamp(30px, 8vw, 44px); }
  .kfp-feature-card  { min-height: auto; }
  .kfp-price-card    { padding: 20px; }
  .kfp-journal-card.featured .kfp-journal-card-img { height: 160px; }
}

@media (max-width: 767px) {
  .kfp-mp-art  { display: none; }
  .kfp-mp-row  { cursor: pointer; }
  .kfp-mp-info { user-select: none; }
  .kfp-mp-scrubber {
    height: 4px;
    padding: 8px 0; margin: -8px 0;
    box-sizing: content-box;
  }
}

@media (min-width: 768px) {
  .kfp-mp-row {
    max-width: 860px; margin: 0 auto;
    padding: 10px 32px 12px; cursor: default;
  }
  .kfp-mp-scrubber { height: 3px; transition: height 0.15s; }
  .kfp-mp-scrubber:hover { height: 5px; }
}