/* ==========================================================================
   Launch Labs — Section: "Who we work with"
   Sits directly under the hero, on the same black surface. Six industry
   cards in a coverflow carousel: name only at rest, a customer quote and
   attribution revealed on hover/focus of the active card. No real
   photography is wired in yet — each card's "image" is a graded, grained
   gradient scene standing in for a future cinematic photo, matched per
   industry via nth-child.

   Structure: .industries__pin-wrap (tall scroll spacer) -> .industries
              (sticky, pinned to exactly one viewport tall while the page
              scrolls through the spacer) -> centered intro (eyebrow,
              heading, sub) -> carousel -> prev/dots/next nav. Card
              position/scroll-jack logic lives in js/industries.js.
              Section-level reveal is scroll-triggered once via
              .is-visible (same pattern as hub/split/proof).

   Background: navy pool gradients + a restrained CSS star field, always
   present (no scroll-scrub needed here) — see the .industries rule below.
   .clouds's own closing beat (its near-black .clouds__canvas-overlay, see
   css/clouds.css + js/clouds.js) fades to a matching navy just before its
   pin releases, so scrolling from .clouds into this section reads as one
   continuous night sky, not a new background starting.
   ========================================================================== */

.industries {
  --ink: #FFFFFF;
  --ink-muted: rgba(255, 255, 255, 0.66);
  --ink-faint: rgba(255, 255, 255, 0.45);
  --hairline: rgba(255, 255, 255, 0.10);
  --contrast: #D92632;

  /* Blue/black atmosphere to match the hero: midnight-navy base + large, soft
     radial pools (no visible seams) — plus a restrained star field, ~30
     dots across two brightness tiers plus a handful of genuinely bright
     stand-out points, not one flat faint layer. Always present, not
     animated in: .clouds's own closing near-black overlay (css/clouds.css,
     js/clouds.js) already matches this exact navy by the time its pin
     releases, so scrolling from .clouds into here reads as one continuous
     background rather than a section that "has stars" vs one that
     doesn't. */
  background-color: #05070f;
  background-image:
    radial-gradient(1.1px 1.1px at 3% 8%, rgba(255, 255, 255, 0.25), transparent 100%),
    radial-gradient(1.2px 1.2px at 12% 45%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1px 1px at 28% 15%, rgba(255, 255, 255, 0.22), transparent 100%),
    radial-gradient(1.3px 1.3px at 38% 38%, rgba(255, 255, 255, 0.28), transparent 100%),
    radial-gradient(1.1px 1.1px at 50% 10%, rgba(255, 255, 255, 0.32), transparent 100%),
    radial-gradient(1.2px 1.2px at 58% 28%, rgba(255, 255, 255, 0.25), transparent 100%),
    radial-gradient(1px 1px at 68% 50%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1.3px 1.3px at 75% 20%, rgba(255, 255, 255, 0.22), transparent 100%),
    radial-gradient(1.1px 1.1px at 82% 78%, rgba(255, 255, 255, 0.28), transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 5%, rgba(255, 255, 255, 0.32), transparent 100%),
    radial-gradient(1px 1px at 95% 55%, rgba(255, 255, 255, 0.25), transparent 100%),
    radial-gradient(1.3px 1.3px at 10% 78%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1.1px 1.1px at 32% 60%, rgba(255, 255, 255, 0.22), transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 90%, rgba(255, 255, 255, 0.28), transparent 100%),
    radial-gradient(1px 1px at 85% 88%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(2.4px 2.4px at 8% 12%, rgba(255, 255, 255, 0.92), transparent 100%),
    radial-gradient(2.6px 2.6px at 34% 6%, rgba(255, 255, 255, 0.88), transparent 100%),
    radial-gradient(2.3px 2.3px at 62% 14%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(2.5px 2.5px at 78% 42%, rgba(255, 255, 255, 0.90), transparent 100%),
    radial-gradient(2.4px 2.4px at 20% 55%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(2.6px 2.6px at 88% 68%, rgba(255, 255, 255, 0.93), transparent 100%),
    radial-gradient(1.8px 1.8px at 15% 30%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.7px 1.7px at 45% 20%, rgba(255, 255, 255, 0.60), transparent 100%),
    radial-gradient(1.9px 1.9px at 55% 45%, rgba(255, 255, 255, 0.50), transparent 100%),
    radial-gradient(1.8px 1.8px at 70% 8%, rgba(255, 255, 255, 0.58), transparent 100%),
    radial-gradient(1.7px 1.7px at 5% 65%, rgba(255, 255, 255, 0.52), transparent 100%),
    radial-gradient(1.9px 1.9px at 40% 72%, rgba(255, 255, 255, 0.62), transparent 100%),
    radial-gradient(1.8px 1.8px at 92% 25%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.7px 1.7px at 25% 85%, rgba(255, 255, 255, 0.50), transparent 100%),
    radial-gradient(1.9px 1.9px at 65% 60%, rgba(255, 255, 255, 0.60), transparent 100%),
    radial-gradient(95% 90% at 12% 8%,  rgba(20, 30, 84, 0.50), transparent 60%),
    radial-gradient(90% 95% at 90% 96%, rgba(12, 20, 58, 0.50), transparent 62%),
    radial-gradient(70% 62% at 55% 45%, rgba(26, 36, 98, 0.15), transparent 72%);
  background-repeat: no-repeat;
  color: var(--ink);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 4rem);
}

/* ==========================================================================
   Intro
   ========================================================================== */
.industries__intro {
  max-width: 76rem;
  margin: 0 auto;
  text-align: center;
}

.industries__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);
}

.industries__heading {
  margin-top: 0.75rem;
  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);
  opacity: 0;
  transform: translateY(14px);
}

.industries.is-visible .industries__eyebrow,
.industries.is-visible .industries__heading {
  animation: industries-rise 0.75s var(--ease) forwards;
}

.industries.is-visible .industries__eyebrow { animation-delay: 0s; }
.industries.is-visible .industries__heading { animation-delay: 0.08s; }

/* ==========================================================================
   Pin — .industries__pin-wrap is a tall spacer (its height set by
   js/industries.js, proportional to card count); the section itself
   sticks to the top of the viewport for the length of that spacer, so the
   page's own vertical scroll drives the carousel through all six cards
   before releasing and continuing on to the next section. See
   setActiveFromScroll() in js/industries.js.
   ========================================================================== */
.industries__pin-wrap {
  position: relative;
  flex-shrink: 0;
}

.industries[data-pin-sticky] {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* ==========================================================================
   Carousel — a single horizontal row. All cards sit in one line at their
   natural width; the whole set reveals left-to-right on entrance, so most of
   it is already on screen. If the row is wider than the window, js/industries.js
   pins the section and pans the track's translateX by exactly the overflow as
   the page scrolls (scroll position is the single source of truth); if it fits,
   the row is centred with no extra scroll.
   ========================================================================== */
.industries__carousel {
  position: relative;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  display: flex;              /* single horizontal row window */
  overflow: hidden;          /* the row slides horizontally within this window */
}

.industries__track {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;        /* all cards on one line, at their natural width */
  will-change: transform;
}

.industry-card {
  position: relative;
  flex: 0 0 auto;
  /* Doubled from clamp(18.75rem, 25vw, 23.75rem) — the carousel's own
     scroll math (js/industries.js) measures rendered card width live, so
     it adapts automatically; no JS changes needed for this. */
  width: clamp(37.5rem, 50vw, 47.5rem);
  height: clamp(37.5rem, 50vw, 47.5rem);
}

.industry-card:focus-visible .industry-card__reveal {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.industry-card__reveal {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateX(-28px);
}

.industries.is-visible .industry-card__reveal {
  animation: industries-card-in 0.7s var(--ease) forwards;
}

.industries.is-visible .industry-card:nth-child(1) .industry-card__reveal { animation-delay: 0.26s; }
.industries.is-visible .industry-card:nth-child(2) .industry-card__reveal { animation-delay: 0.32s; }
.industries.is-visible .industry-card:nth-child(3) .industry-card__reveal { animation-delay: 0.38s; }
.industries.is-visible .industry-card:nth-child(4) .industry-card__reveal { animation-delay: 0.44s; }
.industries.is-visible .industry-card:nth-child(5) .industry-card__reveal { animation-delay: 0.50s; }
.industries.is-visible .industry-card:nth-child(6) .industry-card__reveal { animation-delay: 0.56s; }

@media (hover: hover) and (pointer: fine) {
  .industry-card:hover .industry-card__reveal,
  .industry-card:focus-within .industry-card__reveal {
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Visual (graded gradient stand-in for a cinematic photo) ---------- */
.industry-card__visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: scale(1.03);
  transition: transform 6s var(--ease);
}

.industry-card:hover .industry-card__visual,
.industry-card:focus-within .industry-card__visual {
  transform: scale(1.08);
}

/* Real photo, where one exists (nth-child(1)/(2)/(6) — see below): sits
   on top of that card's gradient stand-in, which stays in the CSS
   unchanged as a harmless fallback fill underneath. Inherits the zoom
   transform above for free, since it's just another child of
   .industry-card__visual. */
.industry-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-card__grain {
  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");
}

/* ---------- Scrim: always-on legibility gradient, deepens on hover ---------- */
.industry-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 40%, rgba(1, 2, 2, 0.75) 100%),
    linear-gradient(180deg, rgba(1, 2, 2, 0.14), transparent 30%);
  transition: opacity 0.25s var(--ease-ui);
}

.industry-card__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 2, 2, 0);
  transition: background-color 0.25s var(--ease-ui);
}

.industry-card:hover .industry-card__scrim::after,
.industry-card:focus-within .industry-card__scrim::after {
  background: rgba(1, 2, 2, 0.28);
}

/* ---------- Body copy ---------- */
.industry-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}

.industry-card__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.industry-card__quote {
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease-ui), transform 0.25s var(--ease-ui), max-height 0.25s var(--ease-ui);
}

.industry-card:hover .industry-card__quote,
.industry-card:focus-within .industry-card__quote {
  max-height: 10rem;
  opacity: 1;
  transform: translateY(0);
}

.industry-card__quote p {
  margin-top: 0.85rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.industry-card__attrib {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
}

/* ---------- Per-industry colour grading ---------- */
.industry-card:nth-child(1) .industry-card__visual {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(240, 185, 110, 0.20), transparent 55%),
    linear-gradient(155deg, #3d2916 0%, #1c130a 68%, #100b06 100%);
}

.industry-card:nth-child(2) .industry-card__visual {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(210, 220, 230, 0.16), transparent 55%),
    linear-gradient(155deg, #2b323a 0%, #14181c 68%, #0b0d0f 100%);
}

.industry-card:nth-child(3) .industry-card__visual {
  background:
    radial-gradient(70% 60% at 78% 18%, rgba(217, 38, 50, 0.22), transparent 60%),
    linear-gradient(155deg, #0f2e2c 0%, #0b1e1c 68%, #070f0e 100%);
}

.industry-card:nth-child(4) .industry-card__visual {
  background:
    radial-gradient(120% 90% at 85% 100%, rgba(200, 140, 80, 0.18), transparent 55%),
    linear-gradient(155deg, #4a3018 0%, #23170c 68%, #140d07 100%);
}

.industry-card:nth-child(5) .industry-card__visual {
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(230, 140, 60, 0.16), transparent 55%),
    linear-gradient(155deg, #33322f 0%, #1a1918 68%, #0e0d0c 100%);
}

.industry-card:nth-child(6) .industry-card__visual {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(140, 140, 220, 0.18), transparent 55%),
    linear-gradient(155deg, #241f38 0%, #130f20 68%, #0a0812 100%);
}

/* ==========================================================================
   Footnote — a small closing line beneath the carousel.
   ========================================================================== */
.industries__footnote {
  max-width: 38rem;
  margin: clamp(2.75rem, 4.25vw, 3.5rem) auto 0;
  text-align: center;
  font-size: 1.33rem;
  line-height: 1.5;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(12px);
}

.industries.is-visible .industries__footnote {
  animation: industries-rise 0.75s var(--ease) forwards;
  animation-delay: 0.3s;
}

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

/* Cards enter from the left, staggered along the row (see nth-child delays). */
@keyframes industries-card-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .industry-card__visual { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 34rem) {
  .industry-card { aspect-ratio: 3 / 4; }
}