/* =====================================================
   ANIMATSIYALAR (style.css ustiga qo'shiladi)
   ===================================================== */

/* Skroll indikatori */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--brand-l),var(--brand));z-index:50;transition:width .1s linear}

/* Header skrolda ixchamlashadi */
.header{transition:box-shadow .3s,background .3s}
.header__in{transition:height .3s}
.header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.08)}
.header.scrolled .header__in{height:60px}

/* Hero kirish animatsiyasi */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
.js .hero__text>*{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero__text>*:nth-child(1){animation-delay:.1s}
.js .hero__text>*:nth-child(2){animation-delay:.25s}
.js .hero__text>*:nth-child(3){animation-delay:.4s}
.js .hero__text>*:nth-child(4){animation-delay:.55s}
.js .hero__logo{animation:slideIn 1.1s .3s cubic-bezier(.2,.7,.2,1) backwards}
.js .strip{animation:rise 1s .8s both}
.hero__logo{position:relative;transition:transform .2s ease-out}
.hero__logo::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(79,138,59,.35),transparent);z-index:-1;animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15);opacity:.6}}

/* Sarlavhadagi yaltirovchi so'z */
.hero h1 em{background:linear-gradient(100deg,var(--brand-l) 20%,#d6f0c4 45%,var(--brand-l) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-250% 0}}

/* Suzuvchi chevronlar (logotip motivi) */
.chev{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.chev i{position:absolute;bottom:-140px;width:60px;height:100px;background:rgba(79,138,59,.16);clip-path:polygon(0 0,50% 30%,100% 0,100% 70%,50% 100%,0 70%);animation:drift 14s linear infinite}
.chev i:nth-child(1){left:6%;animation-duration:16s}
.chev i:nth-child(2){left:22%;width:40px;height:66px;animation-duration:11s;animation-delay:-4s}
.chev i:nth-child(3){left:44%;animation-duration:18s;animation-delay:-9s}
.chev i:nth-child(4){left:62%;width:34px;height:56px;animation-duration:10s;animation-delay:-2s}
.chev i:nth-child(5){left:78%;width:80px;height:130px;animation-duration:20s;animation-delay:-12s}
.chev i:nth-child(6){left:92%;width:44px;height:72px;animation-duration:13s;animation-delay:-6s}
@keyframes drift{to{transform:translateY(-900px) rotate(25deg);opacity:0}}

/* Tugma yaltirashi */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:glint 3.8s ease-in-out infinite}
.btn--ghost::after,.btn--sm::after{display:none}
@keyframes glint{0%,60%{left:-80%}100%{left:140%}}

/* Marquee */
.marquee{background:var(--brand);color:#fff;overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee__track{display:inline-flex;animation:marquee 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:18px;padding:0 26px;position:relative}
.marquee span::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Reveal variantlari */
.js .reveal.from-left{transform:translateX(-50px)}
.js .reveal.from-right{transform:translateX(50px)}
.js .reveal.zoom{transform:translateY(30px) scale(.94)}
.js .reveal.in{transform:none}

/* Kartalar: 3D tilt + kursor yorug'ligi */
.card{will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(79,138,59,.16),transparent 60%)}
.card:hover::before{opacity:1}
.card.tilting{transition:box-shadow .25s,border-color .25s}

/* Panel: hoverda qatlamlar ajraladi, penopoliuretan harakatlanadi */
.visual--panel .layer{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .visual--panel .layer:first-child{transform:skewX(-18deg) translateY(-14px)}
.card:hover .visual--panel .layer:last-child{transform:skewX(-18deg) translateY(14px)}
.visual--panel .layer.foam{background-size:48px 100%;animation:foam 3s linear infinite}
@keyframes foam{to{background-position:48px 0}}

/* Eshik: hoverda ochiladi */
.door{perspective:400px;background:linear-gradient(#e9eee8,#b9c2b8)}
.door::after{content:"";position:absolute;inset:9px;background:var(--dark);border-radius:2px;z-index:0}
.door span{position:relative;z-index:1;transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door i{z-index:2;transition:opacity .4s}
.card:hover .door span{transform:rotateY(-68deg)}
.card:hover .door i{opacity:0}

/* Agregat */
.unit{animation:hum 2.4s ease-in-out infinite}
@keyframes hum{50%{transform:translateY(-3px)}}
.card:hover .fan{animation-duration:.6s}

/* Afzalliklar */
.adv div{position:relative;overflow:hidden}
.adv div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--brand);transition:width .4s}
.adv div:hover::after{width:100%}
.adv div:hover em{display:inline-block;animation:pop .5s}
@keyframes pop{50%{transform:scale(1.25) rotate(-4deg)}}

/* Jarayon */
.steps b{transition:transform .3s}
.steps li:hover b{transform:scale(1.15)}
.js .steps li.in b{animation:ring 2.4s ease-out 1}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(79,138,59,.6)}100%{box-shadow:0 0 0 22px rgba(79,138,59,0)}}
.steps li::before{animation:dash 1s linear infinite}
@keyframes dash{to{background-position:12px 0}}

/* Loyihalar, hamkorlar, statistika */
.project i{display:inline-block;transition:transform .4s}
.project:hover i{transform:scale(1.3) rotate(-8deg)}
.stats div{transition:.25s}
.stats div:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.strip div{transition:background .25s}
.strip div:hover{background:var(--alt)}

/* CTA shakllari */
.cta::before{animation:sweep 7s ease-in-out infinite alternate}
.cta::after{animation:sweep 5s ease-in-out infinite alternate-reverse}
@keyframes sweep{from{transform:skewX(-20deg)}to{transform:skewX(-20deg) translateX(-90px)}}

/* Forma */
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 6px 18px rgba(79,138,59,.18);transform:translateY(-2px)}
.form input,.form select,.form textarea{transition:box-shadow .2s,transform .2s}
.form__ok{animation:rise .5s}

/* Yuqoriga tugmasi */
.totop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s;z-index:30}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--brand-d)}

/* Footer logotipi */
.footer__logo img{transition:transform .4s}
.footer__logo:hover img{transform:scale(1.08) rotate(-3deg)}

@media(prefers-reduced-motion:reduce){
  .chev i,.marquee__track,.btn::after,.hero h1 em,.cta::before,.cta::after,.unit,.fan,.steps li::before,.hero__logo::before,.visual--panel .layer.foam,.hero__logo{animation:none!important}
  .js .hero__text>*,.js .hero__logo,.js .strip{opacity:1;animation:none}
}
@media(max-width:820px){.hero__logo::before{display:none}}

/* Hamkorlar logotiplari */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.partner{display:grid;place-items:center;min-height:104px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;font-weight:600;color:var(--muted);transition:transform .25s,box-shadow .25s,border-color .25s}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-l)}
.partner img{display:block;max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s,transform .3s}
.partner:hover img{filter:none;opacity:1;transform:scale(1.06)}
.partner.has-logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.form__err{color:#b3261e;font-weight:600;animation:rise .5s}

/* Hamkorlar: o'ngdan chapga uzluksiz harakatlanuvchi logotiplar */
.logos{overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos__track{display:flex;width:max-content;animation:logos 38s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__group{display:flex;gap:22px;padding-right:22px}
@keyframes logos{to{transform:translateX(-50%)}}
.logo-card{flex:none;width:200px;height:120px;margin:0;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.logo-card img{display:block;width:100%;height:100%;object-fit:cover}
.logo-card--text{font-family:var(--display);text-transform:uppercase;font-size:28px;letter-spacing:.06em;color:var(--brand-d);background:var(--alt)}
.logo-card:hover{transform:translateY(-6px) scale(1.05);box-shadow:var(--shadow)}
@media(max-width:600px){.logo-card{width:160px;height:96px}.logos__track{animation-duration:30s}}
@media(prefers-reduced-motion:reduce){.logos{overflow-x:auto}.logos__track{animation:none}}