/* =============================================================================
   Neginato — showcase.css
   Custom CSS/SVG recreations of the app UI (stand-ins for screenshots):
   a mac window frame, the album-artwork grid, the now-playing bar with a
   two-tone waveform scrubber, and the color-coded bit-perfect status bar.
   Depends on tokens from base.css.
   ============================================================================= */

/* ---- mac-style app window ------------------------------------------------- */
.appwin {
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  isolation: isolate;
}
.appwin__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
}
.appwin__lights { display: flex; gap: 0.45rem; }
.appwin__lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.appwin__lights i:nth-child(1) { background: #ff5f57; }
.appwin__lights i:nth-child(2) { background: #febc2e; }
.appwin__lights i:nth-child(3) { background: #28c840; }
.appwin__title { font-size: var(--step--1); color: var(--muted); margin-inline: auto; padding-right: 2.4rem; }
.appwin__body { background: var(--bg); }

/* ---- album grid ----------------------------------------------------------- */
.albumgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.4vw, 0.9rem);
  padding: clamp(0.9rem, 2.2vw, 1.4rem);
}
@media (max-width: 560px) { .albumgrid { grid-template-columns: repeat(3, 1fr); } }
.album { display: grid; gap: 0.4rem; }
.album__art {
  aspect-ratio: 1; border-radius: var(--r-md);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-1); border: 1px solid var(--border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.album:hover .album__art { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-2); }
.album__art::after { /* subtle vinyl sheen */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
}
.album__art span { /* play glyph on hover */
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; opacity: 0; transition: opacity 0.25s; z-index: 2;
}
.album:hover .album__art span { opacity: 1; }
.album__art span svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.album__meta { padding-inline: 0.15rem; }
.album__title { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album__artist { font-size: 0.72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Album cover gradients (abstract, brand-consistent — not real album art) */
.cov1 { background: linear-gradient(135deg,#d9a93a,#7a4d12); }
.cov2 { background: linear-gradient(135deg,#4fe0a6,#0e6b74); }
.cov3 { background: linear-gradient(135deg,#5b7cff,#22224d); }
.cov4 { background: linear-gradient(135deg,#f0c45a,#b8892a); }
.cov5 { background: linear-gradient(135deg,#ff8fa3,#5b1f3a); }
.cov6 { background: linear-gradient(135deg,#2fb582,#123a30); }
.cov7 { background: linear-gradient(135deg,#8a7be0,#2a2350); }
.cov8 { background: linear-gradient(135deg,#e0894f,#5b2a12); }
.cov9 { background: linear-gradient(135deg,#4a9fd6,#123047); }
.cov10{ background: linear-gradient(135deg,#c9d24f,#4a5210); }
.cov11{ background: linear-gradient(135deg,#e05f8a,#3a1224); }
.cov12{ background: linear-gradient(135deg,#3ad0c0,#0e4a48); }

/* ---- now-playing bar ------------------------------------------------------ */
.nowplaying {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  padding: 0.7rem clamp(0.7rem, 2vw, 1.1rem);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-top: 1px solid var(--border);
}
.np__now { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.np__art { width: 46px; height: 46px; border-radius: 9px; flex: none; box-shadow: var(--shadow-1); }
.np__text { min-width: 0; }
.np__title { font-size: 0.85rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np__artist { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.np__center { display: grid; gap: 0.4rem; min-width: 0; }
.np__transport { display: flex; align-items: center; justify-content: center; gap: 0.9rem; color: var(--muted); }
.np__transport button { background: none; border: 0; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 0.15rem; transition: color 0.2s, transform 0.2s; }
.np__transport button:hover { color: var(--text-strong); transform: scale(1.08); }
.np__transport svg { width: 18px; height: 18px; }
.np__play { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-mint); color: #04241a !important; box-shadow: var(--glow-mint); }
.np__play svg { width: 16px; height: 16px; }

/* ---- waveform scrubber (two-tone) ----------------------------------------- */
.waveform {
  display: flex; align-items: center; gap: 2px; height: 34px;
  --played: 38%;
}
.waveform .bar {
  flex: 1; border-radius: 2px; min-width: 2px;
  background: var(--faint);
  transition: background 0.2s;
}
.waveform .bar.played { background: var(--mint); }
/* No-JS fallback: a flat two-tone bar until the JS builds the real bars. */
.waveform:empty { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mint) 0 38%, var(--faint) 38% 100%); }
.np__times { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
/* On phones the 60-bar waveform would exceed the window; show fewer, thinner bars so the
   full two-tone scrubber stays inside the app-window frame. */
@media (max-width: 620px) {
  .waveform { gap: 1.5px; overflow: hidden; }
  .waveform .bar { min-width: 1px; }
  .waveform .bar:nth-child(n+37) { display: none; }
}

.np__right { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); }
.np__right svg { width: 17px; height: 17px; }
.np__vol { width: 74px; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.np__vol i { display: block; height: 100%; width: 65%; background: var(--muted); }
@media (max-width: 620px) { .np__right { display: none; } }

/* ---- status bar (what reaches the DAC) ------------------------------------ */
.statusbar {
  display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1rem);
  flex-wrap: wrap;
  padding: 0.5rem clamp(0.7rem, 2vw, 1.1rem);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.statusbar .sf { display: inline-flex; align-items: center; gap: 0.35rem; }
.statusbar .sf b { color: var(--text); font-weight: 600; }
.statusbar .sep { width: 1px; height: 14px; background: var(--border-strong); }
.statusbar .spacer { margin-left: auto; }
@media (max-width: 620px) { .statusbar .hide-sm { display: none; } .statusbar .spacer { margin-left: 0; width: 100%; } }

/* standalone status-strip showcase (in the features area) */
.statusbar--demo { border: 1px solid var(--border); border-radius: var(--r-md); border-top: 1px solid var(--border); }

/* ---- hero layout ---------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--grad-hero);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::before { /* soft mint aura */
  content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  right: -12vw; top: -18vw; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mint) 20%, transparent), transparent 62%);
  pointer-events: none; z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } }
.hero h1 { margin-block: var(--space-4) var(--space-4); }
.hero .lead { max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.hero-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-6); }
.hero-visual { position: relative; }
.hero-visual .appwin { transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); transform-origin: center; }
@media (max-width: 940px) { .hero-visual .appwin { transform: none; } }

/* CTA band */
.cta-band {
  text-align: center; border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band .btn, .cta-band .appstore { margin-top: var(--space-5); }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.pillar { padding: var(--space-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.pillar .n { font-family: var(--font-mono); color: var(--mint); font-size: 0.8rem; }
.pillar h3 { margin-block: var(--space-2); }
.pillar p { color: var(--muted); font-size: var(--step-0); }

/* requirements strip */
.reqs { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.req { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.1rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: var(--step--1); font-weight: 560; }
.req svg { width: 16px; height: 16px; color: var(--mint); }