/* =============================================================================
   Neginato — showcase.css
   Presentation for the real app screenshots (hero window + Now Playing strip)
   and the hero/CTA/pillar layout blocks. The album art and all track metadata
   in those screenshots are invented, so no third-party artwork or titles are
   reproduced. Depends on tokens from base.css.
   ============================================================================= */

/* ---- real app screenshots -------------------------------------------------- */
.appshot,
.statusshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}
/* The Now Playing strip is a thin crop, so it carries a tighter radius and a
   lighter shadow than the full window. */
.statusshot {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  margin-top: var(--space-4);
}

/* ---- 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: minmax(0, 0.95fr) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 3.2rem); align-items: center; }
/* minmax(0, …), not 1fr: a bare `1fr` takes min-content as its floor, and a replaced
   element's min-content is its intrinsic width — 1308px here, wide enough to push the
   screenshot past the viewport. */
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 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); }
/* min-width:0 — a grid item's automatic minimum is min-content, which the screenshot's
   intrinsic width would otherwise use to overflow the hero on narrow screens. */
.hero-visual { position: relative; min-width: 0; }
.hero-visual .appshot { max-width: 100%; transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); transform-origin: center; }
@media (max-width: 940px) { .hero-visual .appshot { 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 { 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); }