/* KlaroTax motion layer 2: page transitions, section transitions, backgrounds, mobile showcase.
   Additive to ga-site.css. Every effect is decorative, off for reduced motion, and the page reads
   correctly with this file and ga-motion.js removed. */

/* Cross-page transitions (progressive: Chromium and recent Safari) */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* Scroll progress */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,#47b8c4,#2ee6a6)}

/* Backgrounds: generated assets sit behind a legibility overlay */
.hero,.pricing-hero,.explain,.closing{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.pricing-hero::before,.explain::before,.closing::before{content:"";position:absolute;inset:-9% 0;z-index:-3;background-size:cover;background-position:center;translate:0 var(--bgp,0px);pointer-events:none}
.hero::after,.pricing-hero::after,.explain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero::before,.pricing-hero::before{background-image:url("motion/bg-ribbons.webp")}
.hero::after,.pricing-hero::after{background:linear-gradient(90deg,rgba(17,34,50,.95) 0%,rgba(17,34,50,.72) 46%,rgba(17,34,50,.38) 100%)}
.explain::before{background-image:url("motion/bg-contours.webp");opacity:.7;animation:bg-drift 46s ease-in-out infinite alternate}
.explain::after{background:linear-gradient(180deg,rgba(17,34,50,.86),rgba(17,34,50,.74) 50%,rgba(17,34,50,.9))}
.closing::before{background-image:url("motion/bg-glass.webp");background-position:right center;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 68%);mask-image:linear-gradient(90deg,transparent 12%,#000 68%)}
@keyframes bg-drift{from{transform:scale(1.06) translate3d(-1.6%,0,0)}to{transform:scale(1.06) translate3d(1.6%,0,0)}}

/* Hero video loop (home only), fades in over the identical still */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero-video.is-playing{opacity:.95}

/* Scroll-linked motion (values set by ga-motion.js) */
.hero-visual{translate:0 var(--py,0px)}
.hero-copy{translate:0 calc(var(--py,0px) * -.45)}
.hero-window{animation:unmask 1.2s var(--ease) .2s both}
@keyframes unmask{from{clip-path:inset(0 0 0 100% round 14px)}to{clip-path:inset(0 0 0 0 round 14px 0 0 14px)}}

/* Dark and closing sections open up as they arrive */
.js-motion2 [data-expand]{--e:1;clip-path:inset(0 calc((1 - var(--e)) * 5%) round calc((1 - var(--e)) * 44px))}

/* Headline word reveal */
.js-motion2 .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js-motion2 .split .w>span{display:inline-block;transform:translateY(108%);transition:transform .85s var(--ease) calc(var(--i) * 55ms)}
.js-motion2 .split.in .w>span{transform:none}

/* Mobile showcase */
.phones{background:var(--paper);overflow:hidden}
.phones-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.phones-copy p{margin-top:20px;color:var(--muted);font-size:18px}
.phone-points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.phone-points li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.phone-points b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:white;color:var(--teal);font-size:13px;letter-spacing:.04em}
.phone-points strong{display:block;font-family:KlaroDisplay,Arial,sans-serif;font-size:18px}
.phone-points span{color:var(--muted);font-size:15px}
.phones-stage{--f:1;position:relative;height:640px}
.phone{--k:0;position:absolute;left:50%;top:50%;width:250px;aspect-ratio:640/1140;padding:9px;border-radius:36px;background:#0d1b2a;box-shadow:0 34px 60px #0b1b2d38,inset 0 0 0 2px #2b4157;margin:0;
 transform:translate(-50%,-50%) translateX(calc(var(--k) * var(--f) * 200px)) translateY(calc(var(--k) * var(--k) * var(--f) * 30px)) rotate(calc(var(--k) * var(--f) * 7deg)) scale(calc(1 + (1 - var(--k) * var(--k)) * .08));
 z-index:calc(3 - var(--k) * var(--k) * 2);animation:bob 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.6s)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:28px;background:white}
.phone[data-k="-1"]{--k:-1}.phone[data-k="1"]{--k:1}
@keyframes bob{50%{translate:0 -12px}}
.phones-note{margin-top:28px;font-size:13px;color:var(--muted)}

@media (max-width:900px){
 .phones-grid{grid-template-columns:1fr;gap:20px}
 .phones-stage{height:520px}
 .phone{width:190px;border-radius:30px;padding:7px}
 .phone img{border-radius:24px}
 .phone{transform:translate(-50%,-50%) translateX(calc(var(--k) * var(--f) * 128px)) translateY(calc(var(--k) * var(--k) * var(--f) * 22px)) rotate(calc(var(--k) * var(--f) * 7deg)) scale(calc(1 + (1 - var(--k) * var(--k)) * .08))}
 .js-motion2 [data-expand]{clip-path:inset(0 calc((1 - var(--e)) * 3%) round calc((1 - var(--e)) * 28px))}
}
@media (max-width:560px){.phone{width:164px}.phone{transform:translate(-50%,-50%) translateX(calc(var(--k) * var(--f) * 108px)) translateY(calc(var(--k) * var(--k) * var(--f) * 18px)) rotate(calc(var(--k) * var(--f) * 7deg)) scale(calc(1 + (1 - var(--k) * var(--k)) * .06))}.phones-stage{height:460px}}

@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .hero-window,.explain::before,.phone{animation:none}
 .hero-visual,.hero-copy{translate:none}
 .hero::before,.pricing-hero::before,.explain::before,.closing::before{translate:none}
 .hero-video{display:none}
}