/* ULY DALA EMI — B2B: motion and hover layer (works together with b2b-motion.js) */

/* Lenis drives wheel scrolling; native smooth scrolling would fight it */
html.lenis{scroll-behavior:auto}

/* Brand ornament as inline SVG (so it can be drawn as a line) */
.ornament-svg{fill:none;stroke:none;overflow:visible}
.ornament-svg path{fill:currentColor;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hero-ornament.ornament-svg{color:#fff;filter:none}
.drinks-visual>.drinks-ornament{width:86%;height:auto;max-height:95%;color:#3a8ed4;opacity:.8}

/* Split headings: lines slide up inside a mask; room for descenders and Kazakh diacritics */
.split-line-mask{padding-block:.1em .18em;margin-block:-.1em -.18em}

/* Hero: glow behind the products */
.hero-glow{position:absolute;z-index:-1;left:12%;top:-38%;width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(214,236,252,.75) 32%,rgba(214,236,252,0) 68%);opacity:.85}
.hero-glasses,.hero-device{will-change:transform}

/* Header gets a soft shadow once the page scrolls */
.header{transition:box-shadow .4s ease}
.header.is-scrolled{box-shadow:0 12px 30px -22px rgba(34,34,75,.45)}

/* Navigation underline */
@media (min-width:901px){
  .nav a{position:relative}
  .nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav a:hover::after{transform:scaleX(1);transform-origin:left}
}
/* Mobile menu drops in */
@media (max-width:900px){
  .nav.open{animation:navIn .35s cubic-bezier(.2,.7,.2,1)}
  .nav.open a{animation:navItem .45s cubic-bezier(.2,.7,.2,1) both}
  .nav.open a:nth-child(2){animation-delay:.05s}
  .nav.open a:nth-child(3){animation-delay:.1s}
  .nav.open a:nth-child(4){animation-delay:.15s}
}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes navItem{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* Buttons: arrow nudges forward, a light sweep crosses the button */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%);transform:translateX(-120%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.btn.light::after,.btn.outline::after{background:linear-gradient(110deg,transparent 30%,rgba(57,154,213,.2) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(120%)}
.btn svg,.text-link svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg,.text-link:hover svg{transform:translateX(5px)}

/* Direction cards lift on hover */
.direction{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s cubic-bezier(.2,.7,.2,1)}
/* hover effects only where a real pointer hovers (a tap on a phone must not leave the card lifted) */
@media (hover:hover){.direction:hover{transform:translateY(-5px);box-shadow:0 34px 60px -38px rgba(0,75,155,.5)}}
/* round arrow keeps pointing forward: it nudges right instead of rotating up */
.direction:hover .round-link,.direction:active .round-link{transform:none}
.round-link svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.direction:hover .round-link svg{transform:translateX(4px)}}

/* Product cards */
.product{transition:box-shadow .5s ease,border-color .5s ease}
.product:hover{box-shadow:0 30px 70px -40px rgba(0,75,155,.3);border-color:#d6e3ee}
.product-image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thumb{transition:opacity .25s,border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.thumb:hover{opacity:1;transform:translateY(-2px)}
summary{transition:color .25s}summary:hover{color:var(--blue)}
summary::after{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
details[open]>summary::after{transform:rotate(180deg)}
details[open]>summary~*{animation:detailsIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes detailsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Audience and document tiles: a blue line runs along the top on hover */
.audience-item,.doc{position:relative}
.audience-item::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.audience-item:hover::before{transform:scaleX(1)}
.audience-item svg,.doc>svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.audience-item:hover svg{transform:translateY(-3px)}
.doc{transition:border-color .3s,background-color .3s}
.doc:hover{border-color:#b9cfdf;background-color:#fbfdff}
.doc:hover>svg{transform:translateY(-3px) rotate(-4deg)}

/* Steps: the top line fills with brand blue as you scroll (driven by --p) */
.step{position:relative}
.step::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:left}

/* Floating WhatsApp: a calm ring every few seconds */
.floating-wa{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.floating-wa:hover{transform:scale(1.07);background:#003b7c}
.floating-wa::before,.floating-wa::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--cyan);opacity:0;pointer-events:none;animation:waPulse 4.8s cubic-bezier(.2,.6,.3,1) infinite 2.5s}
.floating-wa::after{animation-delay:3.1s}
@keyframes waPulse{0%{transform:scale(1);opacity:0}6%{opacity:.55}45%,100%{transform:scale(1.75);opacity:0}}

/* Gallery dialog opens softly */
.gallery-dialog[open]{animation:dialogIn .45s cubic-bezier(.2,.7,.2,1)}
.gallery-dialog[open]::backdrop{animation:backdropIn .4s ease}
@keyframes dialogIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.gallery-controls button,.gallery-close{transition:background-color .25s,border-color .25s}
.gallery-controls button:hover,.gallery-close:hover{background:#eef5fa;border-color:#b9cfdf}

@media (max-width:650px){
  .drinks-visual>.drinks-ornament{width:72%}
  .hero-glow{left:8%;top:-30%;width:70%}
}

/* Layered logo: mark + wordmark never change; only the subtitle cross-fades with the language */
.logo{position:relative;display:block;width:100%;aspect-ratio:830/308}
.brand .logo img,.footer-brand .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.logo-sub{transition:opacity .3s ease}
.logo-sub{opacity:0}
html[lang=ru] .logo-sub-ru,html[lang=kk] .logo-sub-kk{opacity:1}

/* no hover effects while scrolling (see b2b-motion.js) — cards sliding under a still cursor no longer zoom/lift for a moment */
html.is-scrolling .direction,html.is-scrolling .product,html.is-scrolling .product-visual,html.is-scrolling .drink,html.is-scrolling .drink-image{pointer-events:none}
/* the partner button inside a product card is revealed by the animation; its hover lift must not lag that animation */
.product-copy .product-cta{transition:background .2s}