/* ============================================================
   Ambience presets + Calm mode (1.4.2)
   Four dark-native palettes that re-color the art layer by
   swapping its tokens and aurora, plus a Calm mode that stills
   ambient motion and dims glows. Applied as attributes on <html>:
     data-ambience="lagoon|dusk|forest|midnight"  (lagoon = default)
     data-calm="on"
   ============================================================ */

/* ---------- Dusk: peach, rose, plum ---------- */
html[data-ambience="dusk"] {
  --ink: #130914; --ink-2: #221226;
  --mint: #FFB38A; --mint-dark: #D9774F; --mint-glow: rgba(255, 179, 138, 0.30);
  --lavender: #F3C4D3; --lavender-deep: #D996B4; --gold: #FFE2A8;
  --glass-bg-strong: rgba(34, 18, 38, 0.80);
  --glass-border-strong: rgba(255, 179, 138, 0.45);
  --glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 50px rgba(255, 179, 138, 0.16);
}
html[data-ambience="dusk"]::before {
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(168, 84, 72, 0.58) 0%, rgba(168, 84, 72, 0) 70%),
    radial-gradient(38% 34% at 84% 10%, rgba(120, 52, 110, 0.50) 0%, rgba(120, 52, 110, 0) 70%),
    radial-gradient(46% 40% at 62% 90%, rgba(217, 119, 79, 0.24) 0%, rgba(217, 119, 79, 0) 70%),
    radial-gradient(30% 26% at 10% 78%, rgba(243, 196, 211, 0.16) 0%, rgba(243, 196, 211, 0) 70%),
    linear-gradient(180deg, #2a1226 0%, var(--ink) 62%);
}

/* ---------- Forest: moss, sage, gold ---------- */
html[data-ambience="forest"] {
  --ink: #06100b; --ink-2: #0c1f14;
  --mint: #9BE89B; --mint-dark: #4F9E5F; --mint-glow: rgba(155, 232, 155, 0.28);
  --lavender: #D8E2B0; --lavender-deep: #B7C78C; --gold: #F0D98A;
  --glass-bg-strong: rgba(12, 31, 20, 0.80);
  --glass-border-strong: rgba(155, 232, 155, 0.45);
  --glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 50px rgba(155, 232, 155, 0.14);
}
html[data-ambience="forest"]::before {
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(34, 110, 74, 0.60) 0%, rgba(34, 110, 74, 0) 70%),
    radial-gradient(38% 34% at 84% 10%, rgba(70, 100, 48, 0.48) 0%, rgba(70, 100, 48, 0) 70%),
    radial-gradient(46% 40% at 62% 90%, rgba(79, 158, 95, 0.24) 0%, rgba(79, 158, 95, 0) 70%),
    radial-gradient(30% 26% at 10% 78%, rgba(240, 217, 138, 0.14) 0%, rgba(240, 217, 138, 0) 70%),
    linear-gradient(180deg, #0b2416 0%, var(--ink) 62%);
}

/* ---------- Midnight: near-black, ice blue, silver ---------- */
html[data-ambience="midnight"] {
  --ink: #02050c; --ink-2: #060b18;
  --mint: #8FB8FF; --mint-dark: #3F7BDB; --mint-glow: rgba(143, 184, 255, 0.26);
  --lavender: #C6D4F5; --lavender-deep: #9FB3E8; --gold: #D8DEEA;
  --glass-bg-strong: rgba(6, 11, 24, 0.82);
  --glass-border-strong: rgba(143, 184, 255, 0.42);
  --glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(143, 184, 255, 0.12);
}
html[data-ambience="midnight"]::before {
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(30, 60, 120, 0.50) 0%, rgba(30, 60, 120, 0) 70%),
    radial-gradient(38% 34% at 84% 10%, rgba(50, 50, 110, 0.40) 0%, rgba(50, 50, 110, 0) 70%),
    radial-gradient(46% 40% at 62% 90%, rgba(63, 123, 219, 0.16) 0%, rgba(63, 123, 219, 0) 70%),
    radial-gradient(30% 26% at 10% 78%, rgba(198, 212, 245, 0.10) 0%, rgba(198, 212, 245, 0) 70%),
    linear-gradient(180deg, #050d22 0%, var(--ink) 62%);
}

/* ---------- Buttons follow the preset (art.css hard-codes mint; override only when a preset is active) ---------- */
html[data-ambience] .btn-primary, html[data-ambience] .breathing-btn, html[data-ambience] .affirmation-btn, html[data-ambience] button.primary,
html[data-ambience] .newsletter-form button, html[data-ambience] .ios-healthkit-card-btn {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint) 42%, var(--mint-dark) 100%) !important;
  color: #03101C !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 14px 34px var(--mint-glow) !important;
}
html[data-ambience] .btn-primary:hover, html[data-ambience] .newsletter-form button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 20px 44px var(--mint-glow) !important; }
html[data-ambience] .btn-secondary:hover { border-color: var(--glass-border-strong) !important; }
html[data-ambience] .btn-secondary.reset-cta { color: var(--mint) !important; border-color: var(--glass-border-strong) !important; }
html[data-ambience] .reset-cta { background: linear-gradient(135deg, var(--mint-glow), rgba(246, 211, 122, 0.18)); border-color: var(--glass-border-strong); box-shadow: 0 4px 16px var(--mint-glow); }
html[data-ambience] .reset-cta:hover { border-color: var(--mint); box-shadow: 0 6px 22px var(--mint-glow); }
html[data-ambience] ::selection { background: var(--mint-glow); }
html[data-ambience] :focus-visible { outline-color: var(--mint) !important; }

/* ---------- Calm mode: still the ambient motion, dim the glows ---------- */
html[data-calm="on"] { --mint-glow: rgba(95, 243, 239, 0.12); --gold: #E6D9B8; }
html[data-calm="on"]::before { animation: none !important; filter: saturate(0.82) brightness(0.92); }
html[data-calm="on"]::after { opacity: 0.03; }
html[data-calm="on"] .hero-media-wrapper video, html[data-calm="on"] .hero-media-wrapper img,
html[data-calm="on"] .float-card, html[data-calm="on"] .topic-icon, html[data-calm="on"] .tip-card .tip-icon,
html[data-calm="on"] .native-card-icon, html[data-calm="on"] .level-card-icon,
html[data-calm="on"] .topic-card::after, html[data-calm="on"] .tip-card::after, html[data-calm="on"] .native-card::after,
html[data-calm="on"] .affirmation-card::after, html[data-calm="on"] .level-card::after, html[data-calm="on"] .newsletter-card::after,
html[data-calm="on"] .ai-chat-btn, html[data-calm="on"] .sos-calm-btn, html[data-calm="on"] .game-tab.active,
html[data-calm="on"] .pattern-btn.active, html[data-calm="on"] .section-label::before, html[data-calm="on"] .btn-primary::after {
  animation: none !important;
}
html[data-calm="on"] .m-ring { opacity: 0.35 !important; }
html[data-calm="on"] .sos-calm-btn, html[data-calm="on"] .ai-chat-btn { filter: saturate(0.6); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; }
html[data-calm="on"] .btn-primary, html[data-calm="on"] .hero-cta { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; }

/* ---------- The control, inside the nav menu ---------- */
.ambience-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 4px; margin-top: 6px; border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.13));
}
.ambience-row .ambience-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted, rgba(255, 255, 255, 0.5)); margin-right: 2px; }
.ambience-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); cursor: pointer; padding: 0;
  background: var(--dot, #5FF3EF); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ambience-dot[data-ambience="lagoon"] { --dot: linear-gradient(135deg, #5FF3EF, #A594E3); }
.ambience-dot[data-ambience="dusk"] { --dot: linear-gradient(135deg, #FFB38A, #D996B4); }
.ambience-dot[data-ambience="forest"] { --dot: linear-gradient(135deg, #9BE89B, #F0D98A); }
.ambience-dot[data-ambience="midnight"] { --dot: linear-gradient(135deg, #8FB8FF, #1a2a55); }
.ambience-dot:hover { transform: scale(1.1); }
.ambience-dot[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--mint-glow, rgba(95, 243, 239, 0.32)); }
.ambience-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.calm-toggle {
  margin-left: auto; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; color: var(--text-secondary, rgba(255, 255, 255, 0.76));
  background: var(--glass-bg, rgba(255, 255, 255, 0.055)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.13));
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.calm-toggle[aria-pressed="true"] { color: #fff; border-color: var(--glass-border-strong, rgba(95, 243, 239, 0.45)); background: rgba(255, 255, 255, 0.12); }
.calm-toggle::before { content: "○ "; }
.calm-toggle[aria-pressed="true"]::before { content: "● "; }
@media (max-width: 900px) { .ambience-row { padding-top: 16px; } }
/* Wide nav (no drawer): keep the row to one compact line between the links and the CTA. */
@media (min-width: 769px) {
  .ambience-row { border-top: none; padding: 0; margin: 0 14px 0 6px; flex-wrap: nowrap; gap: 8px; }
  .ambience-row .ambience-label { display: none; }
  .ambience-dot { width: 20px; height: 20px; }
  .calm-toggle { margin-left: 4px; padding: 5px 10px; font-size: 0.74rem; white-space: nowrap; }
}

/* ---------- Lotus inside the Reset and SOS breathing circles (hero-flower.js mounts it) ---------- */
.sos-breath-circle { position: relative; overflow: visible; }
.sos-breath-circle > .lotus-canvas {
  position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
.sos-breath-circle > .sos-breath-text, .sos-breath-circle > .sos-breath-count { position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }

/* ---------- Petal motion option, under the breathing visual switcher ---------- */
.petal-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 0; flex-wrap: wrap; }
.petal-row .petal-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted, rgba(255, 255, 255, 0.5)); margin-right: 4px; }
.petal-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.76)); background: var(--glass-bg, rgba(255, 255, 255, 0.055));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.13)); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.petal-btn[aria-pressed="true"] { color: #fff; border-color: var(--glass-border-strong, rgba(95, 243, 239, 0.45)); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 18px var(--mint-glow, rgba(95, 243, 239, 0.32)); }
.petal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }