/* ═══════════════════════════════════════════════
   SHOWCASE PAGE
═══════════════════════════════════════════════ */

.showcase-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(8rem, 14vw, 11rem) 2rem 2rem;
  text-align: center;
}

.showcase-hero-eyebrow {
  text-align: center;
}

.showcase-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 1rem 0;
}

.showcase-hero-title em {
  color: var(--color-primary);
  font-style: italic;
}

.showcase-hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.75;
  color: var(--color-subtle);
}

.showcase-grid-section {
  padding: 2rem 2rem clamp(6rem, 10vw, 9rem);
}

.showcase-grid-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.showcase-wc-grid {
  /* .wc-grid already provides the 1-col/2-col responsive grid (global.css);
     this class exists only in case this page ever needs its own grid
     tuning independent of about.html's Selected Work grid. */
}

/* ── Float treatment ──
   Two layered effects on two different elements so their `transform`
   properties never fight: `.showcase-float` (outer) owns the continuous
   idle bob via a CSS animation. `.showcase-tilt` (inner, the `.wc-card`
   itself) is left with NO transform/animation of its own here — showcase.js
   sets its `transform` directly via inline style on mousemove, so the two
   effects compose instead of overwriting each other. */
.showcase-float {
  animation: showcase-bob 5s ease-in-out infinite;
  /* perspective lives here, not on a further-up ancestor, because it only
     establishes a 3D viewing context for its DIRECT children — .showcase-tilt
     is this element's direct child, so this is where it must sit for the
     mouse-tilt to render with actual depth instead of a flat skew. */
  perspective: 900px;
}

.showcase-float:nth-child(3n+1) { animation-delay: -1.3s; }
.showcase-float:nth-child(3n+2) { animation-delay: -3.1s; }
.showcase-float:nth-child(3n+3) { animation-delay: -0.6s; }

@keyframes showcase-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.showcase-tilt {
  transition: transform 200ms ease-out;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-float {
    animation: none;
  }
  .showcase-tilt {
    transition: none;
  }
}

/* ── Placeholder card ── */
.wc-card--placeholder {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(184, 167, 127, 0.25);
  cursor: default;
}

.wc-card--placeholder .wc-card-body {
  background: none;
  color: var(--color-subtle);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.wc-card--placeholder .wc-card-heading {
  color: var(--color-text);
}