/* * home-animations.css * Animatii premium la scroll — sub-elemente per sectiune. * Lucreaza alaturi de home-premium-motion.css si JS-ul IntersectionObserver. * Animeaza: h2, p, span-etichete, articole, butoane, cta-uri, form. */ :root { --ha-ease: cubic-bezier(.16, 1, .3, 1); --ha-ease-back: cubic-bezier(.34, 1.56, .64, 1); --ha-gold: rgba(201, 166, 70, .55); } /* ============================================================ * 1. SECTION HEAD — h2 si p in cadrul .section-head.home-motion-visible * ============================================================ */ html.home-motion-ready .section-head.home-motion-visible h2 { animation: haHeadingReveal .88s var(--ha-ease) 80ms both; } html.home-motion-ready .section-head.home-motion-visible p { animation: haParaReveal .72s var(--ha-ease) 200ms both; } @keyframes haHeadingReveal { 0% { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(9px); } 55% { opacity: 1; transform: translateY(-4px) scale(1.005); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes haParaReveal { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ============================================================ * 2. BENEFITS STRIP — h2 si p din fiecare article * ============================================================ */ html.home-motion-ready .home-benefits-inner article.home-motion-visible h2 { animation: haBenefitTitle .56s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 160ms) both; } html.home-motion-ready .home-benefits-inner article.home-motion-visible p { animation: haBenefitDesc .52s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 220ms) both; } @keyframes haBenefitTitle { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @keyframes haBenefitDesc { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ * 3. HOME USE HEAD — eticheta span, h2, p cu stagger individual * ============================================================ */ html.home-motion-ready .home-use-head > span.home-motion-visible { animation: haLabelIn .6s var(--ha-ease) 40ms both; } html.home-motion-ready .home-use-head > h2.home-motion-visible { animation: haHeadingReveal .88s var(--ha-ease) 90ms both; } html.home-motion-ready .home-use-head > p.home-motion-visible { animation: haParaReveal .72s var(--ha-ease) 200ms both; } @keyframes haLabelIn { from { opacity: 0; transform: translateY(8px) scaleX(.88); letter-spacing: .22em; } to { opacity: 1; transform: translateY(0) scaleX(1); letter-spacing: 0; } } /* ============================================================ * 4. HOME USE CARDS — h3 si p din card-body * ============================================================ */ html.home-motion-ready .home-use-card.home-motion-visible .home-use-card-body h3 { animation: haCardTitleIn .6s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 280ms) both; } html.home-motion-ready .home-use-card.home-motion-visible .home-use-card-body p { animation: haParaReveal .55s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 360ms) both; } @keyframes haCardTitleIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ * 5. WHY LAMER — h2 si p din content (nu sunt direct home-motion-item) * ============================================================ */ html.home-motion-ready .why-lamer-content > h2.home-motion-visible { animation: haHeadingReveal .92s var(--ha-ease) 90ms both; } html.home-motion-ready .why-lamer-content > p.home-motion-visible { animation: haParaReveal .75s var(--ha-ease) 220ms both; } /* ============================================================ * 6. WHY LAMER GRID — h3 si p din fiecare article * ============================================================ */ html.home-motion-ready .why-lamer-grid article.home-motion-visible h3 { animation: haBenefitTitle .54s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 180ms) both; } html.home-motion-ready .why-lamer-grid article.home-motion-visible p { animation: haBenefitDesc .52s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 245ms) both; } /* ============================================================ * 7. WHY LAMER ACTIONS — CTA buttons glow reveal * ============================================================ */ html.home-motion-ready .why-lamer-actions.home-motion-visible .btn-primary { animation: haCtaReveal .72s var(--ha-ease-back) 220ms both, haCtaGlow 3.4s ease 2.8s infinite; } html.home-motion-ready .why-lamer-actions.home-motion-visible .why-lamer-link { animation: haParaReveal .6s var(--ha-ease) 340ms both; } @keyframes haCtaReveal { 0% { opacity: 0; transform: translateY(16px) scale(.91); } 65% { opacity: 1; transform: translateY(-3px) scale(1.025); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes haCtaGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 8px rgba(201, 166, 70, .15), 0 12px 32px rgba(201, 166, 70, .14); } } /* ============================================================ * 8. HOME NEWS HEAD — eticheta, h2, p * ============================================================ */ html.home-motion-ready .home-news-head > div > span.home-motion-visible { animation: haLabelIn .6s var(--ha-ease) 40ms both; } html.home-motion-ready .home-news-head > div > h2.home-motion-visible { animation: haHeadingReveal .88s var(--ha-ease) 110ms both; } html.home-motion-ready .home-news-head > div > p.home-motion-visible { animation: haParaReveal .7s var(--ha-ease) 230ms both; } /* ============================================================ * 9. HOME NEWS CARD — titlu si excerpt la reveal * ============================================================ */ html.home-motion-ready .home-news-card.home-motion-visible h3 { animation: haCardTitleIn .58s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 220ms) both; } html.home-motion-ready .home-news-card.home-motion-visible .home-news-body p { animation: haParaReveal .52s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 300ms) both; } /* ============================================================ * 10. CONSTRUCTION VIDEO — action buttons individuale * ============================================================ */ html.home-motion-ready .construction-video-actions.home-motion-visible .btn-primary { animation: haCtaReveal .72s var(--ha-ease-back) 340ms both; } html.home-motion-ready .construction-video-actions.home-motion-visible .btn-outline { animation: haCtaReveal .72s var(--ha-ease-back) 460ms both; } /* ============================================================ * 11. HOME FINAL SECTION — eticheta, h2, p, puncte individuale * ============================================================ */ html.home-motion-ready .home-final-copy > span.home-motion-visible { animation: haLabelIn .62s var(--ha-ease) 40ms both; } html.home-motion-ready .home-final-copy > h2.home-motion-visible { animation: haHeadingReveal .9s var(--ha-ease) 90ms both; } html.home-motion-ready .home-final-copy > p.home-motion-visible { animation: haParaReveal .72s var(--ha-ease) 210ms both; } /* Punctele din home-final-points: stagger per article */ html.home-motion-ready .home-final-points.home-motion-visible article:nth-child(1) { animation: haFinalPoint .6s var(--ha-ease-back) 80ms both; } html.home-motion-ready .home-final-points.home-motion-visible article:nth-child(2) { animation: haFinalPoint .6s var(--ha-ease-back) 165ms both; } html.home-motion-ready .home-final-points.home-motion-visible article:nth-child(3) { animation: haFinalPoint .6s var(--ha-ease-back) 250ms both; } @keyframes haFinalPoint { 0% { opacity: 0; transform: translateY(22px) scale(.92); filter: blur(6px); } 65% { opacity: 1; transform: translateY(-4px) scale(1.02); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ============================================================ * 12. FORM SUBMIT BUTTON — heartbeat gold dupa reveal * (completeaza formFieldIn din home-premium-motion.css) * ============================================================ */ html.home-motion-ready .home-final-form.home-motion-visible .home-final-submit:hover { transform: translateY(-2px); transition: transform .22s var(--ha-ease), box-shadow .22s ease; box-shadow: 0 14px 36px rgba(201, 166, 70, .26); } /* ============================================================ * 13. APARTMENT CARD — titlu la reveal cu stagger * ============================================================ */ html.home-motion-ready .apartment-card.home-motion-visible .apartment-title, html.home-motion-ready .apartment-card.home-motion-visible h2, html.home-motion-ready .apartment-card.home-motion-visible h3 { animation: haCardTitleIn .58s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 260ms) both; } /* ============================================================ * 14. PROOF STATS — shimmer per stat (home-use-proof si construction) * ============================================================ */ html.home-motion-ready .home-use-proof > div.home-motion-visible span, html.home-motion-ready .construction-video-proof article.home-motion-visible span { animation: haStatLabel .5s var(--ha-ease) calc(var(--home-motion-delay, 0ms) + 380ms) both; } @keyframes haStatLabel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ * REDUCED MOTION — dezactiveaza totul * ============================================================ */ @media (prefers-reduced-motion: reduce) { html.home-motion-ready .section-head.home-motion-visible h2, html.home-motion-ready .section-head.home-motion-visible p, html.home-motion-ready .home-benefits-inner article.home-motion-visible h2, html.home-motion-ready .home-benefits-inner article.home-motion-visible p, html.home-motion-ready .home-use-head > span.home-motion-visible, html.home-motion-ready .home-use-head > h2.home-motion-visible, html.home-motion-ready .home-use-head > p.home-motion-visible, html.home-motion-ready .home-use-card.home-motion-visible .home-use-card-body h3, html.home-motion-ready .home-use-card.home-motion-visible .home-use-card-body p, html.home-motion-ready .why-lamer-content > h2.home-motion-visible, html.home-motion-ready .why-lamer-content > p.home-motion-visible, html.home-motion-ready .why-lamer-grid article.home-motion-visible h3, html.home-motion-ready .why-lamer-grid article.home-motion-visible p, html.home-motion-ready .why-lamer-actions.home-motion-visible .btn-primary, html.home-motion-ready .why-lamer-actions.home-motion-visible .why-lamer-link, html.home-motion-ready .home-news-head > div > span.home-motion-visible, html.home-motion-ready .home-news-head > div > h2.home-motion-visible, html.home-motion-ready .home-news-head > div > p.home-motion-visible, html.home-motion-ready .home-news-card.home-motion-visible h3, html.home-motion-ready .home-news-card.home-motion-visible .home-news-body p, html.home-motion-ready .construction-video-actions.home-motion-visible .btn-primary, html.home-motion-ready .construction-video-actions.home-motion-visible .btn-outline, html.home-motion-ready .home-final-copy > span.home-motion-visible, html.home-motion-ready .home-final-copy > h2.home-motion-visible, html.home-motion-ready .home-final-copy > p.home-motion-visible, html.home-motion-ready .home-final-points.home-motion-visible article, html.home-motion-ready .apartment-card.home-motion-visible .apartment-title, html.home-motion-ready .apartment-card.home-motion-visible h2, html.home-motion-ready .apartment-card.home-motion-visible h3, html.home-motion-ready .home-use-proof > div.home-motion-visible span, html.home-motion-ready .construction-video-proof article.home-motion-visible span { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: inherit !important; } html.home-motion-ready .why-lamer-actions.home-motion-visible .btn-primary { box-shadow: none !important; } } @media (hover: none) { html.home-motion-ready .why-lamer-actions.home-motion-visible .btn-primary { animation: haCtaReveal .72s var(--ha-ease-back) 220ms both !important; } html.home-motion-ready .home-final-form.home-motion-visible .home-final-submit:hover { transform: none; box-shadow: none; } }