/* ============================================================
   Mintlife Health — Enhancement Layer
   Cookie consent banner · organic scroll animations · botanical
   parallax. Loaded alongside the compiled app; touches only
   opacity/transform so it can never break the app's layout.
   ============================================================ */

:root {
  --ml-mint-900: #0b3d38;
  --ml-mint-800: #0f766e;
  --ml-mint-600: #14b8a6;
  --ml-cream: #fbfaf7;
}

/* ---------- Cookie / policy consent banner ---------- */
#ml-consent {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(30px);
  width: min(720px, calc(100vw - 32px));
  z-index: 2147483000;
  background: rgba(11, 61, 56, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(11, 61, 56, 0.45);
  color: #fff;
  padding: 22px 26px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#ml-consent.ml-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#ml-consent h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
#ml-consent p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.82); }
#ml-consent a { color: #7ce8d8; text-decoration: underline; text-underline-offset: 2px; }
#ml-consent .ml-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#ml-consent button {
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease;
}
#ml-consent button:hover { transform: translateY(-1px); }
#ml-accept { background: #14b8a6; color: #06302b; }
#ml-accept:hover { background: #2dd4bf; }
#ml-decline { background: transparent; color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.3); }
#ml-decline:hover { color: #fff; }
@media (max-width: 520px) {
  #ml-consent { padding: 18px; font-size: 0.83rem; bottom: 12px; }
}

/* ---------- Injected footer legal links ---------- */
.ml-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  padding: 14px 16px 4px;
  font-size: 0.75rem;
}
.ml-footer-legal a { color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: color 0.2s; }
.ml-footer-legal a:hover { color: rgba(255, 255, 255, 0.9); }

/* ---------- Botanical parallax layer (behind app content) ---------- */
#ml-botanicals {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#ml-botanicals svg {
  position: absolute;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: transform;
}
#ml-botanicals.ml-on svg { opacity: var(--ml-op, 0.07); }
#ml-leaf-a { top: 12vh; left: -70px; width: 300px; color: #0f766e; --ml-op: 0.08; }
#ml-leaf-b { top: 58vh; right: -80px; width: 340px; color: #14b8a6; --ml-op: 0.07; }
#ml-dna    { top: 26vh; right: 4vw;  width: 170px; color: #0f766e; --ml-op: 0.09; }
#ml-roots  { bottom: -30px; left: 6vw; width: 320px; color: #0b3d38; --ml-op: 0.06; }
/* keep the app painting above the decor layer */
#root { position: relative; z-index: 1; }

/* ---------- Organic scroll reveals (opacity/transform only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ml-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ml-stagger, 0ms);
  }
  .ml-reveal.ml-in { opacity: 1; transform: none; }

  /* Breathing hero — slow inhale/exhale scaling on the first section */
  .ml-breathe {
    animation: ml-breathe 9.5s ease-in-out infinite;
    transform-origin: center 40%;
  }
  @keyframes ml-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.014); }
  }

  /* Gentle float for botanical decor, layered on top of parallax */
  .ml-sway { animation: ml-sway 12s ease-in-out infinite alternate; }
  @keyframes ml-sway {
    from { rotate: -1.2deg; }
    to { rotate: 1.6deg; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ml-reveal { opacity: 1 !important; transform: none !important; }
  #ml-botanicals { display: none; }
}