/* Progressive enhancement: all content remains available without JS. */
.hero h1 .mo-line { display: block; overflow: clip; color: inherit; }
.hero h1 .mo-line-inner { display: block; color: inherit; }
.hero h1 .mo-line-inner > span { color: var(--sun); }
.mo-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mo-counter { display: inline-grid; font: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }
.mo-counter > span { grid-area: 1 / 1; }
.mo-counter-final { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mo:not(.mo-go) :is(.nav, .hero-copy > *, .product-scene, .whatsapp-float) { opacity: 0; }
  .mo .hero::after { opacity: 0; transform: scale(.88); }
  .mo.mo-go .hero::after { animation: mo-rings 1.7s cubic-bezier(.22, 1, .36, 1) both; }
  .mo .button > span[aria-hidden], .mo .nav-cta > span[aria-hidden] { display: inline-block; transition: transform .22s ease; }
  .mo :is(.button, .nav-cta):is(:hover, :focus-visible) > span[aria-hidden] { transform: translate(2px, -2px); }
  .mo .questions details[open] summary::after { animation: mo-minus .3s ease both; }
  .mo .proposal-paper { position: relative; border-top-color: transparent; }
  .mo .proposal-paper::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; border-radius: 6px 6px 0 0; background: var(--sun); transform-origin: left; }
  .mo .proposal-preview.mo-entered .proposal-paper::before { animation: mo-fill 1.2s cubic-bezier(.65, 0, .35, 1) both; }
  .mo .steps li { position: relative; }
  .mo .steps li::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--sun); opacity: 0; transform-origin: left; }
  .mo .steps li.mo-entered::before { animation: mo-trail 1.4s cubic-bezier(.65, 0, .35, 1) var(--mo-delay, 0ms) both; }
  .mo .steps li.mo-entered > span { position: relative; }
  .mo .steps li.mo-entered > span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sun); opacity: 0; animation: mo-flash 1.4s ease var(--mo-delay, 0ms); }
  .mo .check-circle, .mo .floating-note > span { position: relative; }
  .mo .check-circle::after, .mo .floating-note > span::after { content: ''; position: absolute; inset: -3px; border: 1px solid #21664b80; border-radius: 50%; opacity: 0; }
  .mo.mo-go .check-circle::after { animation: mo-ring .85s ease 1.75s; }
  .mo.mo-go .floating-note > span::after { animation: mo-ring .85s ease 2.2s; }
  .mo .project-card { position: relative; }
  .mo .project-card::after { content: ''; position: absolute; inset: -1px; border: 2px solid var(--sun); border-radius: inherit; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  .mo .project-card.mo-active::after { opacity: 1; }
  .mo .approved-card::after { border-color: var(--green); }
}
@keyframes mo-rings { to { opacity: 1; transform: scale(1); } }
@keyframes mo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-trail { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes mo-ring { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes mo-flash { 0%, 100% { opacity: 0; } 35% { opacity: .25; } }
@keyframes mo-minus { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce), print {
  .mo :is(.nav, .hero-copy > *, .product-scene, .whatsapp-float), .mo .hero::after { opacity: 1 !important; transform: none !important; }
  .mo *, .mo *::before, .mo *::after { animation: none !important; transition: none !important; }
  .mo .proposal-paper { border-top-color: var(--sun); }
  .mo-counter-final { opacity: 1; }
  .mo-counter-value { visibility: hidden; }
}
