/* ============================================================
   BreatheFirst — Atelier layer (loaded last)
   A single, consistent material system on top of the glass theme:
   one luminous backdrop, one glass recipe for every surface, one
   type scale, one accent discipline. Dark only. No layout changes.
   Rollback: remove the <link> for this file in index.html.
   ============================================================ */

:root {
  color-scheme: dark;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ink: #030812;
  --ink-2: #071428;
  --mint: #5FF3EF;
  --mint-dark: #27B39E;
  --mint-glow: rgba(95, 243, 239, 0.32);
  --lavender: #C9BCF2;
  --lavender-deep: #A594E3;
  --gold: #F6D37A;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.76);
  --text-muted: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(10, 22, 42, 0.78);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-border-strong: rgba(95, 243, 239, 0.45);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 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(95, 243, 239, 0.16);
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --bg: var(--ink);
  --bg-elevated: var(--ink-2);
}

/* ---------- 1. Backdrop: slow aurora, fine grain, deep ink ---------- */
html { background: var(--ink); }
body { background: transparent !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html::before {
  content: ""; position: fixed; inset: -22% -12%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 36% at 18% 16%, rgba(28, 110, 120, 0.62) 0%, rgba(28, 110, 120, 0) 70%),
    radial-gradient(38% 34% at 84% 10%, rgba(74, 60, 140, 0.50) 0%, rgba(74, 60, 140, 0) 70%),
    radial-gradient(46% 40% at 62% 90%, rgba(39, 179, 158, 0.26) 0%, rgba(39, 179, 158, 0) 70%),
    radial-gradient(30% 26% at 10% 78%, rgba(201, 188, 242, 0.18) 0%, rgba(201, 188, 242, 0) 70%),
    linear-gradient(180deg, #081630 0%, var(--ink) 62%);
  animation: artDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}
html::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@keyframes artDrift { to { transform: translate3d(3%, -2.5%, 0) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

::selection { background: rgba(95, 243, 239, 0.35); color: #fff; }
:focus-visible { outline: 2px solid rgba(95, 243, 239, 0.75) !important; outline-offset: 3px; }

/* ---------- 2. Type: one scale, tighter display, calmer body ---------- */
.hero-title, .section-title, .about-content h2, .affirmation-card blockquote, .level-card-title { font-family: var(--font-display) !important; }
.hero-title { letter-spacing: -0.025em !important; line-height: 1.02 !important; text-shadow: 0 14px 50px rgba(0, 0, 0, 0.45); }
.hero-title .highlight { background-image: linear-gradient(120deg, var(--mint) 0%, #BFFFFC 45%, var(--lavender) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent; }
.section-title { letter-spacing: -0.02em !important; line-height: 1.08 !important; }
.section-label { font-size: 11px !important; letter-spacing: 0.28em !important; font-weight: 600 !important; color: var(--mint) !important; text-shadow: none !important; opacity: 0.95; }
.hero-text, .section-desc, .topic-card p, .tip-card p, .about-content p, .references-card p, .newsletter-card > p { color: var(--text-secondary) !important; line-height: 1.7 !important; font-weight: 400; }
.hero-text { font-size: 1.08rem !important; max-width: 36ch; }
.section-desc { max-width: 56ch; margin-left: auto; margin-right: auto; }
.hero-badge { font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600 !important; padding: 8px 16px !important; }

/* ---------- 3. One glass recipe for every surface ---------- */
.topic-card, .tip-card, .references-card, .newsletter-card, .affirmation-card, .level-card, .body-card, .level-up-card,
.float-card, .native-card, .platform-card, .feature-card, .mood-card, .reference-card, .hero-media-wrapper, .mood-chart-wrap,
.ios-healthkit-card, .ios-native-panel, .about-stats, .pattern-btn, .mood-btn, .game-tab, .reminder-btn, .share-nudge {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  color: var(--text-primary);
}
.topic-card, .tip-card, .references-card, .newsletter-card, .affirmation-card, .level-card, .body-card, .native-card { border-radius: var(--radius-md) !important; }
.references-card, .newsletter-card, .affirmation-card { border-radius: var(--radius-lg) !important; }
.topic-card:hover, .tip-card:hover, .native-card:hover, .mood-btn:hover, .pattern-btn:hover, .game-tab:hover {
  transform: translateY(-3px); border-color: rgba(95, 243, 239, 0.38) !important; box-shadow: var(--glass-shadow-hover) !important;
}
.topic-card, .tip-card, .native-card, .mood-btn, .pattern-btn, .game-tab { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease !important; }
.topic-card h3, .tip-card h3, .native-card h3, .float-card strong, .references-card h3 { color: var(--text-primary) !important; font-weight: 600; letter-spacing: -0.01em; }

/* Selected / active states: a mint rim and a soft inner tint, never a solid fill */
.pattern-btn.active, .game-tab.active, .mood-btn.active, .mood-btn.selected, .calm-chip.selected {
  background: linear-gradient(148deg, rgba(95, 243, 239, 0.22) 0%, rgba(95, 243, 239, 0.07) 100%) !important;
  border-color: rgba(95, 243, 239, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(95, 243, 239, 0.15), 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 40px rgba(95, 243, 239, 0.14) !important;
  color: #fff !important;
}
.pattern-btn.active .pattern-name, .pattern-btn.active .pattern-desc { color: #fff !important; }
.pattern-btn { border-radius: 20px !important; }
.pattern-desc { color: var(--text-muted) !important; letter-spacing: 0.12em; font-size: 0.7rem !important; }

/* ---------- 4. Buttons: luminous primary, glass secondary ---------- */
.btn-primary, .newsletter-form button, .ios-healthkit-card-btn {
  background: linear-gradient(135deg, #9FFAF6 0%, #4DEEEA 38%, #2EC4B6 100%) !important;
  color: #03101C !important; border: none !important; font-weight: 700 !important; letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 14px 34px rgba(77, 238, 234, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease !important;
}
.btn-primary:hover, .newsletter-form button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 44px rgba(77, 238, 234, 0.4) !important; }
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-secondary {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
  color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-weight: 600 !important;
}
.btn-secondary:hover { border-color: rgba(95, 243, 239, 0.5) !important; transform: translateY(-2px); }
.btn-secondary.reset-cta { color: var(--mint) !important; border-color: rgba(95, 243, 239, 0.35) !important; }

/* ---------- 5. Chrome: navbar, crisis line, floating actions ---------- */
.navbar.scrolled, .navbar.is-scrolled { background: rgba(5, 12, 26, 0.62) !important; -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.crisis-banner { background: rgba(6, 14, 28, 0.72) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 0.78rem; letter-spacing: 0.01em; }
.crisis-banner a { color: var(--mint) !important; }
.ai-chat-btn, .sos-calm-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 36px rgba(95, 243, 239, 0.18) !important;
  letter-spacing: 0.01em;
}
.sos-calm-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 36px rgba(255, 117, 151, 0.28) !important; }

/* ---------- 6. Hero media and float cards ---------- */
.hero-media-wrapper { border-radius: 32px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(95, 243, 239, 0.14) !important; }
.hero-media-wrapper::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 28%, rgba(3, 8, 18, 0) 70%, rgba(3, 8, 18, 0.45) 100%); }
.hero-video-badge { background: rgba(5, 12, 26, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 100px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.float-card { border-radius: 20px !important; }
.float-card .card-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* ---------- 7. Breathing stage ---------- */
.breathing-circle { box-shadow: 0 0 90px rgba(95, 243, 239, 0.22), inset 0 0 50px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; border-color: rgba(255, 255, 255, 0.28) !important; }

/* ---------- 8. The two sections that were still light ---------- */
.references, .newsletter { background: transparent !important; }
.references-card, .references-card p, .references-card li, .ref-item, .references-grid { color: var(--text-secondary) !important; }
.ref-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 16px 18px; text-align: left; }
.ref-item a { color: var(--mint) !important; }
.ref-number { background: linear-gradient(148deg, rgba(95, 243, 239, 0.25), rgba(95, 243, 239, 0.08)) !important; color: var(--mint) !important; border: 1px solid rgba(95, 243, 239, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.newsletter-card { background: linear-gradient(148deg, rgba(201, 188, 242, 0.2) 0%, rgba(95, 243, 239, 0.08) 60%, rgba(255, 255, 255, 0.03) 100%) !important; border-color: rgba(201, 188, 242, 0.32) !important; color: var(--text-primary) !important; }
.newsletter-card::before, .newsletter-card::after { display: none !important; }
.newsletter-card h2, .newsletter-card .section-label { color: #fff !important; }
.newsletter-card .section-label { color: var(--lavender) !important; }
.newsletter-form input { background: rgba(3, 8, 18, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-radius: 100px !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.newsletter-form input::placeholder { color: var(--text-muted) !important; }
.newsletter-form input:focus { border-color: rgba(95, 243, 239, 0.55) !important; box-shadow: 0 0 0 4px rgba(95, 243, 239, 0.12) !important; }
.newsletter-privacy { color: var(--text-muted) !important; }

/* ---------- 9. Rhythm, hairlines, footer ---------- */
.about, .topics, .breathing, .affirmation, .mood, .tips, .references, .newsletter { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); }
.about, .topics, .breathing, .affirmation, .mood, .tips, .references, .newsletter { position: relative; }
.topics::before, .breathing::before, .mood::before, .tips::before, .references::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 72%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}
.about-stats { border-radius: var(--radius-md); padding: 22px 18px; }
.footer { background: linear-gradient(180deg, rgba(3, 8, 18, 0) 0%, rgba(3, 8, 18, 0.6) 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--mint); }
.footer-disclaimer { color: var(--text-muted) !important; }

/* ---------- 10. Small screens: keep the material, tighten the air ---------- */
@media (max-width: 640px) {
  .hero-title { font-size: clamp(2.6rem, 13vw, 3.6rem) !important; }
  .hero-text { font-size: 1rem !important; }
  .topic-card, .tip-card, .references-card, .newsletter-card, .affirmation-card { border-radius: 22px !important; }
  .references-card, .newsletter-card, .affirmation-card { padding: 26px 20px !important; }
}

/* ---------- 11. Games hub panels and the brand mark ---------- */
.game-container { border-radius: 28px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 70px rgba(0, 0, 0, 0.5) !important; overflow: hidden; }
#game-zen-garden { background: radial-gradient(120% 80% at 20% 0%, rgba(28, 110, 120, 0.55) 0%, rgba(28, 110, 120, 0) 55%), radial-gradient(90% 70% at 90% 100%, rgba(74, 60, 140, 0.5) 0%, rgba(74, 60, 140, 0) 60%), linear-gradient(180deg, #0A1830 0%, #071020 100%) !important; }
#game-urge-surf { background: radial-gradient(100% 70% at 50% 100%, rgba(39, 179, 158, 0.35) 0%, rgba(39, 179, 158, 0) 60%), linear-gradient(180deg, #071428 0%, #0A1E3A 100%) !important; }
.zen-invite { font-family: var(--font-display) !important; letter-spacing: 0.02em !important; font-size: 1.15rem !important; color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }
.logo-icon { background: url("icon-192.png") center / cover no-repeat !important; color: transparent !important; font-size: 0 !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(95, 243, 239, 0.18); border: 1px solid rgba(255, 255, 255, 0.16); }
.logo { letter-spacing: -0.01em; }

/* ---------- 12. Cinema mode, breathing mode toggle, sanctuary chips (Mac's features, same material) ---------- */
.b-mode-btn, .sanctuary-chip, .imax-btn {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--text-secondary) !important; border-radius: 100px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-weight: 600 !important; letter-spacing: 0.01em;
}
.b-mode-btn.active, .sanctuary-chip.active {
  background: linear-gradient(148deg, rgba(95, 243, 239, 0.24), rgba(95, 243, 239, 0.08)) !important;
  border-color: rgba(95, 243, 239, 0.55) !important; color: #fff !important;
}
.imax-pill {
  background: rgba(5, 12, 26, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 30px 80px rgba(0, 0, 0, 0.55) !important; border-radius: 100px !important;
}
.imax-pill-title { font-family: var(--font-body) !important; font-weight: 600 !important; letter-spacing: 0.42em !important; }
.imax-pill-sub { font-family: var(--font-display) !important; letter-spacing: 0.01em !important; color: rgba(255, 255, 255, 0.86) !important; }
.imax-theater-letterbox { background: linear-gradient(180deg, rgba(3, 8, 18, 0.95), rgba(3, 8, 18, 0)) !important; }
.imax-theater-letterbox.bottom { background: linear-gradient(0deg, rgba(3, 8, 18, 0.95), rgba(3, 8, 18, 0)) !important; }