/* Telovigo — motion.
   Hero: an orchestrated entrance (eyebrow, headline, lede, buttons, facts
   step in; the phone rises and settles, then floats). Below the fold, cards
   reveal once as they enter. Everything has a visible resting state, so with
   reduced motion the page simply appears. */

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translateY(40px) rotateX(6deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes aurora{0%{transform:translate(-8%,-6%) rotate(0deg)}50%{transform:translate(6%,4%) rotate(8deg)}100%{transform:translate(-8%,-6%) rotate(0deg)}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.96)}12%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:.05s}
.hero-copy>:nth-child(2){animation-delay:.15s}
.hero-copy>:nth-child(3){animation-delay:.28s}
.hero-copy>:nth-child(4){animation-delay:.4s}
.hero-copy>:nth-child(5){animation-delay:.52s}

.phone-wrap{perspective:1200px}
.phone{animation:phoneIn 1s cubic-bezier(.2,.7,.2,1) .25s both;transition:transform .35s ease;will-change:transform}
.phone-wrap.is-idle .phone{animation:float 6s ease-in-out infinite}

/* aurora behind the hero: two soft blobs drifting slowly */
.hero::before{animation:aurora 18s ease-in-out infinite}
.hero::after{content:"";position:absolute;right:-10%;bottom:-30%;width:55%;height:80%;background:radial-gradient(50% 50% at 50% 50%,rgba(67,56,202,.28),transparent 70%);pointer-events:none;animation:aurora 24s ease-in-out infinite reverse}

/* primary button: light sweep on hover, soft pulse at rest */
.btn-primary{position:relative;isolation:isolate}
.btn-primary::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#4338CA,#8B3DFF);filter:blur(14px);opacity:.6;z-index:-1;animation:glow 4s ease-in-out infinite}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:120% 0;pointer-events:none}
.btn-primary:hover::after{animation:shimmer .9s ease}
.btn:active{transform:translateY(0) scale(.98)}

/* scroll reveal: added by script only when it can be honoured */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{transition-delay:calc(var(--i,0)*70ms)}

/* cards: lift, glow ring, flag nudge */
.dcard,.step,.paycard,.feat,details{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.dcard:hover,.step:hover,.paycard:hover,.feat:hover{transform:translateY(-4px);border-color:rgba(139,61,255,.55);box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 0 1px rgba(139,61,255,.15)}
.dcard .flag{transition:transform .3s ease}
.dcard:hover .flag{transform:scale(1.08) rotate(-3deg)}
.step .k{transition:transform .3s ease,background .3s ease,color .3s ease}
.step:hover .k{transform:rotate(-8deg) scale(1.08);background:var(--purple);color:#fff}
.chip{transition:transform .2s ease,border-color .2s ease}
.paycard:hover .chip{border-color:rgba(139,61,255,.4)}
.chip:hover{transform:translateY(-2px)}

/* FAQ: the plus turns, the answer slides in */
summary::after{transition:transform .3s ease}
details[open] summary::after{transform:rotate(180deg)}
details[open] p{animation:rise .35s ease both}

/* slideshow dots: the active one fills like a progress bar */
.dots span{position:relative;overflow:hidden}
.dots span.is-on{background:var(--purple-soft)}
.dots span.is-on::after{content:"";position:absolute;inset:0;background:var(--purple);transform-origin:left;animation:fill 3.6s linear}

/* the confirmation toast pops in beside the phone every slideshow cycle */
.toast{opacity:0;animation:toastIn 10.8s ease-in-out 2.2s infinite}
.feat i{transition:transform .3s ease,background .3s ease,color .3s ease}
.feat:hover i{transform:translateY(-2px) scale(1.06);background:var(--purple);color:#fff}

/* sticky nav gets a shadow once the page scrolls */
.nav{transition:box-shadow .3s ease}
.nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.25)}

@media (prefers-reduced-motion: reduce){
  .hero-copy>*,.phone,.hero::before,.hero::after,.btn-primary::before,.dots span.is-on::after,details[open] p,.toast{animation:none!important}
  .toast{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .phone{transition:none}
}