/* showcase-prototype.css — 3-lane phone carousel with center scrim.
 *
 * Behavior:
 *   • 12 phones (4 per lane × 3 lanes) — placed by JS via absolute
 *     `left` and a CSS-set `top: var(--laneY)`.
 *   • Live animation: requestAnimationFrame in JS updates each
 *     phone's `left` for continuous horizontal scroll. Lanes scroll
 *     in alternating directions at slightly varied speeds.
 *   • Hover canvas → pause + cursor goes `grab` → mousedown +
 *     horizontal drag scrubs all 12 phones in unison (per-lane
 *     direction multiplier so alternating lanes oppose).
 *   • Hover any phone → center panel populates with that reel's
 *     metrics (crossfade between default + active panels).
 *   • Center scrim is an opaque rectangle (intersected linear
 *     gradients) — fully covers the text-block footprint with
 *     no transparency, so phones moving past disappear behind it.
 *   • Reveal: each tile starts blurred + scaled-down + opacity 0
 *     and transitions in with bounce easing, randomly staggered
 *     via JS-assigned --seq, when .is-revealed lands on the stage.
 *
 * Per-tile CSS variables (set by JS on each .showcase-tile):
 *   --laneY    lane Y position (% of canvas)
 *   --seq      reveal stagger index — randomized per tile by JS
 */

/* ── Page chrome (prototype only) ────────────────────────────── */
.showcase-page {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.showcase-page__head {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 10, 10, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.showcase-page__back {
  color: var(--text);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-smooth);
}
.showcase-page__back:hover { color: var(--accent); }
.showcase-page__tag { color: var(--text-dim); }

/* ── Lead-in copy ──────────────────────────────────────────── */
.showcase-lead {
  padding: var(--space-5xl) 0 var(--space-4xl);
}
.showcase-lead h1 {
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 12px 0 24px;
}
.showcase-lead .lead {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── The showcase section ──────────────────────────────────── */
.showcase {
  position: relative;
  min-height: 100vh;
  padding: var(--space-5xl) 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
    var(--bg);
  overflow: hidden;
}
.showcase__stage {
  position: relative;
  height: min(880px, 95vh);
  width: 100%;
}

/* ── Canvas: 3 lanes ─────────────────────────────────────── */
.showcase__canvas {
  position: absolute;
  inset: 0;
  isolation: isolate;
  z-index: 1;
  overflow: hidden;
  /* Phones fade out as they approach the top/bottom edges instead of
     clipping on a hard line (owner note 2026-06-10) */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  /* Fluid phone size: scales with the window so wide screens get
     bigger phones, but capped so 4 per lane can NEVER collide
     (stride = (w - tile)/3 stays > tile while tile < w/4; 9vw ≪ 25vw). */
  --tileW: clamp(84px, 9vw, 168px);
}
@media (pointer: fine) {
  .showcase__canvas:hover { cursor: grab; }
  .showcase__canvas.is-dragging { cursor: grabbing; }
}

/* Each phone is absolutely-positioned. CSS owns top (lane Y),
   transform (translateY for centering + scale for reveal), opacity,
   and filter. JS owns `left` (live x position). Initial state: blurred,
   faded, scaled-down — transitions to rest when .is-revealed lands
   on the stage. Per-tile delay via --seq (randomized by JS) gives an
   organic, non-row-by-row reveal. */
.showcase-tile {
  position: absolute;
  top: 0; /* JS positions every tile (vertical column engine) */
  width: var(--tileW);
  transform: scale(0.92);
  filter: blur(28px);
  opacity: 0;
  transition:
    opacity   0.95s cubic-bezier(0.16, 1, 0.3, 1)      calc(var(--seq, 0) * 0.07s),
    filter    1.15s cubic-bezier(0.16, 1, 0.3, 1)      calc(var(--seq, 0) * 0.07s),
    transform 1.05s cubic-bezier(0.34, 1.56, 0.64, 1)  calc(var(--seq, 0) * 0.07s);
  will-change: left, transform, filter, opacity;
}
.showcase__stage.is-revealed .showcase-tile {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
}

/* .reels__tile in styles.css declares its own --reel-w: 280px and
   width: var(--reel-w). The self-declaration wins over inherited
   --tileW, so override here via a higher-specificity selector. */
.showcase-tile .reels__tile {
  --reel-w: var(--tileW);
  width: var(--tileW);
}

/* ── Center scrim (long rectangle, not oval) ─────────────────
   Solid background-color overlay that covers the middle of the
   canvas. Two perpendicular linear-gradient masks intersected
   give a RECTANGULAR opaque plateau with smooth fades on all
   four sides — no visible roundedness when phones pass behind.
   Sits between the canvas (z-index 1) and the centered text
   (z-index 10). */
.showcase__scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--bg);
  /* Horizontal plateau scales with the column grid (it was a fixed
     ±400px, which swallowed 4 of 6 columns on laptop widths):
       6-col desktops (>=1180): cover ONLY the middle two columns
       4-col tablets: cover the middle two of four
       2-sliver mobile: wide plateau, fading just before the edge slivers
     Vertical band stays proportional. */
  --scrim-plateau: 32vw;
  --scrim-fade: 38vw;
  -webkit-mask-image:
    linear-gradient(90deg, transparent calc(50% - var(--scrim-fade)), #000 calc(50% - var(--scrim-plateau)), #000 calc(50% + var(--scrim-plateau)), transparent calc(50% + var(--scrim-fade))),
    linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent calc(50% - var(--scrim-fade)), #000 calc(50% - var(--scrim-plateau)), #000 calc(50% + var(--scrim-plateau)), transparent calc(50% + var(--scrim-fade))),
    linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 768px) {
  .showcase__scrim { --scrim-plateau: 18vw; --scrim-fade: 26vw; }
}
@media (min-width: 1180px) {
  .showcase__scrim { --scrim-plateau: 14vw; --scrim-fade: 19.5vw; }
}

/* ── Centered text block ────────────────────────────────────
   Always on top (z-index: 10). A soft radial vignette behind it
   (via ::before) carves out a legible "hole" through the phone
   wallpaper.
   The block contains two stacked panels — `--default` (the static
   headline + CTA) and `--active` (live readout of the hovered
   tile's metrics). Crossfade via opacity when .is-hovering is on
   the .showcase__center element. */
.showcase__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(560px, calc(100vw - 96px));
  text-align: center;
  padding: 24px 28px;
  opacity: 0;
  transition: opacity 0.9s var(--ease-smooth) 0.1s;
}
.showcase__stage.is-revealed .showcase__center { opacity: 1; }
/* .showcase__scrim handles the opaque cover behind text now — no
   pseudo-element vignette needed. */

/* Both panels share styling for typography; crossfade controlled by
   parent .is-hovering state. Default is in normal flow (drives the
   block's height), active is absolutely overlaid on top. */
.showcase__panel {
  transition:
    opacity 0.28s var(--ease-smooth),
    transform 0.28s var(--ease-smooth);
}
.showcase__panel--default {
  position: relative;
}
.showcase__panel--active {
  position: absolute;
  inset: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.showcase__center.is-hovering .showcase__panel--default {
  opacity: 0;
  transform: translateY(-4px);
}
.showcase__center.is-hovering .showcase__panel--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.showcase__panel .eyebrow {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.showcase__title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
.showcase__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40ch;
  margin: 0 auto 28px;
}
.showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Quiet proof-navigation link for the DEFAULT panel — deliberately
   not a button. The default panel is evidence ("here's the engine
   running"), not a conversion ask; a filled CTA here made the
   section read like a second contact-cta closer stacked under the
   hero's button. The hover panel keeps its button because it's
   contextual to a specific reel the visitor chose to inspect. */
.showcase__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition:
    color var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth);
}
.showcase__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Big-number readout in the active panel — view count is the headline
   metric, with "views" sitting beneath it as a small label. */
.showcase__bignum {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 16px;
  line-height: 0.95;
}
.showcase__bignum-val {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.showcase__bignum-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── PhoneTile overrides inside the showcase ──────────────── */
.showcase-tile .reels__tile {
  cursor: pointer;
  pointer-events: auto;
}
.showcase-tile .reels__tile:hover { transform: none; }
/* Per-tile metrics strip (the original reels-carousel meta row).
   Hidden until the phone is hovered; fades in just under the shell.
   Replaces the old center-panel hijack (owner call 2026-06-10). */
.showcase-tile .reels__meta {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
  z-index: 5;
}
.showcase-tile .reels__tile:hover .reels__meta,
.showcase-tile .reels__tile:focus-visible .reels__meta {
  opacity: 1;
  transform: translate(-50%, 0);
}
.showcase-tile .reels__tile { position: relative; }

/* Subtle interactive feedback on hover: accent border + glow on
   the phone shell so the visitor knows they can interact. */
.showcase-tile .reels__phone {
  transition:
    border-color var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}
.showcase-tile:hover .reels__phone {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px var(--accent),
    0 28px 80px -16px rgba(255, 107, 53, 0.25);
}

/* ── Trailing content ──────────────────────────────────────── */
.showcase-trail {
  padding: var(--space-5xl) 0;
  text-align: center;
}
.showcase-trail h2 {
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
  margin: 16px 0 12px;
}
.showcase-trail p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .showcase__stage { height: min(560px, 70vh); }
  .showcase__center { width: min(440px, calc(100vw - 64px)); padding: 20px 24px; }
  .showcase__panel--active { inset: 20px 24px; }
}
@media (max-width: 767px) {
  /* taller stage so three columns have room to drift */
  .showcase__stage { height: min(640px, 85vh); }
}

@media (max-width: 600px) {
  .showcase__stage { height: min(560px, 80vh); }
  .showcase__center { width: calc(100vw - 48px); padding: 16px 20px; }
  .showcase__panel--active { inset: 16px 20px; }
}

/* ── Reduced motion ────────────────────────────────────────── */
/* Skip the blur/bounce reveal. JS-side also freezes the lane
   animation. Phones render at rest immediately, center text shows. */
@media (prefers-reduced-motion: reduce) {
  .showcase-tile {
    transform: translateY(-50%);
    filter: none;
    opacity: 1;
    transition: none;
  }
  .showcase__center { opacity: 1; transition: none; }
}