/* OMM motion. Calm, slow, on-brand movement.
   Everything here only runs when motion.js adds .js-motion,
   which it never does for visitors who ask for reduced motion. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

/* Time passing: a thin lantern line that fills as you scroll */
.time-line { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; background: var(--lantern); transform-origin: 0 50%; scale: 0 1; pointer-events: none; }

/* Hero arrives on load */
@keyframes omm-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes omm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.js-motion .hero .wrap > div:first-child > * { animation: omm-rise 1.1s var(--ease-out) both; }
.js-motion .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .1s; }
.js-motion .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .22s; }
.js-motion .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .34s; }
.js-motion .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .44s; }
.js-motion .hero .phone-col { animation: omm-rise 1.4s var(--ease-out) .3s both; }
.js-motion .hero .phone { animation: omm-float 8s ease-in-out 1.8s infinite; }

/* Slow parallax on the big photos */
.js-motion .hero-bg, .js-motion .vision-bg { scale: 1.15; will-change: translate; }

/* Sections rise in as you scroll */
.js-motion .rv { opacity: 0; translate: 0 30px; transition: opacity 1s var(--ease-out), translate 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js-motion .rv.in { opacity: 1; translate: 0 0; }

/* Photos settle as they arrive */
.js-motion .rv-photo img { scale: 1.12; transition: scale 1.8s var(--ease-out); }
.js-motion .rv-photo.in img { scale: 1; }

/* Bars fill inside the phone mockups */
.js-motion .rv-bars .s-fill { transform-origin: 0 50%; scale: 0 1; transition: scale 1.4s var(--ease-out) .35s; }
.js-motion .rv-bars.in .s-fill { scale: 1 1; }

/* The weekly donut turns into place */
.js-motion .note.rv svg { rotate: -120deg; opacity: 0; transition: rotate 1.8s var(--ease-out) .15s, opacity 1s .15s; }
.js-motion .note.rv.in svg { rotate: 0deg; opacity: 1; }

/* Tree rings breathe, slowly */
@keyframes omm-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes omm-turn { to { rotate: 360deg; } }
.js-motion .final .rings { animation: omm-breathe 9s ease-in-out infinite, omm-turn 300s linear infinite; }
.js-motion .planet .badge svg { animation: omm-turn 60s linear infinite; }

/* Cards lift, and a soft lantern light follows the cursor */
.cat, .feature, .plan, .contact-card { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
@media (hover: hover) and (pointer: fine) {
  .cat:hover, .feature:hover, .plan:hover, .contact-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(24, 33, 27, .5); }
}
.spot { isolation: isolate; position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(210, 155, 71, .18), transparent 65%); }
.spot:hover::after { opacity: 1; }

/* Phones tilt toward the cursor */
.hero .phone-col, .showcase figure { perspective: 1200px; }
.js-motion .phone { transition: transform .7s var(--ease-out); }

/* Primary buttons lean toward the cursor */
.js-motion .btn-lantern { transition: translate .35s var(--ease-out), transform .2s, background-color .2s; }

/* A live count of today's minutes */
.vision .left-today { margin-top: 22px; font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; color: var(--lantern); }
.vision .left-today b { font-weight: 400; font-style: normal; }

/* Center the final rings with margins so the slow turn spins in place */
.js-motion .final .rings { transform: none !important; margin-left: -450px; margin-top: -450px; }