html,
body {
  background: var(--bg-primary);
}
.hero {
  position: relative;
  z-index: 10;
}
.hero,
.glass-section {
  font-family: "Satoshi", sans-serif;
}

.creative-svg {
  width: 100%;
  height: 100vh;
  display: block;
}

/* Section wrapper */
.glass-section {
  position: relative;
  /* ✨ Add this */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
}

.glass-panel {
  position: relative;
  /* Already present — good */
}

.parallax-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: clamp(2rem, 6vw, 7rem);
  color: whitesmoke;
  pointer-events: none;
  mix-blend-mode: lighten;
  will-change: transform;
}

/* ===========================
   REMOVE GLASS FROM CREATIVE SVG
   =========================== */
.glass-panel:has(.creative-svg) {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* Text rendering */
text {
  letter-spacing: -0.02em;
  dominant-baseline: middle;
}

.glass-bg {
  position: relative;
  border-radius: 20px;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.04));

  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  overflow: hidden;

  /* 🔑 REQUIRED for blend modes */
  isolation: isolate;
}

.glass-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 35%,
      rgba(255, 255, 255, 0.04) 60%,
      rgba(0, 0, 0, 0.18) 100%);

  opacity: 0.6;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--text-colors--main);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

/* ============================================================
   Flex card hover slider — content-section navigation
   Replaces the legacy .list-parent tier list. Each slide is a
   real anchor; on hover (or keyboard focus) the active slide
   expands while its neighbours contract. The destination page's
   hero photo is wired via --slide-bg on each .flex-slide in
   index.html — greyscale at rest, full colour when active.
   Titles use Satoshi; no description per spec.
   ============================================================ */

.flex-container {
  display: flex;
  gap: 10px;
  width: min(100% - 4rem, 1400px);
  height: 88vh;
  min-height: 460px;
  max-height: 720px;
  margin: 0 auto;
}

.flex-slide {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  cursor: none;
  background-color: var(--bg--cards);
  transition: flex 0.5s ease;
  will-change: flex;
}

/* Photo layer — slow Ken Burns zoom/pan. Lives on ::before so it can
   transform independently of the title and overlays. Greyscale at rest,
   full colour when the slide is active. */
.flex-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.08);
  transform-origin: center;
  animation: kenBurns 24s ease-in-out infinite alternate;
  animation-play-state: paused;
  transition: filter 0.5s ease;
  will-change: transform;
  pointer-events: none;
}

/* Dark legibility wash + film grain in one layer above the photo. */
.flex-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('/images/noise-min_1noise-min.avif') repeat 0 0 / 200px 200px,
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0.9;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Stagger the pan so neighbouring slides don't drift in lockstep. */
.flex-slide:nth-child(odd)::before {
  animation-direction: alternate-reverse;
  animation-duration: 28s;
}
.flex-slide:nth-child(3n)::before {
  animation-delay: -8s;
}
.flex-slide:nth-child(3n + 2)::before {
  animation-delay: -16s;
}

@keyframes kenBurns {
  0%   { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2.5%, -2%); }
}

/* Vertical at rest (rotated 90°), straightening to horizontal on hover —
   the signature move of this slider. Satoshi per brand. */
.flex-title {
  position: relative;
  z-index: 1;
  font-family: "Satoshi", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-colors--main);
  text-align: center;
  white-space: nowrap;
  transform: rotate(90deg);
  transition: transform 0.5s ease;
}

/* "You are here" badge on the current slide. */
.flex-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--teal);
  color: var(--bg-primary);
  font-family: "Satoshi", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Grow the hovered/focused slide; siblings shrink proportionally.
   `.is-active` is the touch driver's stand-in for :hover — set by
   /src/hero/flex-slides.js on the slide nearest the viewport centre, so a
   thumb gets the same one-slide-open reading without a hover to give. */
.flex-slide:hover,
.flex-slide:focus-visible,
.flex-slide.is-active {
  flex-grow: 3;
}

/* Photo flips to full colour and the Ken Burns pan starts only while
   the slide is active — static otherwise. */
.flex-slide:hover::before,
.flex-slide:focus-visible::before,
.flex-slide.is-active::before {
  filter: grayscale(0%) contrast(1);
  animation-play-state: running;
}

/* Title straightens to horizontal as the slide opens. */
.flex-slide:hover .flex-title,
.flex-slide:focus-visible .flex-title,
.flex-slide.is-active .flex-title {
  transform: rotate(0deg);
}

/* Lighten the wash on the active slide so the photo reads. */
.flex-slide:hover::after,
.flex-slide:focus-visible::after,
.flex-slide.is-active::after {
  opacity: 0.6;
}

.flex-slide:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* Home slide plays a one-time intro — it opens, the title straightens, then it
   settles back so visitors see the interaction is there. This used to be
   desktop-only, which meant the one audience that cannot discover the gesture
   by hovering was also the one never shown it. */
@media (prefers-reduced-motion: no-preference) {
  .flex-slide.is-current {
    animation: flexSlideIntro 3s ease 1;
  }
  .flex-slide.is-current .flex-title {
    animation: flexTitleIntro 3s ease 1;
  }
}

@keyframes flexSlideIntro {
  0%   { flex-grow: 1; }
  35%  { flex-grow: 3; }
  65%  { flex-grow: 3; }
  100% { flex-grow: 1; }
}

@keyframes flexTitleIntro {
  0%   { transform: rotate(90deg); }
  35%  { transform: rotate(0deg); }
  65%  { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

/* Stack into a column with all titles visible.
   Keyed on `hover: none` as well as width: the horizontal accordion is driven
   by hovering across it, so any pointer that cannot hover gets the column —
   a touch tablet included, where the accordion would otherwise sit there
   inert at full size. */
@media (max-width: 768px), (hover: none) {
  .flex-container {
    flex-direction: column;
    width: calc(100% - 2rem);
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 8px;
  }
  /* Sized by min-height, not height: as a column flex item the slide's main
     size comes from its basis, and a plain `height` here is simply ignored. */
  .flex-slide,
  .flex-slide:hover,
  .flex-slide:focus-visible {
    flex: 0 0 auto;
    height: auto;
    min-height: max(130px, 22vh);
  }
  /* The driver marks the container live one frame after its first pick. Before
     that the opening slide has no resolved start value to animate from, and the
     transition would sit at zero progress instead of easing. */
  .flex-container.is-live .flex-slide {
    transition:
      min-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 520ms ease;
  }
  /* Column titles read horizontally — a 90° title in a wide short row is a
     desktop constraint, not a house style. */
  .flex-title,
  .flex-slide:hover .flex-title,
  .flex-slide:focus-visible .flex-title,
  .flex-slide.is-active .flex-title {
    transform: rotate(0deg);
  }
  .flex-slide::after {
    opacity: 0.65;
  }
  /* Height, not flex-grow, is what opens a row in a column — and the photo
     still goes colour only on the open one, so "one slide is live" survives
     the change of axis. */
  .flex-slide::before {
    filter: grayscale(100%) contrast(1.05);
  }
  .flex-slide.is-active {
    min-height: max(200px, 34vh);
  }
  .flex-slide.is-active::after {
    opacity: 0.45;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference),
  (hover: none) and (prefers-reduced-motion: no-preference) {
  /* The column's counterpart to flexSlideIntro — same open-then-settle beat,
     expressed in the dimension this layout actually grows in. */
  .flex-slide.is-current {
    animation: flexSlideIntroStacked 3s ease 1;
  }
}

@keyframes flexSlideIntroStacked {
  0%   { min-height: max(130px, 22vh); }
  35%  { min-height: max(200px, 34vh); }
  65%  { min-height: max(200px, 34vh); }
  100% { min-height: max(130px, 22vh); }
}

@media (prefers-reduced-motion: reduce) {
  .flex-slide,
  .flex-slide::before,
  .flex-title {
    transition: none;
    animation: none;
  }
  .flex-slide::before {
    transform: scale(1.02);
  }
}