/* Motion layer: entrance and scroll reveals, hovers, counters. Only active when html has .anim
   (set in <head>; never for prefers-reduced-motion), so without JS the page looks exactly as before. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}

/* hero entrance: the headline is shown at once (it is what Google measures as the main content),
   the rest arrives right after it; the laptop only moves, so it is painted immediately too */
.anim .hero h1 small{opacity:0;transform:translateY(12px);transition:opacity .8s ease .2s,transform .8s var(--ease-out) .2s}
.anim .hero-media{transform:translateY(28px) scale(.95);transition:transform 1.3s var(--ease-out)}
.anim .hero-p,.anim .hero .btn{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s var(--ease-out)}
.anim .hero-p{transition-delay:.4s}.anim .hero .btn{transition-delay:.5s}
.anim .hero.go h1 small,.anim .hero.go .hero-media,.anim .hero.go .hero-p,.anim .hero.go .btn{opacity:1;transform:none}
/* laptop gently floats after it lands */
@keyframes px-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.anim .hero.go .hero-media video{animation:px-float 6s ease-in-out 1.4s infinite}

/* scroll reveal */
.anim [data-rv]{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.anim [data-rv="zoom"]{transform:scale(.94) translateY(20px)}
.anim [data-rv="left"]{transform:translateX(-40px)}
.anim [data-rv].in{opacity:1;transform:none}

/* service cards: lift, device floats up on hover */
.anim .card{transition:opacity .8s ease,transform 1s var(--ease-out),box-shadow .4s ease}
.anim .card .dev{transition:transform .7s var(--ease-out)}
@media (hover:hover) and (min-width:1025px){
  .anim .card.in:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(10,40,90,.45)}
  .anim .card:hover .dev{transform:translateY(-14px) rotate(-2deg)}
}

/* cases: photo zooms, button slides */
.anim .case img{transition:transform .9s var(--ease-out)}
@media (hover:hover){.anim .case:hover img{transform:scale(1.06)}}

/* buttons: light sweep. Drawn as a moving background, not an overlay, so the button keeps its
   own position and its rounded corners (an overflow:hidden overlay squares them in Safari) */
.anim .btn{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;transition:background-color .2s,background-position .8s var(--ease-out)}
@media (hover:hover){.anim .btn:hover{background-position:0 0}}
@keyframes px-shine{0%,70%{background-position:100% 0}100%{background-position:0 0}}
.anim .hero.go .btn{transition:opacity .8s ease .5s,transform .9s var(--ease-out) .5s,background-color .2s;animation:px-shine 4.5s ease-in-out 2.4s infinite}
/* white "Обговорити проєкт" buttons on the service cards get a soft blue sweep */
.anim .card .cbtn{background-image:linear-gradient(110deg,transparent 40%,rgba(23,118,210,.16) 50%,transparent 60%);background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;transition:transform .2s,background-position .8s var(--ease-out)}
@media (hover:hover){.anim .card .cbtn:hover{background-position:0 0}}
/* phones have no hover, so there every button shines by itself from time to time */
@media (hover:none){.anim .btn,.anim .card .cbtn{animation:px-shine 4.5s ease-in-out 1.5s infinite}}

/* on phones the rounded blocks clip their pictures; keep the corners rounded while those move */
@media (max-width:1024px){.anim .svc .card{-webkit-mask-image:-webkit-radial-gradient(white,black)}}
.anim .case{-webkit-mask-image:-webkit-radial-gradient(white,black)}

/* menu links: underline grows */
.anim .nav a{position:relative}
.anim .nav a::after{content:"";position:absolute;left:calc(45*var(--u));right:calc(18*var(--u));bottom:-4px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.anim .nav a:hover::after{transform:scaleX(1)}

/* "Чому ми" accent word: colour wipe */
.anim .why h2 em{background:linear-gradient(90deg,var(--blue-2) 50%,var(--ink) 50%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.2s var(--ease-out) .3s}
.anim .why h2.in em{background-position:0 0}