/* ==========================================================================
   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).
   ========================================================================== */

.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;

  background: #010202;
  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__sub {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(14px);
}

.industries.is-visible .industries__eyebrow,
.industries.is-visible .industries__heading,
.industries.is-visible .industries__sub {
  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; }
.industries.is-visible .industries__sub     { animation-delay: 0.18s; }

/* ==========================================================================
   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 coverflow: the active card sits large and centred, its
   neighbours peek in half-scale on either side so the full set of six is
   always legible as a count, not just a slideshow. Position/scale/opacity/
   z-index per card are set as inline styles by js/industries.js on every
   scroll/resize (based on distance from the active index); CSS only owns
   the transition curve. The dots, arrow buttons, keyboard and clicking a
   peeking card all smooth-scroll the page to that card's position — the
   scroll position is the single source of truth for which card is active.
   ========================================================================== */
.industries__carousel {
  position: relative;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  height: clamp(26rem, 60vh, 38rem);
  overflow: hidden;
}

.industries__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.industry-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(21rem, 48vh, 30rem);
  aspect-ratio: 4 / 5;
  will-change: transform, opacity;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}

.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: translateY(18px);
}

.industries.is-visible .industry-card__reveal {
  animation: industries-rise 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[data-active]:hover .industry-card__reveal,
  .industry-card[data-active]: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[data-active]:hover .industry-card__visual,
.industry-card[data-active]:focus-within .industry-card__visual {
  transform: scale(1.08);
}

.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[data-active]:hover .industry-card__scrim::after,
.industry-card[data-active]: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[data-active]:hover .industry-card__quote,
.industry-card[data-active]: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, quieter than
   .industries__sub above the cards.
   ========================================================================== */
.industries__footnote {
  max-width: 38rem;
  margin: clamp(2.75rem, 4.25vw, 3.5rem) auto 0;
  text-align: center;
  font-size: 1.0625rem;
  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); }
}

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

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