/* Motion: everything here is off with prefers-reduced-motion (the page then shows the end states).
   .js is set by site.js so nothing is hidden when scripts do not run. */

/* Scroll reveal: sections and cards rise in once. */
@media (prefers-reduced-motion: no-preference) {
	.js :is(.mbr-section .mbr-eyebrow, .mbr-section h2, .mbr-step, .mbr-features > li, .mbr-gallery > li, .mbr-plan, .mbr-faq__item, .mbr-breathe__stage, .mbr-cta__inner) {
		opacity: 0; transform: translateY(28px);
		transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--mbr-delay, 0s);
	}
	.js :is(.mbr-section .mbr-eyebrow, .mbr-section h2, .mbr-step, .mbr-features > li, .mbr-gallery > li, .mbr-plan, .mbr-faq__item, .mbr-breathe__stage, .mbr-cta__inner).is-in { opacity: 1; transform: none; }
}

/* Hero: the glow behind the phone breathes Long exhale (4 s in, 6 s out); the phone floats a little. */
@media (prefers-reduced-motion: no-preference) {
	.mbr-hero__visual::before { animation: mbr-breathe-glow 10s ease-in-out infinite; }
	.mbr-hero__visual .mbr-phone { animation: mbr-float 10s ease-in-out infinite; }
}
@keyframes mbr-breathe-glow {
	0%   { transform: scale(.82); opacity: .35; }
	40%  { transform: scale(1.08); opacity: .75; }
	100% { transform: scale(.82); opacity: .35; }
}
@keyframes mbr-float {
	0%, 100% { translate: 0 6px; }
	40%      { translate: 0 -8px; }
}

/* Hero phone slider: real screens cross-fade. */
.mbr-phone--slider .mbr-phone__screen { position: relative; }
.mbr-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.mbr-slide.is-active { opacity: 1; }
.mbr-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Try one breath */
.mbr-breathe { overflow: hidden; }
.mbr-breathe__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.mbr-breathe__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; }
.mbr-breathe__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--mbr-honey) 75%, transparent), color-mix(in srgb, var(--mbr-honey) 25%, transparent) 60%, transparent); transform: scale(calc(.62 + .38 * var(--mbr-fill, .5))); opacity: calc(.45 + .55 * var(--mbr-fill, .5)); will-change: transform, opacity; }
.mbr-breathe__cat { position: relative; width: 52%; height: auto; transform: translateY(calc(-3px * var(--mbr-fill, .5))) scale(calc(.98 + .04 * var(--mbr-fill, .5))); }
.mbr-breathe__word { font: 600 clamp(1.8rem, 3.4vw, 2.4rem)/1.2 var(--mbr-serif); margin: 8px 0 12px; min-height: 1.2em; }
.mbr-breathe__secs { color: var(--mbr-muted); font-family: var(--mbr-sans); font-size: .55em; font-variant-numeric: tabular-nums; }
.mbr-breathe__curve { width: 100%; max-width: 360px; height: auto; margin-bottom: 20px; overflow: visible; }
.mbr-breathe__curve path { fill: none; stroke-width: 5; stroke-linecap: round; }
.mbr-breathe__in { stroke: var(--mbr-sage); }
.mbr-breathe__out { stroke: var(--mbr-accent); }
.mbr-breathe__dot { fill: var(--mbr-text); stroke: var(--mbr-surface); stroke-width: 3; }
.mbr-muted { color: var(--mbr-muted); }
.mbr-pause { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--mbr-line); background: var(--mbr-surface); color: var(--mbr-text); font: 600 .95rem var(--mbr-sans); cursor: pointer; }
@media (max-width: 860px) {
	.mbr-breathe__inner { grid-template-columns: 1fr; text-align: center; }
	.mbr-breathe__curve { margin-inline: auto; display: block; }
	.mbr-breathe__stage { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .mbr-pause { display: none; } }