/* ============================================================
   Floating Panels: Birch Carbon Program redesign 2026-04-28
   Layered atmospheric backdrop + .fp-panel base + section overrides.
   Loads AFTER style.css so it overrides where needed.
   ============================================================ */

/* Body becomes the deep atmospheric "space" */
body {
  background: var(--fp-bg-base);
}

/* Main holds the panel stack. Perspective on main enables the subtle
   rotateX tilt applied to each panel as it traverses the viewport. */
main {
  position: relative;
  z-index: 50;
  display: block;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* ── Atmospheric backdrop ──────────────────────────────────────────── */

.fp-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--fp-bg-base);
}
.fp-atmosphere::before,
.fp-atmosphere::after,
.fp-atmosphere .gA,
.fp-atmosphere .gB {
  content: "";
  position: absolute;
  inset: -10%;
  filter: blur(40px) saturate(120%);
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  will-change: background-position, transform;
}
.fp-atmosphere::before {
  background-image: radial-gradient(45vw 45vw at 15% 20%, var(--fp-bg-glow-1) 0%, transparent 60%);
  animation: fpAtmDrift1 52s ease-in-out infinite alternate;
}
.fp-atmosphere::after {
  background-image: radial-gradient(50vw 50vw at 85% 30%, var(--fp-bg-glow-4) 0%, transparent 60%);
  animation: fpAtmDrift2 60s ease-in-out infinite alternate;
}
.fp-atmosphere .gA {
  background-image: radial-gradient(48vw 48vw at 25% 80%, var(--fp-bg-glow-3) 0%, transparent 60%);
  animation: fpAtmDrift3 46s ease-in-out infinite alternate;
}
.fp-atmosphere .gB {
  background-image: radial-gradient(52vw 52vw at 80% 75%, var(--fp-bg-glow-2) 0%, transparent 60%);
  animation: fpAtmDrift4 58s ease-in-out infinite alternate;
}
@keyframes fpAtmDrift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(8vw,4vh,0); } }
@keyframes fpAtmDrift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-6vw,6vh,0); } }
@keyframes fpAtmDrift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(5vw,-5vh,0); } }
@keyframes fpAtmDrift4 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7vw,-3vh,0); } }

/* Subtle film-grain noise overlay: kills banding in the gradient mesh */
.fp-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Slow background star field: distinct from hero fireflies, covers whole page */
.fp-stars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ── Panel base ────────────────────────────────────────────────────── */

.fp-panel {
  position: relative;
  z-index: 50;
  width: min(100% - (var(--fp-gutter) * 2), var(--fp-max));
  margin: 0 auto var(--fp-gap);
  padding: var(--fp-pad-y) var(--fp-pad-x);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow-1);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform, opacity;
}
.fp-panel:first-of-type { margin-top: var(--fp-gutter); }
.fp-panel:last-of-type  { margin-bottom: var(--fp-gutter); }

/* Modifiers */
.fp-panel--lg     { border-radius: var(--fp-radius-lg); }
.fp-panel--xl     { border-radius: var(--fp-radius-xl); }
.fp-panel--heavy  { box-shadow: var(--fp-shadow-2); }
.fp-panel--soft   { box-shadow: var(--fp-shadow-soft); }
.fp-panel--edge-light { border: var(--fp-edge-light); }
.fp-panel--edge-dark  { border: var(--fp-edge-dark); }
.fp-panel--narrow {
  width: min(100% - (var(--fp-gutter) * 2), var(--fp-max-narrow));
}
.fp-panel--full   {
  width: calc(100% - var(--fp-gutter) * 2);
  max-width: none;
}

/* ── Per-section panel surfaces ────────────────────────────────────── */

/* Hero panel: keeps its own dark navy + Three.js scene */
.hero.fp-panel {
  background: radial-gradient(ellipse at 50% 110%, var(--navy-light) 0%, var(--navy-deep) 70%);
  padding: 0;  /* hero owns its own internal padding via .container */
  min-height: calc(100vh - var(--fp-gutter) * 2);
  color: var(--birch-white);
}
.hero.fp-panel .container {
  padding-top: calc(var(--nav-height) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(60px, 8vw, 100px);
}
.hero.fp-panel #hero-canvas {
  border-radius: inherit;
}
.hero.fp-panel .scroll-prompt { bottom: clamp(20px, 3vw, 36px); }

/* Land acknowledgement: paper, narrow, soft shadow */
.land-ack.fp-panel {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(123,199,77,0.10) 0%, transparent 55%),
    var(--paper);
  color: var(--ink);
  padding: clamp(36px, 5vw, 64px) var(--fp-pad-x);
  text-align: left;
}
.land-ack.fp-panel p { font-size: 14.5px; line-height: 1.65; max-width: 76ch; margin: 0 auto; color: var(--ink-soft); }
.land-ack.fp-panel p strong { color: var(--blue-globe); font-weight: 600; }

/* Why this matters: white-ivory + soft blue corner glow */
section.section.fp-panel#about {
  background:
    radial-gradient(40vw 40vw at 0% 0%, rgba(79,175,217,0.10) 0%, transparent 55%),
    var(--birch-white);
  color: var(--ink);
}

/* Story panels (Forest/Land/Water): keep gradients, particles bound to panel */
.story-section.fp-panel {
  min-height: auto;
  padding: var(--fp-pad-y) var(--fp-pad-x);
}
.story-section.fp-panel.forest {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(123,199,77,0.20) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--forest-deep) 100%);
}
.story-section.fp-panel.land {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(201,163,86,0.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--blue-deep) 100%);
}
.story-section.fp-panel.water {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(79,175,217,0.26) 0%, transparent 55%),
    linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-globe) 100%);
}
.story-section.fp-panel .story-particles {
  border-radius: inherit;
}

/* Mike Birch quote: paper, narrow, soft */
.quote.fp-panel {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(201,163,86,0.10) 0%, transparent 60%),
    var(--paper);
  color: var(--ink);
  padding: clamp(72px, 10vw, 128px) clamp(40px, 6vw, 96px);
  text-align: left;
}
.quote.fp-panel .quote-mark {
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
  font-family: "Fraunces", serif;
  font-size: clamp(72px, 10vw, 128px);
  line-height: 1;
  font-style: normal;
}
.quote.fp-panel blockquote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 28px 0;
  max-width: 24ch;
}
.quote.fp-panel cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-globe);
}

/* Stewardship divider: narrow showcase panel with vignette */
.divider.fp-panel {
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(79,175,217,0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding: clamp(40px, 5vw, 64px) var(--fp-pad-x);
  display: flex;
  justify-content: center;
  align-items: center;
}
.divider.fp-panel svg {
  width: clamp(220px, 36vw, 360px);
  height: auto;
  opacity: 0.85;
}

/* Kinetic ribbon: gold gradient, end masking, marquee inside */
.ribbon.fp-panel {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  padding: clamp(40px, 5vw, 60px) 0;
  border-top: none;
  border-bottom: none;
  position: relative;
}
.ribbon.fp-panel .ribbon-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  padding: 0 80px;
}
.ribbon.fp-panel .ribbon-track span { color: var(--ink); }
.ribbon.fp-panel .ribbon-track span::after { color: rgba(5,20,40,0.6); }

/* Process: white-ivory */
section.section.fp-panel#process {
  background: var(--birch-white);
  color: var(--ink);
}

/* Numbers: navy + indoor night sky glow */
section.section.fp-panel#numbers {
  background:
    radial-gradient(40% 30% at 80% 10%, rgba(79,175,217,0.06) 0%, transparent 60%),
    radial-gradient(35% 30% at 15% 85%, rgba(201,163,86,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--birch-white);
}

/* For First Nations: navy + top edge glow */
section.section.fp-panel#nations {
  background:
    radial-gradient(50% 30% at 50% 0%, rgba(147,210,236,0.10) 0%, transparent 60%),
    var(--navy);
  color: var(--birch-white);
}
section.section.fp-panel#nations h2 { color: var(--birch-white); }
section.section.fp-panel#nations .lede { color: rgba(244,249,252,0.78); }
section.section.fp-panel#nations .eyebrow { color: var(--gold-light); }
section.section.fp-panel#nations .pillar {
  background: rgba(244,249,252,0.04);
  border-color: rgba(79,175,217,0.18);
}
section.section.fp-panel#nations .pillar h3 { color: var(--birch-white); }
section.section.fp-panel#nations .pillar p { color: rgba(244,249,252,0.72); }

/* Community gains: paper */
section.section.fp-panel#community {
  background:
    radial-gradient(40vw 30vw at 100% 100%, rgba(123,199,77,0.08) 0%, transparent 55%),
    var(--paper);
  color: var(--ink);
}

/* Investors: white-ivory + gold inset */
section.section.fp-panel#investors {
  background: var(--birch-white);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(232, 201, 124, 0.45),
    var(--fp-shadow-1);
}
section.section.fp-panel#investors h2,
section.section.fp-panel#investors h3 { color: var(--ink); }
section.section.fp-panel#investors .pillar p { color: var(--ink-soft); }

/* Pipeline: deep forest + leaf glow */
section.section.fp-panel#pipeline {
  background:
    radial-gradient(40% 30% at 30% 0%, rgba(123,199,77,0.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 100%);
  color: var(--birch-white);
}
section.section.fp-panel#pipeline h2,
section.section.fp-panel#pipeline h3 { color: var(--birch-white); }
section.section.fp-panel#pipeline .eyebrow { color: var(--gold-light); }
section.section.fp-panel#pipeline .lede { color: rgba(244,249,252,0.82); }
section.section.fp-panel#pipeline .stat-cell {
  background: rgba(244,249,252,0.06);
  border-color: rgba(123,199,77,0.28);
}
section.section.fp-panel#pipeline .stat-cell .big { color: var(--gold-light); }
section.section.fp-panel#pipeline .stat-cell .label { color: rgba(244,249,252,0.78); }

/* Media: white-ivory */
section.section.fp-panel#media {
  background: var(--birch-white);
  color: var(--ink);
}

/* Gold CTA: gold gradient, climactic. Larger gap above and below. */
section.cta-banner.fp-panel#contact {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  margin-top: calc(var(--fp-gap) * 1.4);
  margin-bottom: calc(var(--fp-gap) * 1.4);
}

/* Footer: navy heavy */
footer.fp-panel {
  background: var(--navy-deep);
  color: rgba(244,249,252,0.7);
}

/* ── Decorative interior fades replace hard horizontal rules ────────── */
.fp-panel hr,
.fp-panel .divider-line {
  border: 0;
  height: 32px;
  margin: 24px auto;
  background: radial-gradient(50% 100% at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 70%);
}

/* ── Mobile breakpoints: tighter radius & gutter ──────────────────── */
@media (max-width: 720px) {
  :root {
    --fp-radius-md: 24px;
    --fp-radius-lg: 28px;
    --fp-radius-xl: 32px;
    --fp-gutter: 12px;
    --fp-pad-y: clamp(40px, 7vw, 72px);
    --fp-pad-x: clamp(20px, 5vw, 36px);
    --fp-gap: clamp(20px, 4vw, 40px);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fp-atmosphere::before,
  .fp-atmosphere::after,
  .fp-atmosphere .gA,
  .fp-atmosphere .gB { animation: none; }
}