/* ═══════════════════════════════════════════════════════
   ATMOSPHERE.CSS v2 — Cinematic Scroll Color System
   The canvas lerp engine IS the transition.
   CSS must get out of the way completely.
   NO gradient separators. NO visible bands. 
   ONLY transparent sections floating on a living canvas.
═══════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────
   THE ATMOSPHERIC CANVAS
   Fixed behind everything — JS lerps its color
─────────────────────────────────────────────────── */
#atm-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  will-change: background-color;
  /* No transition here — JS RAF loop handles the smoothing */
}

/* ───────────────────────────────────────────────────
   BOTANICAL HAZE LAYER
   Radial green mist in dark environmental zones
─────────────────────────────────────────────────── */
#atm-haze {
  display: none;
}
body.atm-green #atm-haze { opacity: 1; }

/* ───────────────────────────────────────────────────
   SECTION TRANSPARENCY
   All sections are completely transparent windows
   over the living canvas. No backgrounds. No edges.
   No gradient bands.
─────────────────────────────────────────────────── */
.philosophy-section,
.material-lab,
.passive-lab,
.climate-reality,
.projects-section,
.contact-section {
  background: transparent !important;
  position: relative;
}

/* Marquee — fully transparent, no borders, no backdrop */
.marquee-section {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ───────────────────────────────────────────────────
   NO PSEUDO-ELEMENT GRADIENTS ON SECTIONS
   These created the visible gray bands.
   Remove them all.
─────────────────────────────────────────────────── */
.marquee-section::before,
.marquee-section::after,
.philosophy-section::before,
.philosophy-section::after,
.material-lab::before,
.material-lab::after,
.passive-lab::before,
.passive-lab::after,
.env-chamber::before,
.env-chamber::after,
.climate-reality::before,
.climate-reality::after,
.capabilities-section::before,
.capabilities-section::after,
.projects-section::before,
.projects-section::after,
.statement-section::before,
.statement-section::after,
.contact-section::before,
.contact-section::after,
.footer::before,
.footer::after {
  display: none !important;
}

/* ───────────────────────────────────────────────────
   COMPARISON PANELS — Dark architectural research boards
   Material contrast, NOT tonal inversion
─────────────────────────────────────────────────── */

/* Left: charcoal/graphite — quiet warm dark */
.comp-side {
  background: rgba(22, 21, 19, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.comp-side.traditional {
  background: rgba(28, 26, 23, 0.95) !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
}

/* Right: slightly elevated dark + muted green environmental glow */
.comp-side.agc-side {
  background: rgba(14, 20, 13, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(100, 140, 80, 0.12) !important;
  box-shadow: inset 0 0 80px rgba(40, 70, 30, 0.10) !important;
}

/* Grid separator — barely visible architectural line */
.comparison-grid {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

.research-innovation-block {
  background: rgba(13, 13, 11, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ───────────────────────────────────────────────────
   FOOTER — solid dark anchor, sits above canvas
─────────────────────────────────────────────────── */
.footer {
  background: var(--bg-darker) !important;
  position: relative;
  z-index: 1;
}

/* ───────────────────────────────────────────────────
   STATEMENT SECTION — retains its own dark bg
   It has a full-bleed image overlay so it's self-contained
─────────────────────────────────────────────────── */
.statement-section {
  /* Has its own parallax image — keep isolated */
  isolation: isolate;
}

/* ───────────────────────────────────────────────────
   ENV CHAMBER — retains its own dark bg + image
─────────────────────────────────────────────────── */
.env-chamber {
  isolation: isolate;
}

/* ───────────────────────────────────────────────────
   TYPOGRAPHY — ALWAYS CORRECT COLOR ON ANY BACKGROUND
   Set explicitly so text never gets lost during transitions
─────────────────────────────────────────────────── */

/* Light sections (philosophy, materials, projects, contact, climate) */
.philosophy-section .philosophy-title,
.philosophy-section .philosophy-body,
.philosophy-section .philosophy-quote,
.philosophy-section .philosophy-text-col,
.philosophy-section .eyebrow,
.material-lab .material-content h2,
.material-lab .feature-text h4,
.material-lab .feature-text p,
.material-lab .eyebrow,
.projects-section .project-name,
.projects-section .project-type,
.projects-section .projects-title,
.projects-section .eyebrow,
.contact-section .contact-title,
.contact-section .contact-value,
.contact-section .eyebrow,
.comp-side.traditional h3,
.comp-side.traditional .comp-item {
  color: var(--text-primary);
}

.philosophy-section .philosophy-body,
.philosophy-section .stat-label {
  color: var(--text-secondary);
}
.philosophy-section .eyebrow,
.material-lab .eyebrow,
.projects-section .eyebrow,
.contact-section .eyebrow {
  color: var(--text-muted);
}

/* Dark sections (laboratory, environmental) */
.passive-lab,
.passive-lab .eyebrow,
.passive-lab .passive-headline,
.passive-lab .passive-lead,
.principle-body h4,
.principle-body p {
  color: var(--text-light);
}
.passive-lab .eyebrow { color: var(--accent-light); }

/* ───────────────────────────────────────────────────
   PHILOSOPHY SECTION PADDING
─────────────────────────────────────────────────── */
.philosophy-section {
  padding-bottom: clamp(100px, 14vw, 200px);
}

/* ───────────────────────────────────────────────────
   MARQUEE — adapts text color based on canvas
   Uses body class set by atmosphere engine
─────────────────────────────────────────────────── */
.marquee-content {
  transition: color 0.8s ease;
  color: var(--text-secondary);
}
body.atm-green .marquee-content,
.marquee-content { /* canvas handles the mood — keep neutral */ }

/* ───────────────────────────────────────────────────
   CLIMATE REALITY — dark section, all text light
─────────────────────────────────────────────────── */
.climate-reality { color: var(--text-light); }
.climate-reality .comp-label                  { color: rgba(247,245,240,0.35); }
.climate-reality .comp-side.traditional h3    { color: var(--text-light); }
.climate-reality .comp-side.traditional .comp-item { color: rgba(247,245,240,0.6); }
.climate-reality .comp-side.traditional .comp-item svg { opacity: 0.35; }
.climate-reality .comp-side.agc-side .comp-label { color: var(--accent-light); }
.climate-reality .comp-side.agc-side h3       { color: var(--text-light); }
.climate-reality .comp-side.agc-side .comp-item { color: rgba(157,188,140,0.85); }
.climate-reality .comp-side.agc-side .comp-item svg { opacity: 0.7; color: var(--accent-light); }

/* ───────────────────────────────────────────────────
   PROJECTS — all text dark for editorial clarity
─────────────────────────────────────────────────── */
.projects-section .project-index  { color: var(--text-muted); }
.projects-section .project-type   { color: var(--text-muted); }
.projects-section .view-all-link  { color: var(--text-secondary); }
.projects-section .project-caption { border-top-color: var(--border); }

/* Innovation block always dark-on-dark */
.research-innovation-block .innovation-item span { color: rgba(247,245,240,0.3); }
.research-innovation-block .innovation-item h4   { color: var(--bg-cream); }
.research-innovation-block .innovation-content p  { color: rgba(247,245,240,0.7); }

/* ───────────────────────────────────────────────────
   CONTACT — refined text on warm canvas
─────────────────────────────────────────────────── */
.contact-section .contact-label  { color: var(--text-muted); }
.contact-section .contact-value  { color: var(--text-primary); }
.contact-section .contact-value:hover { color: var(--accent); }

/* ───────────────────────────────────────────────────
   CAPABILITIES / SHOWCASE — dark section text always light
─────────────────────────────────────────────────── */
.capabilities-section .capabilities-title,
.capabilities-section .service-name,
.capabilities-section .service-num,
.capabilities-section .action-text,
.capabilities-section .eyebrow {
  color: var(--text-light);
}
.capabilities-section .service-desc  { color: var(--text-secondary); }
.capabilities-section .service-arrow { color: rgba(247,245,240,0.3); }

/* ───────────────────────────────────────────────────
   STATEMENT SECTION — always dark full-bleed
─────────────────────────────────────────────────── */
.statement-section .statement-title { color: var(--text-light); }
.statement-section .statement-caption { color: rgba(247,245,240,0.3); }

/* ───────────────────────────────────────────────────
   PHILOSOPHY IMAGE WIPE REVEAL
   The wipe overlay uses the canvas-aware approach:
   no hardcoded bg-warm, just transparent
─────────────────────────────────────────────────── */
.philosophy-img-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(238, 235, 228, 0.95);
  z-index: 1;
  transform-origin: top;
  transition: transform 1.4s var(--ease-expo);
}
.philosophy-image-col.is-visible .philosophy-img-frame::before {
  transform: scaleY(0);
}

/* ───────────────────────────────────────────────────
   MATERIAL LAB IMAGE PLACEHOLDER
─────────────────────────────────────────────────── */
.material-visual {
  background: rgba(0,0,0,0.06) !important;
}

/* ───────────────────────────────────────────────────
   HERO — always isolated from canvas (has its own bg)
─────────────────────────────────────────────────── */
.hero {
  isolation: isolate;
  /* Hero retains its own full-bleed image overlay */
}