/* =============================================================================
   MOMENTUM DLE — ATMOSPHERE LAYER
   
   Atmosphere is not a color swap. It is a systemic tonal shift affecting:
   — motion energy (speed, distance, rhythm)
   — visual density (spacing, information weight)
   — typography energy (weight, tracking, scale behavior)
   — contrast behavior (text brightness, border visibility)
   — CTA intensity (glow, pulse, prominence)
   — transition rhythm (how the page breathes)
   
   Implementation: CSS variable overrides on html[data-atmosphere].
   All existing CSS uses these variables, so every component adapts
   automatically. Atmosphere-specific additions layer on top.
   
   Atmospheres:
   — calm       Evergreen. The base state. Unhurried. Premium stillness.
   — elevated   Waves. Heightened energy. Signal intensified.
   — focused    Reset. Surgical clarity. No excess.
   — discovery  Sourcing. Open. Curious. Expansive.
   — broad      Ecosystem. Wide. Cinematic. Ambient.
   — warm       Loyalty. Intimate. Earned. Personal.
   ============================================================================= */


/* ── Atmosphere-level motion variables (extend :root) ───────────────────────── */
/* These are atmosphere-controlled and don't exist in dle-core.css :root.       */
/* Blocks and components reference them for animation-duration and delay.        */

:root {
  --atm-reveal-distance: 24px;      /* How far scroll-reveal elements travel    */
  --atm-reveal-duration: 0.9s;      /* How long scroll-reveal takes             */
  --atm-reveal-stagger:  0.07s;     /* Stagger between sibling reveal elements  */
  --atm-transition:      0.25s;     /* Base interactive transition speed         */
  --atm-glow-opacity:    0.12;      /* Gold glow intensity                       */
  --atm-border-energy:   1;         /* Border visibility multiplier (conceptual) */
  --atm-section-scale:   1;         /* Section padding scale                     */
  --atm-marquee-speed:   28s;       /* Ecosystem atmosphere marquee duration     */
  --atm-pan-duration:    18s;       /* Hero background slow pan duration         */
  --atm-cta-glow:        0;         /* CTA button glow opacity                   */
  --atm-heading-tracking: -0.03em;  /* Display heading letter-spacing            */
  --atm-body-opacity:    1;         /* Body text base opacity modifier           */
}


/* =============================================================================
   CALM — Evergreen
   The default. Premium stillness. Unhurried confidence.
   Nothing to prove. Everything in order.
   ============================================================================= */

html[data-atmosphere="calm"] {
  /* This is the base state. Variables are already set in :root.
     Declared explicitly as a reset point so other atmospheres can
     inherit from calm by partial override. */

  --atm-reveal-distance: 24px;
  --atm-reveal-duration: 0.9s;
  --atm-reveal-stagger:  0.07s;
  --atm-transition:      0.25s;
  --atm-glow-opacity:    0.12;
  --atm-marquee-speed:   28s;
  --atm-pan-duration:    18s;
  --atm-cta-glow:        0;
  --atm-heading-tracking:-0.03em;

  /* Text — standard calibration */
  --text-bright: rgba(255,255,255,0.97);
  --text-base:   rgba(255,255,255,0.88);
  --text-soft:   rgba(255,255,255,0.72);
  --text-dim:    rgba(255,255,255,0.55);

  /* Borders — subtle */
  --border-dim:  rgba(255,255,255,0.04);
  --border-soft: rgba(255,255,255,0.08);
  --border-mid:  rgba(255,255,255,0.12);
  --border-vis:  rgba(255,255,255,0.18);

  /* Gold — warm, not aggressive */
  --gold:        #c8a96e;
  --gold-dim:    #9a7d4a;
  --gold-glow:   rgba(200,169,110,0.12);
  --gold-glow-s: rgba(200,169,110,0.06);
}


/* =============================================================================
   ELEVATED — Waves
   Signal intensified. The ecosystem is active. Something is happening.
   Energy is present but still premium — not loud, not desperate.
   Higher contrast. Faster rhythm. Gold burns brighter.
   ============================================================================= */

html[data-atmosphere="elevated"] {

  /* Motion — noticeably faster, shorter travel */
  --atm-reveal-distance: 16px;
  --atm-reveal-duration: 0.65s;
  --atm-reveal-stagger:  0.05s;
  --atm-transition:      0.18s;
  --atm-marquee-speed:   18s;
  --atm-pan-duration:    12s;

  /* CTA pulse — elevated CTAs glow */
  --atm-cta-glow:        0.35;

  /* Typography — tighter, more charged */
  --atm-heading-tracking: -0.035em;

  /* Text — brighter, higher contrast */
  --text-bright: rgba(255,255,255,1.0);
  --text-base:   rgba(255,255,255,0.93);
  --text-soft:   rgba(255,255,255,0.80);
  --text-dim:    rgba(255,255,255,0.62);

  /* Borders — more visible, sharper presence */
  --border-dim:  rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.11);
  --border-mid:  rgba(255,255,255,0.17);
  --border-vis:  rgba(255,255,255,0.26);

  /* Gold — intensified, more saturated */
  --gold:        #d4b070;
  --gold-dim:    #b08040;
  --gold-glow:   rgba(212,176,112,0.18);
  --gold-glow-s: rgba(212,176,112,0.10);
}

/* Elevated: CTA button pulse animation */
html[data-atmosphere="elevated"] .btn-primary {
  box-shadow: 0 0 0 0 rgba(200,169,110,0);
  animation: ctaPulse 2.8s var(--ease-out) infinite;
}

@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
  60%  { box-shadow: 0 0 20px 8px rgba(200,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,169,110,0); }
}

/* Elevated: hero glow intensifies */
html[data-atmosphere="elevated"] .hero__bg-glow {
  background: radial-gradient(ellipse at center, rgba(200,169,110,0.10) 0%, transparent 65%);
  width: 80vw;
  height: 65vh;
}

/* Elevated: card borders shimmer on hover */
html[data-atmosphere="elevated"] .what-is__pillar:hover,
html[data-atmosphere="elevated"] .ownership__step:hover,
html[data-atmosphere="elevated"] .trending__card:hover {
  border-color: var(--gold-dim);
}

/* Elevated: marquee moves faster — override animation-duration on the element */
html[data-atmosphere="elevated"] .ecosystem-atm__marquee-wrap {
  animation-duration: var(--atm-marquee-speed);
}

/* Elevated: section dividers more visible */
html[data-atmosphere="elevated"] .dle-divider {
  background: rgba(255,255,255,0.07);
}


/* =============================================================================
   FOCUSED — Reset
   Surgical clarity. Inventory is rotating. Decisions are clean.
   No excess. No atmosphere theater. Direct, precise, actionable.
   Cold light. Sharp edges. Fast resolution.
   ============================================================================= */

html[data-atmosphere="focused"] {

  /* Motion — minimal, fast, precise */
  --atm-reveal-distance: 10px;
  --atm-reveal-duration: 0.5s;
  --atm-reveal-stagger:  0.04s;
  --atm-transition:      0.15s;
  --atm-marquee-speed:   22s;
  --atm-pan-duration:    24s;
  --atm-cta-glow:        0;

  /* Typography — expanded tracking, clinical */
  --atm-heading-tracking: -0.025em;

  /* Text — slightly cooler, clinical brightness */
  --text-bright: rgba(230,240,255,0.98);
  --text-base:   rgba(210,225,245,0.88);
  --text-soft:   rgba(190,210,235,0.70);
  --text-dim:    rgba(170,195,225,0.52);

  /* Borders — sharper, more defined */
  --border-dim:  rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.10);
  --border-mid:  rgba(255,255,255,0.16);
  --border-vis:  rgba(255,255,255,0.22);

  /* Gold — cooler, less warm */
  --gold:        #b8a070;
  --gold-dim:    #8a7050;
  --gold-glow:   rgba(184,160,112,0.08);
  --gold-glow-s: rgba(184,160,112,0.04);
}

/* Focused: no hero background pan — static, decisive */
html[data-atmosphere="focused"] .hero__bg-img {
  animation: none;
  transform: scale(1.02);
}

/* Focused: hero gradient is colder, sharper */
html[data-atmosphere="focused"] .hero__bg-gradient {
  background:
    linear-gradient(to right, var(--void) 40%, transparent 80%),
    linear-gradient(to top, var(--void) 20%, transparent 55%);
}

/* Focused: section padding tightens slightly */
html[data-atmosphere="focused"] .dle-section {
  padding: calc(var(--space-2xl) * 0.85) 0;
}

/* Focused: cards have sharper, more defined borders */
html[data-atmosphere="focused"] .what-is__pillar,
html[data-atmosphere="focused"] .ownership__step,
html[data-atmosphere="focused"] .trending__card,
html[data-atmosphere="focused"] .proof__tile,
html[data-atmosphere="focused"] .warranty__stat {
  border-radius: var(--radius-sm);
}

/* Focused: no ambient glow effects */
html[data-atmosphere="focused"] .hero__bg-glow,
html[data-atmosphere="focused"] .enter-momentum::before {
  display: none;
}


/* =============================================================================
   DISCOVERY — Sourcing
   Open. Curious. Expansive. The sourcing journey is exploratory.
   Warmer, more inviting. Letter-spacing opens up. Breathing room increases.
   Gold takes on a warmer, discovery-light quality.
   ============================================================================= */

html[data-atmosphere="discovery"] {

  /* Motion — flowing, exploratory, unhurried */
  --atm-reveal-distance: 30px;
  --atm-reveal-duration: 1.0s;
  --atm-reveal-stagger:  0.09s;
  --atm-transition:      0.3s;
  --atm-marquee-speed:   34s;
  --atm-pan-duration:    22s;
  --atm-cta-glow:        0.08;

  /* Typography — slightly open, exploratory */
  --atm-heading-tracking: -0.022em;

  /* Text — warm, inviting */
  --text-bright: rgba(255,252,245,0.97);
  --text-base:   rgba(245,240,230,0.88);
  --text-soft:   rgba(235,228,215,0.72);
  --text-dim:    rgba(220,212,198,0.55);

  /* Borders — soft, inviting */
  --border-dim:  rgba(255,255,255,0.05);
  --border-soft: rgba(255,255,255,0.09);
  --border-mid:  rgba(255,255,255,0.13);
  --border-vis:  rgba(255,255,255,0.19);

  /* Gold — warmer, amber-leaning discovery light */
  --gold:        #d4a85a;
  --gold-dim:    #a07838;
  --gold-glow:   rgba(212,168,90,0.14);
  --gold-glow-s: rgba(212,168,90,0.07);
}

/* Discovery: hero glow warmer, more expansive */
html[data-atmosphere="discovery"] .hero__bg-glow {
  background: radial-gradient(ellipse at center, rgba(212,168,90,0.09) 0%, transparent 72%);
  width: 90vw;
  height: 70vh;
  bottom: -15%;
  left: 10%;
}

/* Discovery: section spacing opens up */
html[data-atmosphere="discovery"] .dle-section {
  padding: calc(var(--space-2xl) * 1.15) 0;
}

/* Discovery: cards breathe more */
html[data-atmosphere="discovery"] .what-is__pillar,
html[data-atmosphere="discovery"] .ownership__step {
  padding: 1.25rem 1.5rem;
}


/* =============================================================================
   BROAD — Ecosystem
   Wide. Cinematic. Ambient. Everything is connected.
   Generous space. Slow, contemplative motion. The full picture.
   Typography operates at a wider, more architectural scale.
   ============================================================================= */

html[data-atmosphere="broad"] {

  /* Motion — slow, cinematic, deliberate */
  --atm-reveal-distance: 36px;
  --atm-reveal-duration: 1.2s;
  --atm-reveal-stagger:  0.11s;
  --atm-transition:      0.35s;
  --atm-marquee-speed:   40s;
  --atm-pan-duration:    26s;
  --atm-cta-glow:        0.06;

  /* Typography — wide, architectural */
  --atm-heading-tracking: -0.028em;

  /* Text — ambient, diffuse */
  --text-bright: rgba(255,255,255,0.95);
  --text-base:   rgba(255,255,255,0.84);
  --text-soft:   rgba(255,255,255,0.68);
  --text-dim:    rgba(255,255,255,0.50);
  --text-muted:  rgba(255,255,255,0.34);

  /* Borders — barely-there, ambient */
  --border-dim:  rgba(255,255,255,0.03);
  --border-soft: rgba(255,255,255,0.06);
  --border-mid:  rgba(255,255,255,0.10);
  --border-vis:  rgba(255,255,255,0.15);

  /* Gold — ambient, diffuse, less saturated */
  --gold:        #c0a060;
  --gold-dim:    #907040;
  --gold-glow:   rgba(192,160,96,0.10);
  --gold-glow-s: rgba(192,160,96,0.05);
}

/* Broad: generous section spacing */
html[data-atmosphere="broad"] .dle-section {
  padding: calc(var(--space-2xl) * 1.3) 0;
}

html[data-atmosphere="broad"] .dle-section--lg {
  padding: calc(var(--space-3xl) * 1.15) 0;
}

/* Broad: hero background pan is very slow, cinematic */
html[data-atmosphere="broad"] .hero__bg-img {
  animation-duration: var(--atm-pan-duration);
}

/* Broad: content max-width expands slightly */
html[data-atmosphere="broad"] .dle-wrap {
  max-width: 1280px;
}

/* Broad: hero glow is wide and ambient */
html[data-atmosphere="broad"] .hero__bg-glow {
  background: radial-gradient(ellipse at center, rgba(192,160,96,0.07) 0%, transparent 80%);
  width: 100vw;
  height: 80vh;
  bottom: -20%;
  left: 0;
}

/* Broad: marquee moves slowly */
html[data-atmosphere="broad"] .ecosystem-atm__marquee-wrap {
  animation-duration: var(--atm-marquee-speed);
}


/* =============================================================================
   WARM — Loyalty
   Intimate. Earned. Personal. The relationship is real.
   Warmer palette. Tighter, more personal spacing. 
   Gold becomes recognition — not accent but acknowledgment.
   Motion is smooth, unhurried, gentle.
   ============================================================================= */

html[data-atmosphere="warm"] {

  /* Motion — gentle, smooth, personal */
  --atm-reveal-distance: 18px;
  --atm-reveal-duration: 0.85s;
  --atm-reveal-stagger:  0.08s;
  --atm-transition:      0.28s;
  --atm-marquee-speed:   32s;
  --atm-pan-duration:    20s;
  --atm-cta-glow:        0.12;

  /* Typography — personal, warm weight */
  --atm-heading-tracking: -0.028em;

  /* Text — warm white, intimate */
  --text-bright: rgba(255,250,240,0.97);
  --text-base:   rgba(248,242,230,0.88);
  --text-soft:   rgba(238,228,210,0.72);
  --text-dim:    rgba(225,212,190,0.55);

  /* Borders — warm-tinted, soft */
  --border-dim:  rgba(200,169,110,0.06);
  --border-soft: rgba(200,169,110,0.10);
  --border-mid:  rgba(200,169,110,0.15);
  --border-vis:  rgba(200,169,110,0.22);

  /* Gold — recognition gold, warm amber */
  --gold:        #d4a860;
  --gold-dim:    #a87840;
  --gold-glow:   rgba(212,168,96,0.16);
  --gold-glow-s: rgba(212,168,96,0.09);
}

/* Warm: hero glow is intimate, centered */
html[data-atmosphere="warm"] .hero__bg-glow {
  background: radial-gradient(ellipse at center, rgba(212,168,96,0.11) 0%, transparent 60%);
  width: 60vw;
  height: 55vh;
  bottom: -5%;
  left: 20%;
}

/* Warm: card borders carry gold warmth */
html[data-atmosphere="warm"] .what-is__pillar,
html[data-atmosphere="warm"] .ownership__step,
html[data-atmosphere="warm"] .trending__card,
html[data-atmosphere="warm"] .proof__tile,
html[data-atmosphere="warm"] .warranty__stat {
  border-color: rgba(200,169,110,0.12);
}

html[data-atmosphere="warm"] .what-is__pillar:hover,
html[data-atmosphere="warm"] .ownership__step:hover,
html[data-atmosphere="warm"] .trending__card:hover {
  border-color: rgba(200,169,110,0.28);
}

/* Warm: enter-momentum CTA section has warm ambient glow */
html[data-atmosphere="warm"] .enter-momentum::before {
  background: radial-gradient(ellipse, rgba(212,168,96,0.09) 0%, transparent 65%);
}


/* =============================================================================
   SHARED ATMOSPHERE BEHAVIORS
   Applied across multiple atmospheres for consistent doctrine.
   ============================================================================= */

/* CTA glow — activated by elevated and warm atmospheres */
html[data-atmosphere="elevated"] .btn-primary,
html[data-atmosphere="warm"] .btn-primary {
  position: relative;
}

html[data-atmosphere="elevated"] .btn-primary::after,
html[data-atmosphere="warm"] .btn-primary::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-sm) + 4px);
  background: var(--gold);
  opacity: var(--atm-cta-glow);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

/* Scroll reveal — atmosphere controls distance and duration.
   The JS in dle-core.js reads --atm-reveal-distance and --atm-reveal-duration.
   Here we ensure the CSS transition reflects atmosphere timing. */
html[data-atmosphere] .what-is__pillar,
html[data-atmosphere] .ownership__step,
html[data-atmosphere] .trending__card,
html[data-atmosphere] .proof__tile,
html[data-atmosphere] .warranty__stat {
  transition-duration: var(--atm-transition);
}

/* Nav backdrop — atmosphere affects blur intensity */
html[data-atmosphere="elevated"] .dle-nav {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-atmosphere="focused"] .dle-nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(5,8,16,0.98);
}

html[data-atmosphere="broad"] .dle-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Divider visibility — atmosphere modulates */
html[data-atmosphere="elevated"] .dle-divider {
  background: var(--border-soft);
}

html[data-atmosphere="focused"] .dle-divider {
  background: var(--border-mid);
}

html[data-atmosphere="broad"] .dle-divider,
html[data-atmosphere="warm"] .dle-divider {
  background: var(--border-dim);
}

/* Marquee strip — atmosphere tints the labels */
html[data-atmosphere="elevated"] .ecosystem-atm__item span {
  color: rgba(255,255,255,0.55);
}

html[data-atmosphere="warm"] .ecosystem-atm__item span {
  color: rgba(248,242,230,0.42);
}

html[data-atmosphere="focused"] .ecosystem-atm__item span {
  color: rgba(210,225,245,0.40);
}


/* =============================================================================
   ATMOSPHERE DEBUG INDICATOR
   Only visible when DLE_DEBUG is active (data-debug on html).
   ============================================================================= */

html[data-debug]::before {
  content: attr(data-atmosphere) ' / ' attr(data-mode);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  background: rgba(5,8,16,0.9);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  padding: 0.375rem 0.75rem;
  border-radius: 3px;
  pointer-events: none;
}