/* One continuous stage; timings are supplied by each data-feature-motion layer. */
html:has(.features-page) { scrollbar-color: #514264 #08070b; }
.features-page .site-footer { padding-block: 1.25rem 4.25rem; }
.feature-story-divider { display: none; }
.feature-story-description > p {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.75;
}
.feature-story-description > p:last-child { margin-bottom: 0; }
.features-intro h1 { position: relative; isolation: isolate; }
.feature-story-halo {
  position: absolute;
  z-index: -1;
  inset: -7rem 0;
  overflow: clip;
  opacity: 0.7;
  pointer-events: none;
}
.feature-story-halo::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 38% 48%, rgb(128 72 233 / 23%), transparent 55%),
    radial-gradient(ellipse at 65% 56%, rgb(94 52 196 / 18%), transparent 60%);
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  .feature-story-active {
    height: 580svh;
    view-timeline-name: --feature-story;
    view-timeline-axis: block;
  }
  .feature-story-active .feature-story-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    isolation: isolate;
    /* These layers contain text and images only. Controls remain outside. */
    pointer-events: none;
  }
  .feature-story-active .features-intro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 2rem 0 10rem;
    text-align: center;
  }
  .feature-story-active .features-intro h1 { max-width: 18ch; }
  .feature-story-active .features-intro > p:last-child { max-width: 42rem; }
  .feature-story-active .feature-story-halo::before {
    animation: feature-story-glow 9s ease-in-out infinite alternate;
  }
  .feature-story-paused .feature-story-halo::before { animation-play-state: paused; }
  .feature-story-active .feature-story-divider {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  }
  .feature-story-active .feature-section {
    position: absolute;
    inset: 0;
    gap: clamp(2rem, 4vw, 4rem);
    padding: 3rem 0;
    border: 0;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  }
  /* The panel owns the complete lifetime of its title, copy and media.
     Child fill-mode states cannot leak into a neighbouring scene. */
  .feature-story-active .feature-story-panel {
    position: absolute;
    inset: 0;
    isolation: isolate;
  }
  .feature-story-active .feature-capture {
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    margin-inline: auto;
  }
  .feature-story-active .feature-capture img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 8rem);
    object-fit: contain;
  }
  .feature-story-active .feature-capture-group:has(figure + figure) img { max-height: calc((100svh - 10rem) / 2); }
  .feature-story-active [data-feature-motion] {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .feature-story-active .features-intro,
  .feature-story-active .feature-section[data-feature-motion] { animation-name: feature-story-wipe; }
  .feature-story-active .feature-story-divider { animation-name: feature-story-line; }
  .feature-story-active .feature-story-heading,
  .feature-story-active .feature-story-description { animation-name: feature-story-reveal; }
  .feature-story-active .feature-story-media { animation-name: feature-story-image; }
  .feature-story-active .feature-story-halo { animation-name: feature-story-light-fade; }
  .feature-story-active .feature-story-panel { animation-name: feature-story-panel; }
  .feature-story-active .feature-story-panel-final { animation-name: feature-story-panel-final; }

  @supports (animation-timeline: view()) and (animation-range: contain 10% contain 20%) {
    .feature-story-native [data-feature-motion] {
      animation-play-state: running;
      animation-timeline: --feature-story;
      animation-range: contain var(--story-start) contain var(--story-end);
    }
  }
  @media (max-width: 700px) {
    .feature-story-active .features-intro { padding-bottom: 12rem; }
    .feature-story-active .feature-section {
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      gap: 1.5rem;
      padding-block: 2rem;
    }
    .feature-story-active .feature-copy { max-width: none; }
    .feature-story-active .feature-capture img { max-height: 30svh; }
    .feature-story-active .feature-capture-group:has(figure + figure) img { max-height: 14svh; }
  }
}

/* Visual reveals keep the editorial content available to assistive technology.
   Nested layers share a single viewport and never change their layout positions. */
@keyframes feature-story-wipe {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 100% 0); }
}
@keyframes feature-story-line {
  from { transform: translateY(calc(100svh - 1px)); }
  to { transform: translateY(0); }
}
@keyframes feature-story-reveal {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes feature-story-image {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
/* Entry is gated while the child reveal is still at opacity 0. The previous
   panel reaches opacity 0 / hidden before the next panel can become visible.
   The last panel stays readable until the sticky stage leaves the viewport. */
@keyframes feature-story-panel {
  0% { opacity: 0; visibility: hidden; }
  0.0001%, 70% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes feature-story-panel-final {
  0% { opacity: 0; visibility: hidden; }
  0.0001%, 100% { opacity: 1; visibility: visible; }
}
@keyframes feature-story-light-fade { from { opacity: 0.7; } to { opacity: 0; } }
@keyframes feature-story-glow {
  from { transform: translate(-3%, -2%) rotate(-8deg) scale(0.96); }
  to { transform: translate(3%, 2%) rotate(8deg) scale(1.06); }
}
@media (forced-colors: active) { .feature-story-halo { display: none; } }