/* ==========================================================================
   EXPERIMENTAL EMOTION LOGIC SCROLL SECTION — CSS START
   ==========================================================================
   Launch Labs — Experimental section: "Emotion + Logic" pinned scroll piece.
   Every selector is namespaced under .el-scroll-, and nothing here writes
   to any other part of the page — but this is NO LONGER purely deletable:
   it now also hosts real, permanent site content moved down from
   elsewhere (see the "Intro" and the .el-scroll-next comment further
   down for exactly what and why). Sits directly under the existing
   .philosophy (Emotion/Logic) section, which it does not replace, but it
   no longer sits above a separate .process section — that section's
   content now lives inside this one instead (.el-scroll-next).

   Narrative: intro -> EMOTION FIRST -> LOGIC SECOND -> BOTH TOGETHER ->
   FINAL MESSAGE -> expand into "How do we achieve that? / Simple. Fast.
   Done.". See js/el-scroll.js for the full scrubbed GSAP timeline that
   drives this.

   Pinning: GSAP ScrollTrigger's `pin: true` (see el-scroll.js), NOT CSS
   `position: sticky` — the two are never combined on the same stage.
   .el-scroll-section is left at its natural (~100vh) height; .el-scroll-
   stage is a normal in-flow 100vh block that GSAP pins, extending the
   scroll runway itself via `end: "+=250%"` + `pinSpacing: true` (its own
   auto-inserted spacer), so there is no layout jump at either end and no
   need to hand-tune a tall section height in CSS.

   Card equality: both cards share one flex row with `flex: 1 1 0%`, so
   their width is always mathematically identical — expansion during the
   "join" phase animates the *container's* width and gap only (one tween
   driving both cards at once), never a per-card width, so neither card
   can ever end up larger than the other even mid-scroll.

   Responsive: desktop and tablet both get the full pinned sequence (the
   runway length is set in el-scroll.js's ScrollTrigger config, not here),
   tablet's internal timeline compressed via its gsap.matchMedia() branch;
   mobile drops the pin entirely and stacks the two cards with a plain
   IntersectionObserver fade-up (its mobile branch).

   prefers-reduced-motion: no pin, no runway, both cards shown fully and
   equally, the final message beneath them, statically, immediately.
   ========================================================================== */

.el-scroll-section {
  --el-ink: #FFFFFF;
  --el-ink-muted: rgba(255, 255, 255, 0.66);
  --el-ink-faint: rgba(255, 255, 255, 0.45);
  --el-contrast: #D92632;
  --el-card-radius: 28px;

  position: relative;
  background: #010202;
  color: var(--el-ink);
}

.el-scroll-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ---------- Background layer — a quiet, slow-moving backdrop so the
   stage never reads as flat ---------- */
.el-scroll-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(48% 60% at 22% 60%, rgba(217, 38, 50, 0.10), transparent 65%),
    radial-gradient(48% 60% at 78% 55%, rgba(255, 255, 255, 0.05), transparent 65%);
  opacity: 0.6;
  transform: scale(1);
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- Intro — moved here from the original .philosophy section
   (its eyebrow + heading), so it now introduces the whole Emotion/Logic
   sequence rather than sitting statically above it. Real, accessible
   content (not aria-hidden like .el-scroll-next) — this is now the only
   instance of this heading on the page. Sits in the space above the
   cards; fades in at the very start of the pinned sequence and fades
   out again once the cards' own content starts clearing (see
   el-scroll.js), so it doesn't linger into the join/expand narrative. ---------- */
.el-scroll-intro {
  position: absolute;
  top: clamp(2.5rem, 6vh, 4.5rem);
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

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

.el-scroll-intro__heading {
  margin-top: 1rem;
  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(--el-ink);
}

/* ---------- Cards ---------- */
.el-scroll-cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(47.5rem, 62vw, 56.25rem);
  max-width: 65.625rem;
  height: 46vh;
  gap: 4rem;
  will-change: width, gap;
}

.el-scroll-card {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  border-radius: var(--el-card-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  will-change: border-radius;
}

.el-scroll-card--emotion {
  background:
    radial-gradient(120% 140% at 26% 100%, rgba(217, 38, 50, 0.16), transparent 62%),
    linear-gradient(165deg, #1c1210 0%, #120b0a 58%, #090605 100%);
  border: 1px solid rgba(217, 38, 50, 0.24);
  border-top-right-radius: var(--el-card-radius);
  border-bottom-right-radius: var(--el-card-radius);
}

.el-scroll-card--logic {
  background:
    radial-gradient(120% 140% at 74% 100%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(165deg, #17181a 0%, #101112 58%, #08090a 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-left-radius: var(--el-card-radius);
  border-bottom-left-radius: var(--el-card-radius);
}

/* ---------- Blend — a solid black overlay inside each card, faded in
   only during the final "expand to fill the viewport" phase so the two
   tinted gradients wash out into the page's own black rather than the
   colour simply vanishing. Sits inset:0 inside a card that already has
   overflow:hidden + a live-animated border-radius, so it's automatically
   clipped to match the card's current rounded/flattening corners with no
   extra JS needed for its own shape. ---------- */
.el-scroll-card__blend {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #010202;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Wash — a single unified black cover spanning the whole
   .el-scroll-cards box (not per-card), sitting above both cards and the
   seam. This is the belt-and-suspenders fix for the centre dividing
   line: the per-card blends + border fade should already remove it, but
   they rely on two separate elements meeting at an exact 0px seam, which
   can be thrown off by sub-pixel flex rounding. The wash doesn't care
   about the card boundary at all — it's one rectangle, so nothing can
   show through at the centre once it reaches full opacity. ---------- */
.el-scroll-wash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #010202;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Seam — a soft warm/cool blend that only becomes visible as
   the two cards close their gap and their inner edges soften ---------- */
.el-scroll-seam {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 10rem;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(217, 38, 50, 0.10) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.06) 100%);
  filter: blur(18px);
}

/* ---------- Card inner content — the whole-card "active/subdued"
   emphasis lives here (opacity only, never size), plus this is what
   fades to nothing during the join phase, clearing the frame for the
   final message. ---------- */
.el-scroll-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 1;
}

.el-scroll-card--logic .el-scroll-card__inner {
  opacity: 0.3;
}

.el-scroll-card__icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.25rem;
}

.el-scroll-card__icon svg {
  width: 100%;
  height: 100%;
}

.el-scroll-card--emotion .el-scroll-card__icon { color: var(--el-contrast); }
.el-scroll-card--logic .el-scroll-card__icon { color: rgba(255, 255, 255, 0.72); }

.el-scroll-card__label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--el-ink);
}

/* ---------- The staggered detail group — heading, description, divider,
   bullet list — revealed one after another within each card's active
   phase (see el-scroll.js). ---------- */
.el-scroll-card__heading {
  margin-top: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--el-ink);
  opacity: 0;
  transform: translateY(10px);
}

.el-scroll-card__description {
  margin-top: 0.4rem;
  max-width: 22rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--el-ink-muted);
  opacity: 0;
  transform: translateY(10px);
}

.el-scroll-card__divider {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: 0.85rem 0;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.el-scroll-card--emotion .el-scroll-card__divider { background: rgba(217, 38, 50, 0.4); }
.el-scroll-card--logic .el-scroll-card__divider { background: rgba(255, 255, 255, 0.25); }

.el-scroll-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.el-scroll-card__list li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--el-ink-muted);
  opacity: 0;
  transform: translateY(8px);
}

.el-scroll-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--el-ink-faint);
}

/* ---------- Final message overlay — centred over the joined composition ---------- */
.el-scroll-message {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
}

.el-scroll-message__line {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--el-ink);
  opacity: 0;
  transform: translateY(24px);
}

.el-scroll-message__final {
  margin-top: 1.1rem;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--el-ink-muted);
  opacity: 0;
  transform: translateY(20px);
}

/* ---------- "How do we achieve that? / Simple. Fast. Done." — this used
   to be a separate .process section; it's now built directly into this
   pinned sequence instead, revealed once the box has expanded to fill
   the viewport, right before the pin releases. Reuses process.css's
   classes (.process__eyebrow, .process-card, .process__closing-rule,
   etc.) directly rather than parallel el-scroll-* CSS, since that
   styling still belongs here — it's just no longer duplicated against a
   second copy of the same section. Those classes' own opacity:0 /
   transform-offset base styles (process.css) already give this the
   correct pre-reveal state; process.css's `.process.is-visible ...`
   reveal-animation selectors never match here (this lives under
   .el-scroll-next, not an element with class "process"), so el-scroll.js
   drives the reveal directly via GSAP with no conflict — process.css is
   only ever read from for its unconditional/base rules, never edited.

   Real content: no aria-hidden, and the CTA has data-shape-open wired up
   like any other "Start SHAPE" button on the page — text is selectable,
   cards get their normal hover treatment, the button gets its normal
   hover treatment. Nothing here is decorative or inert.

   Sizing: flex-shrink: 0 on the three direct children below is
   deliberate — .el-scroll-next is a flex column, and without it the
   flexbox algorithm can compress .process__row/.process__closing to fit
   the pinned 100vh frame, which both distorts the cards and can shrink
   the closing line + CTA down far enough to disappear. No spacing
   overrides here otherwise — this uses process.css's own margins
   unmodified, so it renders at exactly the size/rhythm the old .process
   section used to (may run past the pinned viewport's edges on short
   screens, in which case .el-scroll-stage's own overflow: hidden crops
   it, rather than the layout silently distorting).

   Desktop/tablet only — never populated with real opacity by JS on
   mobile or under reduced motion, since neither of those run the pinned
   sequence this belongs to; on those, .el-scroll-message's own closing
   line is the section's conclusion instead. ---------- */
.el-scroll-next {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: auto;
}

/* No text-align: center here — .process__intro and .process__closing
   already set that themselves (process.css), unconditionally. Leaving it
   off .el-scroll-next means .process__row/.process-card correctly fall
   back to their real default (left-aligned), instead of inheriting a
   centering they were never meant to have. */

.el-scroll-next .process__intro,
.el-scroll-next .process__row,
.el-scroll-next .process__closing {
  flex-shrink: 0;
}

.el-scroll-next .process__closing-line {
  width: 100%;
}

/* The duplicate "Start SHAPE" button keeps its hover treatment (lift,
   spotlight, border glow) — pointer-events stay auto here, inherited
   from .el-scroll-next above — but it still can't actually do anything:
   it has no data-shape-open in the HTML, so a click is a no-op, and
   tabindex="-1" keeps it out of the keyboard tab order. Hover-only, not
   a second live control. */

/* ==========================================================================
   Tablet — shorter runway, same GSAP pin mechanism, simplified/compressed
   via el-scroll.js's tablet gsap.matchMedia() branch. Cards stay side by
   side.
   ========================================================================== */
@media (max-width: 64rem) {
  .el-scroll-cards {
    width: clamp(38rem, 76vw, 50rem);
    height: 44vh;
    gap: 3rem;
  }
}

/* ==========================================================================
   Mobile — no pin, no runway. Cards stack vertically, full content shown
   on both (no dim/crossfade narrative — that only makes sense as a pinned
   sequence); el-scroll.js's mobile branch reveals each block in turn via
   a plain IntersectionObserver fade/rise, matching the simple .is-visible
   pattern used across the rest of the site.
   ========================================================================== */
@media (max-width: 48rem) {
  .el-scroll-section {
    height: auto;
    padding: clamp(4rem, 10vw, 6rem) 0;
  }

  .el-scroll-stage {
    position: static;
    height: auto;
    padding: 0 clamp(1.25rem, 5vw, 2rem);
  }

  .el-scroll-bg {
    display: none;
  }

  .el-scroll-intro {
    position: static;
    padding: 0;
    margin-bottom: clamp(2rem, 8vw, 3rem);
    opacity: 1;
    transform: none;
  }

  .el-scroll-cards {
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: auto;
    gap: 1.5rem;
  }

  .el-scroll-card {
    width: 100%;
    height: auto;
    min-height: 15.5rem;
    border-radius: var(--el-card-radius) !important;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .el-scroll-card.el-scroll-is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .el-scroll-card__inner,
  .el-scroll-card--logic .el-scroll-card__inner {
    opacity: 1;
  }

  .el-scroll-card__heading,
  .el-scroll-card__description,
  .el-scroll-card__list li {
    opacity: 1;
    transform: none;
  }

  .el-scroll-card__divider {
    opacity: 1;
    transform: scaleX(1);
  }

  .el-scroll-seam {
    display: none;
  }

  .el-scroll-message {
    position: relative;
    inset: auto;
    margin-top: 2.5rem;
    padding: 0 1rem;
  }

  .el-scroll-message__line,
  .el-scroll-message__final {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .el-scroll-message.el-scroll-is-visible .el-scroll-message__line,
  .el-scroll-message.el-scroll-is-visible .el-scroll-message__final {
    opacity: 1;
    transform: translateY(0);
  }

  .el-scroll-message.el-scroll-is-visible .el-scroll-message__final {
    transition-delay: 0.15s;
  }

  /* "How do we achieve that? / Simple. Fast. Done." — the fourth step in
     the mobile fade-up sequence (Emotion card, Logic card, message, then
     this). No pin exists on mobile, so this is the only place it
     appears; el-scroll.js's mobile IO branch reveals it the same way as
     the two cards + message above. */
  .el-scroll-next {
    position: relative;
    inset: auto;
    z-index: auto;
    margin-top: 2.5rem;
    padding: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .el-scroll-next.el-scroll-is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Reduced motion — show both cards fully and equally, no pin, no runway,
   no scrubbed movement, final message shown beneath.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .el-scroll-section {
    height: auto;
    padding: clamp(4rem, 10vw, 6rem) 0;
  }

  .el-scroll-stage {
    position: static;
    height: auto;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
  }

  .el-scroll-bg {
    opacity: 0.4;
  }

  .el-scroll-intro {
    position: static;
    padding: 0;
    margin-bottom: clamp(2rem, 6vw, 3rem);
    opacity: 1;
    transform: none;
  }

  .el-scroll-cards {
    height: auto;
    min-height: 34vh;
  }

  .el-scroll-card {
    width: 100%;
  }

  .el-scroll-card__inner,
  .el-scroll-card--logic .el-scroll-card__inner {
    opacity: 1;
  }

  .el-scroll-card__heading,
  .el-scroll-card__description,
  .el-scroll-card__list li {
    opacity: 1;
    transform: none;
  }

  .el-scroll-card__divider {
    opacity: 1;
    transform: scaleX(1);
  }

  .el-scroll-seam {
    display: none;
  }

  .el-scroll-message {
    position: relative;
    inset: auto;
    margin-top: 2.5rem;
  }

  .el-scroll-message__line,
  .el-scroll-message__final {
    opacity: 1;
    transform: none;
  }

  /* "How do we achieve that? / Simple. Fast. Done." shown statically
     beneath the message, same reasoning as .el-scroll-intro above — no
     pin exists under reduced motion, so this is the only place it
     appears here. */
  .el-scroll-next {
    position: relative;
    inset: auto;
    z-index: auto;
    margin-top: 2.5rem;
    padding: 0;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 48rem) {
  .el-scroll-cards {
    flex-direction: column;
    gap: 1.5rem;
  }

  .el-scroll-card {
    height: auto;
    min-height: 15.5rem;
    border-radius: var(--el-card-radius) !important;
  }
}
/* ==========================================================================
   EXPERIMENTAL EMOTION LOGIC SCROLL SECTION — CSS END
   ========================================================================== */