/* ==========================================================================
   Launch Labs — Section: "Every successful website begins with SHAPE."
   Sits directly below the final-cta section, same black surface. Introduces
   SHAPE as a methodology, not a form: a large centred header, then three
   equal photo-led columns (no card chrome — the photograph does the work),
   then a single red CTA. Deliberately closer to an Apple product page than
   an agency feature grid — generous whitespace, no borders, no icons in
   the columns themselves.

   Reveal, via js/shape-intro.js: one shared .is-visible trigger on the
   section (existing IntersectionObserver pattern used across the page).
   Header lines stagger first, then the three columns, then the CTA last.

   Clicking "Start SHAPE" (data-shape-open, wired in js/shape-modal.js)
   opens the same fullscreen SHAPE questionnaire used elsewhere on the page.
   ========================================================================== */

.shape-intro {
  --ink: #FFFFFF;
  --ink-muted: rgba(255, 255, 255, 0.66);
  --ink-faint: rgba(255, 255, 255, 0.45);
  --contrast: #D92632;

  background: #010202;
  color: var(--ink);
  padding: clamp(6rem, 13vw, 9.5rem) clamp(1.5rem, 4vw, 4rem);
}

.shape-intro__inner {
  max-width: 78rem;
  margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.shape-intro__header {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.shape-intro__eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--contrast);
  opacity: 0;
  transform: translateY(12px);
}

.shape-intro__heading {
  margin: 1rem auto 0;
  max-width: 27ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4.4vh, 3.4rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(14px);
}

.shape-intro__sub {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(14px);
}

.shape-intro.is-visible .shape-intro__eyebrow,
.shape-intro.is-visible .shape-intro__heading,
.shape-intro.is-visible .shape-intro__sub {
  animation: shape-intro-rise 0.8s var(--ease) forwards;
}

.shape-intro.is-visible .shape-intro__eyebrow { animation-delay: 0s; }
.shape-intro.is-visible .shape-intro__heading { animation-delay: 0.08s; }
.shape-intro.is-visible .shape-intro__sub     { animation-delay: 0.18s; }

/* ==========================================================================
   Columns — three photo-led steps, no card chrome
   ========================================================================== */
.shape-intro__grid {
  margin: clamp(4rem, 7.5vw, 5.75rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
}

.shape-card {
  opacity: 0;
  transform: translateY(18px);
}

.shape-intro.is-visible .shape-card {
  animation: shape-intro-rise 0.75s var(--ease) forwards;
}

.shape-intro.is-visible .shape-card:nth-child(1) { animation-delay: 0.32s; }
.shape-intro.is-visible .shape-card:nth-child(2) { animation-delay: 0.44s; }
.shape-intro.is-visible .shape-card:nth-child(3) { animation-delay: 0.56s; }

.shape-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 24px 48px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}

.shape-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.1s var(--ease);
}

/* Placeholder treatment for columns without a final photograph yet — swap
   the .shape-card__media--placeholder element for an <img class="shape-card__image">
   with the same aspect-ratio once the real photography is ready. */
.shape-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 140% at 18% 12%, rgba(217, 38, 50, 0.24), transparent 55%),
    radial-gradient(100% 120% at 88% 92%, rgba(217, 38, 50, 0.14), transparent 60%),
    linear-gradient(160deg, #1c1c1c 0%, #0e0e0e 60%, #050505 100%);
}

.shape-card__media--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shape-card__placeholder-icon {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(255, 255, 255, 0.45);
}

.shape-card__placeholder-icon svg {
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .shape-card:hover .shape-card__media {
    transform: translateY(-6px);
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.55),
      0 32px 64px rgba(0, 0, 0, 0.46),
      0 8px 20px rgba(0, 0, 0, 0.34);
  }

  .shape-card:hover .shape-card__image {
    transform: scale(1.03);
  }
}

.shape-card__heading {
  margin-top: 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.shape-card__copy {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.shape-intro__cta {
  margin: clamp(4rem, 7vw, 5.5rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(14px);
}

.shape-intro.is-visible .shape-intro__cta {
  animation: shape-intro-rise 0.85s var(--ease) forwards;
  animation-delay: 0.74s;
}

.shape-intro__btn {
  padding: 1.25rem 3.25rem;
  font-size: 1rem;
}

.shape-intro__cta-note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes shape-intro-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 58rem) {
  .shape-intro__grid {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}