/**
 * scroll-hero
 * AI-Agent Native Canvas Scroll Animation
 *
 * @author Remilya
 * @link https://remilya.dev
 * @license MIT
 */

/* ============================================================
   scroll-hero.css — Scoped styles for [data-scroll-hero] banners
   All knobs exposed as CSS custom properties.

   Stacking order (bottom → top):
     base → sticky → fallback poster → canvas → veil → content
   The poster deliberately sits *below* the canvas. It owns the first paint,
   the no-JavaScript render and the reduced-motion render, and the canvas
   fades in over it once the engine has drawn a frame. In the previous
   version the poster was the topmost layer with no `display: none`, so it
   covered both the animation and the content layer.
   ============================================================ */

.scroll-hero {
  --scroll-hero-length: 300vh;          /* how tall the sticky spacer is */
  --scroll-hero-veil: 0.6;              /* opacity of the overlay gradient */
  --scroll-hero-content-max: 640px;     /* max-width of the content layer */
  --scroll-hero-content-opacity: 1;     /* driven by the engine while scrolling */
  --scroll-hero-fade-in: 400ms;         /* canvas reveal once a frame is drawn */
  --scroll-hero-z-base: 1;
  --scroll-hero-z-sticky: 2;
  --scroll-hero-z-fallback: 3;
  --scroll-hero-z-canvas: 4;
  --scroll-hero-z-veil: 5;
  --scroll-hero-z-content: 6;
  --scroll-hero-overlay-start: #000;
  --scroll-hero-overlay-end: transparent;
  --scroll-hero-bg: #000;
  --scroll-hero-text-color: #fff;
  --scroll-hero-accent: #00bcd4;

  position: relative;
  height: var(--scroll-hero-length);
  background: var(--scroll-hero-bg);
  z-index: var(--scroll-hero-z-base);
  overflow: visible;
}

/* The part that sticks.
   NB: `position: sticky` is silently dead if any ancestor has
   `overflow: hidden | clip | auto | scroll` or a `transform`/`filter`. */
.scroll-hero__sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;   /* fallback for engines without small-viewport units */
  height: 100svh;  /* stable while mobile browsers show/hide the URL bar */
  overflow: hidden;
  z-index: var(--scroll-hero-z-sticky);
}

/* Static poster — always rendered, underneath the canvas. */
.scroll-hero__fallback {
  position: absolute;
  inset: 0;
  z-index: var(--scroll-hero-z-fallback);
  display: block;
}

.scroll-hero__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Canvas — full viewport, fitted with object-fit-cover maths.
   Hidden until the engine reports its first draw. */
.scroll-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--scroll-hero-z-canvas);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--scroll-hero-fade-in) ease-out;
}

.scroll-hero[data-scroll-hero-ready="true"] .scroll-hero__canvas {
  opacity: 1;
}

/* Veil — gradient overlay that keeps the content legible */
.scroll-hero__veil {
  position: absolute;
  inset: 0;
  z-index: var(--scroll-hero-z-veil);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--scroll-hero-overlay-start) 0%,
    var(--scroll-hero-overlay-end) 100%
  );
  opacity: var(--scroll-hero-veil);
  transition: opacity 0.3s ease;
}

/* Content layer — fades out over the first data-overlay-fade % of scroll */
.scroll-hero__content {
  position: absolute;
  inset: 0;
  z-index: var(--scroll-hero-z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  max-width: var(--scroll-hero-content-max);
  margin: 0 auto;
  color: var(--scroll-hero-text-color);
  pointer-events: auto;
  opacity: var(--scroll-hero-content-opacity);
  transition: opacity 0.1s linear;
}

.scroll-hero__content h1,
.scroll-hero__content h2,
.scroll-hero__content h3 {
  color: var(--scroll-hero-text-color);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.scroll-hero__content p {
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* ============================================================
   Static paths — poster only
   Applied by the engine (.scroll-hero--fallback) for: no canvas,
   no 2d context, fewer than two frames, reduced motion, Save-Data.
   ============================================================ */
.scroll-hero--fallback {
  height: auto;
}

.scroll-hero--fallback .scroll-hero__sticky {
  position: relative;
  height: min(88svh, 44rem);
}

.scroll-hero--fallback .scroll-hero__canvas {
  display: none;
}

.scroll-hero--fallback .scroll-hero__content {
  opacity: 1;
}

/* Reduced motion, and pages rendered without JavaScript, take the same path
   without waiting for the engine to classify them. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .scroll-hero {
    height: auto;
  }

  .scroll-hero__sticky {
    position: relative;
    height: min(88svh, 44rem);
  }

  .scroll-hero__canvas {
    display: none;
  }

  .scroll-hero__content {
    opacity: 1;
  }
}