/* ============================================ Avşarlar İnşaat — Animasiyalar style.css-dən SONRA yüklənir (üst-üstə yazır). Qayda: yalnız transform + opacity animasiya olunur → GPU-da işləyir, reflow/repaint yaratmır, FPS düşmür. ============================================ */ :root { --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: .25s; --dur-base: .45s; --dur-slow: .7s; } /* ============================================ 1. Scroll reveal — elementlər ekrana girəndə açılır .js-anim -ə main.js tərəfindən dərhal əlavə olunur, ona görə JS sönülü olsa hər şey normal görünür. ============================================ */ .js-anim .reveal { opacity: 0; transform: translate3d(0, 22px, 0); will-change: opacity, transform; } .js-anim .reveal--left { transform: translate3d(-26px, 0, 0); } .js-anim .reveal--right { transform: translate3d(26px, 0, 0); } .js-anim .reveal--zoom { transform: scale3d(.94, .94, 1); } .js-anim .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: auto; } /* ============================================ 2. Hero — Ken Burns fonu + mətnin qalxması Fon ayrıca .hero__bg qatındadır ki, zoom mətni dartmasın. ============================================ */ .hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 1.2s var(--ease-out); } /* Qaranlıq gradient fonun ÜSTÜNDƏ qalmalıdır ki, mətn oxunsun */ .hero__slide::before { z-index: 1; } .hero__slide.is-active .hero__bg { animation: hero-kenburns 9s ease-out forwards; } @keyframes hero-kenburns { from { transform: scale(1.02); } to { transform: scale(1.11); } } .hero__slide .container > * { opacity: 0; transform: translate3d(0, 26px, 0); } .hero__slide.is-active .container > * { animation: hero-text-in .8s var(--ease-out) forwards; } .hero__slide.is-active .container > *:nth-child(1) { animation-delay: .15s; } .hero__slide.is-active .container > *:nth-child(2) { animation-delay: .32s; } .hero__slide.is-active .container > *:nth-child(3) { animation-delay: .48s; } @keyframes hero-text-in { to { opacity: 1; transform: none; } } /* h1 altındakı sarı xətt soldan açılır */ .hero__slide .container h1::after { transform: scaleX(0); transform-origin: left; } .hero__slide.is-active .container h1::after { animation: line-grow .7s var(--ease-out) .6s forwards; } @keyframes line-grow { to { transform: scaleX(1); } } /* Aktiv nöqtə uzanır */ .hero__dots button { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); transform-origin: center; } .hero__dots button:hover { transform: scaleY(1.8); } .hero__dots button.is-active { transform: scaleX(1.25); } /* ============================================ 3. Header — scroll-da kölgə, menyu alt xətti ============================================ */ .header { transition: box-shadow var(--dur-base) var(--ease-out); } .header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .28); } .nav a { position: relative; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease-out); } .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; } @media (max-width: 1050px) { .nav a::after { display: none; } } /* ============================================ 4. Düymələr — yaylı qalxma + işıq süzülməsi ============================================ */ .btn { position: relative; overflow: hidden; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .btn--primary:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 10px 24px rgba(232, 163, 23, .35); } .btn:active { transform: translate3d(0, 0, 0); } .btn--primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; } .btn--primary:hover::after { animation: btn-shine .75s var(--ease-out) forwards; } @keyframes btn-shine { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } } /* ============================================ 5. Kartlar — yumşaq qalxma + şəkil zoom-u ============================================ */ .product-card, .service-card, .blog-card, .cat-card, .testi-card { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-out); } .product-card:hover, .service-card:hover, .blog-card:hover, .cat-card:hover, .testi-card:hover { transform: translate3d(0, -6px, 0); } .product-card__img img, .blog-card__img img, .area-card img, .cat-card__img img, .service-card__img img { transition: transform var(--dur-slow) var(--ease-out); } .product-card:hover .product-card__img img, .blog-card:hover .blog-card__img img { transform: scale(1.06); } .area-card:hover img { transform: scale(1.1); } /* Sahə kartında başlıq hover-də bir az qalxır */ .area-card h3 { transition: transform var(--dur-base) var(--ease-out); } .area-card:hover h3 { transform: translate3d(0, -4px, 0); } /* ============================================ 6. Bölmə başlığı — sarı xətt açılır ============================================ */ .js-anim .section__title::after { transform: scaleX(0); transform-origin: left; } .js-anim .section__title.is-in::after, .js-anim .is-in .section__title::after { animation: line-grow .6s var(--ease-out) .2s forwards; } /* ============================================ 7. Statistika — rəqəm sayılanda "pop" edir ============================================ */ .stat { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .stat:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--shadow); } .stat__num.is-counting { animation: stat-pop 1.6s var(--ease-out); } @keyframes stat-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } /* ============================================ 8. Partnyor loqoları ============================================ */ .marquee__item { padding: 12px 16px; /* loqolar kartın içində daha iri oxunsun */ transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .marquee__item:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 8px 22px rgba(26, 31, 43, .12); } /* Loqolar mənbədə vahid monoxrom formata salınıb (eyni kətan, eyni ton), ona görə əlavə boz filtr lazım deyil — sadəcə hover-də tam tündləşir. */ .marquee__logo { width: 100%; height: auto; max-height: 100%; object-fit: contain; opacity: .85; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .marquee__item:hover .marquee__logo { opacity: 1; transform: scale(1.04); } /* ============================================ 9. WhatsApp düyməsi — sakit nəbz ============================================ */ .wa-float { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .wa-float::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #25d366; z-index: -1; animation: wa-pulse 2.6s var(--ease-out) infinite; } .wa-float:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 12px 28px rgba(37, 211, 102, .5); } .wa-float:hover::before { animation-play-state: paused; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* ============================================ 10. Mobil menyu — açılarkən sürüşür ============================================ */ @media (max-width: 1050px) { .nav.is-open a { animation: nav-item-in .35s var(--ease-out) backwards; } .nav.is-open a:nth-child(1) { animation-delay: .03s; } .nav.is-open a:nth-child(2) { animation-delay: .06s; } .nav.is-open a:nth-child(3) { animation-delay: .09s; } .nav.is-open a:nth-child(4) { animation-delay: .12s; } .nav.is-open a:nth-child(5) { animation-delay: .15s; } .nav.is-open a:nth-child(6) { animation-delay: .18s; } @keyframes nav-item-in { from { opacity: 0; transform: translate3d(-12px, 0, 0); } } } /* ============================================ 11. Formalar ============================================ */ .order-form input, .order-form select, .order-form textarea { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .order-form input:focus, .order-form select:focus, .order-form textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(232, 163, 23, .18); } /* ============================================ 12. Hərəkət azaldılması tələb olunursa — hər şey sönür (əlçatanlıq tələbi: prefers-reduced-motion) ============================================ */ @media (prefers-reduced-motion: reduce) { .js-anim .reveal, .js-anim .reveal.is-in, .hero__slide .container > *, .js-anim .section__title::after, .hero__slide .container h1::after { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .hero__bg, .marquee__track, .wa-float::before, .stat__num.is-counting { animation: none !important; } * { transition-duration: .01ms !important; } }