/* =================================================================
   GUARIP — About Page Scroll-Stage
   Unified WebGL canvas + 6-layer CSS fallback.
   Lives behind all 8 sections of the about page.
   ================================================================= */

/* ── Stage wrapper: sticky inside the about wrapper. Sticks to top:0 of the
       viewport while .ab-root is in view, and scrolls away naturally when the
       user enters the footer area. Full viewport width via the bleed margin so
       the atmosphere fills the screen regardless of parent padding. ── */
.ab-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  z-index: 0;
  pointer-events: none;
  contain: layout style paint;
  overflow: hidden;
}

/* ── Canvas itself ── */
.ab-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Fallback layer 1: CSS gradient (always present, hidden when WebGL is up) ── */
.ab-stage__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 152, 96, 0.10), transparent 65%),
    linear-gradient(to bottom, var(--g-paper, #FBF6EC) 0%, var(--g-sand, #ECE3CC) 45%, var(--g-deep-warm, #3F3327) 100%);
}

/* ── Fallback layer 2: SVG noise (subtle film grain) ── */
.ab-stage__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.045;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── When WebGL succeeds, dim the CSS fallback (canvas takes over) ── */
.ab-stage[data-mode="webgl"] .ab-stage__fallback,
.ab-stage[data-mode="webgl-lite"] .ab-stage__fallback {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-stage[data-mode="webgl"] .ab-stage__noise,
.ab-stage[data-mode="webgl-lite"] .ab-stage__noise {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── When static (reduced-motion / saveData / no-WebGL): show the CSS fallback ── */
.ab-stage[data-mode="static"] .ab-stage__canvas { display: none; }
.ab-stage[data-mode="static"] .ab-stage__fallback { opacity: 1; }
.ab-stage[data-mode="static"] .ab-stage__noise { opacity: 0.045; }

/* ── Section background alpha: lets the stage atmosphere bleed through.
       Sections set their bg as rgba() with --ab-section-bg-alpha for opacity.
       Defaults: 0.92 for light tones, 0.88 for dark, 0.90 for sand.
       Reversible to 1 by overriding the variable. ── */
:root {
  --ab-section-bg-alpha-light: 0.74;
  --ab-section-bg-alpha-dark: 0.68;
  --ab-section-bg-alpha-sand: 0.76;
  --ab-section-bg-alpha-soft-dark: 0.66;
}

/* The about page wrapper holds the (now sticky) stage canvas. Position:relative
       provides the containing block for the absolute hairlines and grain layer.
       No z-index: keeping it auto lets the footer (sibling of the layout main)
       paint cleanly above the about wrapper when scrolled past. */
.ab-root {
  position: relative;
}

/* Light cream sections (default ab-section, principles, why) */
.ab-section,
.ab-cta {
  background: rgba(251, 246, 236, var(--ab-section-bg-alpha-light)) !important;
}

/* Dark sections — espresso wash */
.ab-section.ab-fullbleed--dark,
.ab-fullbleed.ab-fullbleed--dark {
  background: rgba(63, 51, 39, var(--ab-section-bg-alpha-dark)) !important;
}

/* Soft dark — vision */
.ab-section.ab-fullbleed--dark.ab-dark--soft {
  background: rgba(63, 51, 39, var(--ab-section-bg-alpha-soft-dark)) !important;
}

/* Sand tone — promises */
.ab-section.ab-tone-sand,
.ab-fullbleed.ab-tone-sand {
  background: rgba(236, 227, 204, var(--ab-section-bg-alpha-sand)) !important;
}

/* Team section often uses ivory/sand; align to sand alpha */
.ab-section.ab-team,
.ab-fullbleed.ab-team {
  background: rgba(245, 238, 224, var(--ab-section-bg-alpha-sand)) !important;
}

/* Hero stays opaque-feeling but lets atmosphere bleed at the top */
.ab-hero {
  background: rgba(44, 42, 38, var(--ab-section-bg-alpha-dark)) !important;
}

/* ── Reduced motion: nothing animated. Static gradient stays. ── */
@media (prefers-reduced-motion: reduce) {
  .ab-stage[data-mode="webgl"] .ab-stage__canvas,
  .ab-stage[data-mode="webgl-lite"] .ab-stage__canvas {
    display: none;
  }
  .ab-stage[data-mode="webgl"] .ab-stage__fallback,
  .ab-stage[data-mode="webgl-lite"] .ab-stage__fallback {
    opacity: 1;
  }
}