/* motion.css (l19, redone l20) : every animation of the landing. Loaded only when the visitor allows motion
   (media="(prefers-reduced-motion: no-preference)" in template.html), so nothing here needs its own guard and
   everything it hides is visible without it. transform and opacity only, never above a text. */

/* the bar shrinks a little once the page is scrolled (main.js adds .nav--compact) */
.nav-wrap{transition:height .25s ease,box-shadow .25s ease}

/* Lana blinks now and then (the lids are patches of her own colour) */
.lid{animation:lana-blink 4.4s ease-in-out infinite}
.nav-eyes .lid{animation-duration:5.2s;animation-delay:2.1s}
@keyframes lana-blink{0%,92%,100%{transform:scaleY(0)}94.5%,97.5%{transform:scaleY(1)}}

/* 1. hero (l30): Lana at her keyboard, the chats, the split, the sales and the closing line are Web Animations built in main.js */

/* 2. Why Lana: the hops from card to card are a Web Animation built in main.js (positions measured on the cards) */

/* l30: the typing dots of the hero chats (their cards are shown and hidden by main.js; paused off screen with .hx-off) */
.hx-dots i{animation:hx-dot 1s ease-in-out infinite}
.hx-dots i:nth-child(2){animation-delay:.15s}.hx-dots i:nth-child(3){animation-delay:.3s}
.hx-off .hx-dots i{animation-play-state:paused}
@keyframes hx-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
/* l44: the hero "Get started" button: the pink glow breathes every 3 s, the arrow nudges every 6 s (stops on hover) */
.hero-go-btn::after{animation:hero-go-glow 3s ease-in-out infinite}
.hero-go-btn .hero-go-arrow{animation:hero-go-nudge 6s ease-in-out infinite}
.hero-go-btn:hover .hero-go-arrow,.hero-go-btn:focus-visible .hero-go-arrow{animation:none}
@keyframes hero-go-glow{0%,100%{opacity:0}50%{opacity:1}}
@keyframes hero-go-nudge{0%,88%,100%{transform:translateX(0)}91%{transform:translateX(5px)}94%{transform:translateX(0)}97%{transform:translateX(3px)}}

/* l45: the pink glow behind the hero title breathes slowly (B1) */
body:has(.hero)::before,#pricing::before,#why::before{animation:lcB1 9s ease-in-out infinite alternate}
@keyframes lcB1{to{opacity:.62}}