/* =================================================== DariaParsi — animations.css Pure CSS animation layer. All motion respects prefers-reduced-motion at the bottom of this file. =================================================== */ /* ----------------------------------------------- 1. PAGE LOAD FADE-IN ----------------------------------------------- */ body { opacity: 0; animation: bodyFadeIn 0.6s ease forwards; } @keyframes bodyFadeIn { to { opacity: 1; } } /* ----------------------------------------------- 2. NAVBAR — scroll state additions (JS adds .scrolled class — base styles in style.css; here we add the gold border) ----------------------------------------------- */ .navbar.scrolled { border-bottom: 1px solid rgba(201,168,76,0.25); } /* ----------------------------------------------- 3. SCROLL REVEAL — base hidden state JS adds .sr-ready to after DOM ready, preventing flash-of-hidden on slow load. JS adds .sr-visible when element enters view. ----------------------------------------------- */ .sr-ready [data-sr] { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; will-change: transform; } .sr-ready [data-sr].sr-visible { opacity: 1; transform: translateY(0); will-change: auto; } /* Stagger delays for sibling groups */ .sr-ready [data-sr][data-sr-delay="1"] { transition-delay: 0.1s; } .sr-ready [data-sr][data-sr-delay="2"] { transition-delay: 0.2s; } .sr-ready [data-sr][data-sr-delay="3"] { transition-delay: 0.3s; } .sr-ready [data-sr][data-sr-delay="4"] { transition-delay: 0.4s; } .sr-ready [data-sr][data-sr-delay="5"] { transition-delay: 0.5s; } .sr-ready [data-sr][data-sr-delay="6"] { transition-delay: 0.6s; } /* Scale-in variant (about page stats) */ .sr-ready [data-sr="scale"] { transform: scale(0.8); opacity: 0; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.56,0.64,1); } .sr-ready [data-sr="scale"].sr-visible { transform: scale(1); opacity: 1; } /* Slide-from-left variant (quality process steps) */ .sr-ready [data-sr="left"] { transform: translateX(-40px); opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; } .sr-ready [data-sr="left"].sr-visible { transform: translateX(0); opacity: 1; } /* ----------------------------------------------- 4. BUTTONS — hover lift + gold shadow ----------------------------------------------- */ .btn { transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,0.25); } /* Override per-button hovers already in style.css to keep them but add the lift — done via the global rule above */ /* ----------------------------------------------- 5. NAV LINKS — gold underline slides left→right (Overrides the simple width:0→100% in style.css with an explicit left-origin transform) ----------------------------------------------- */ .nav-links a { overflow: hidden; } .nav-links a::after { transform-origin: left center; transform: scaleX(0); transition: transform 0.28s ease !important; width: 100% !important; /* always full-width, controlled by scaleX */ } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* ----------------------------------------------- 6. HERO HEADLINE — word-by-word animation JS splits the headline into words and adds inline transition-delay. ----------------------------------------------- */ .hero-word { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .hero-word.hw-visible { opacity: 1; transform: translateY(0); } .hero-actions { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; } .hero-actions.ha-visible { opacity: 1; transform: translateY(0); } /* ----------------------------------------------- 7. VARIETY PILLS — hover lift + green/gold ----------------------------------------------- */ .variety-pill { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important; } .variety-pill:hover { background: #1B4332 !important; color: #C9A84C !important; border-color: #C9A84C !important; transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } /* ----------------------------------------------- 9. PRODUCT CARDS — hover gold border + lift Hidden CTA button slides up on card hover ----------------------------------------------- */ .product-card { transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important; overflow: hidden; } .product-card:hover { border-color: rgba(201,168,76,0.5) !important; box-shadow: 0 16px 50px rgba(27,67,50,0.15), 0 0 0 1px rgba(201,168,76,0.3) !important; transform: translateY(-6px) !important; } /* Slide-up CTA on card hover */ .product-card .btn-product { transform: translateY(8px); opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease, background 0.25s ease, color 0.25s ease !important; } .product-card:hover .btn-product { transform: translateY(0); opacity: 1; } /* ----------------------------------------------- 11. CONTACT FORM — gold bottom border on focus ----------------------------------------------- */ .form-group { position: relative; } .form-group input, .form-group select, .form-group textarea { border-bottom: 2px solid rgba(27,67,50,0.12) !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; position: relative; z-index: 1; } /* Pseudo gold-line slide effect via box-shadow trick */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-bottom-color: #C9A84C !important; box-shadow: 0 2px 0 0 #C9A84C, 0 0 0 3px rgba(201,168,76,0.08) !important; background: #fff !important; } /* Submit button loading state */ .btn-submit.loading { pointer-events: none; opacity: 0.75; animation: submitPulse 1.2s ease-in-out infinite; } @keyframes submitPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.45; } } /* ----------------------------------------------- 13. CUSTOM CURSOR — gold dot, desktop only ----------------------------------------------- */ .custom-cursor { position: fixed; width: 8px; height: 8px; background: #C9A84C; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.08s linear, opacity 0.3s ease; mix-blend-mode: difference; will-change: left, top; opacity: 0; } .custom-cursor.cursor-visible { opacity: 1; } /* Expand cursor over interactive elements */ .custom-cursor.cursor-hover { transform: translate(-50%, -50%) scale(3); background: rgba(201,168,76,0.6); } /* ----------------------------------------------- 14. CTA / EXTERNAL LINKS — scale on hover ----------------------------------------------- */ .btn-gold:hover, .btn-primary:hover, .whatsapp-link:hover { transform: translateY(-2px) scale(1.02) !important; } /* ----------------------------------------------- TRUST STRIP — count-up number flash ----------------------------------------------- */ .trust-number { transition: color 0.3s ease; } .trust-number.counting { color: #F8F5F0; } /* ----------------------------------------------- ABOUT PAGE — origin stats scale-in (uses data-sr="scale" handled above) ----------------------------------------------- */ /* ----------------------------------------------- QUALITY PAGE — process step connector pulse ----------------------------------------------- */ .process-connector { position: relative; overflow: hidden; } .process-connector::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #C9A84C, transparent); animation: connectorSweep 2.5s ease-in-out infinite; } @keyframes connectorSweep { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* ----------------------------------------------- REDUCED MOTION — disable everything gracefully ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body { animation: none; opacity: 1; } .sr-ready [data-sr] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-word { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-actions { opacity: 1 !important; transform: none !important; } .custom-cursor { display: none !important; } .process-connector::after { display: none; } } /* =================================================== MODERN ENHANCEMENTS v2 UI/UX Pro Max principles: • 150–300ms micro-interactions • transform/opacity only (no layout thrash) • ease-out enter, ease-in exit • stagger 30–50ms per item =================================================== */ /* ----------------------------------------------- HERO PARTICLES ----------------------------------------------- */ .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .hero-particle { position: absolute; border-radius: 50%; background: #C9A84C; pointer-events: none; will-change: transform, opacity; } @keyframes particleFloat { 0% { transform: translate(0, 0) scale(1); opacity: var(--op-lo); } 33% { transform: translate(var(--dx1), var(--dy1)) scale(1.15); opacity: var(--op-hi); } 66% { transform: translate(var(--dx2), var(--dy2)) scale(0.85); opacity: var(--op-lo); } 100%{ transform: translate(0, 0) scale(1); opacity: var(--op-lo); } } /* ----------------------------------------------- HERO GRAIN TEXTURE ----------------------------------------------- */ .hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(248,245,240,0.05) 1px, transparent 1px); background-size: 4px 4px; } /* ----------------------------------------------- HERO EYEBROW — slide up on page load ----------------------------------------------- */ .hero-eyebrow { opacity: 0; transform: translateY(16px); animation: heroEyebrowIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards; } @keyframes heroEyebrowIn { to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------- LOGO MARK — spring appear ----------------------------------------------- */ .logo-mark { animation: logoMarkIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both; } @keyframes logoMarkIn { from { transform: scale(0.5) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } /* ----------------------------------------------- SECTION EYEBROW — subtle glow pulse ----------------------------------------------- */ .section-eyebrow { animation: eyebrowGlow 4s ease-in-out infinite; } @keyframes eyebrowGlow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 18px rgba(201,168,76,0.55); } } /* ----------------------------------------------- WHY CARDS — glassmorphism gold overlay on hover ----------------------------------------------- */ .why-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 65%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .why-card:hover::before { opacity: 1; } .why-card:hover .why-icon { animation: iconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } } /* ----------------------------------------------- CARD TILT — 3D perspective helpers ----------------------------------------------- */ [data-tilt] { transform-style: preserve-3d; will-change: transform; } .tilt-highlight { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 10; border-radius: inherit; } [data-tilt]:hover .tilt-highlight { opacity: 1; } /* ----------------------------------------------- MAGNETIC BUTTON — spring transition ----------------------------------------------- */ [data-magnetic] { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important; } /* ----------------------------------------------- CTA BANNER — animated gradient background ----------------------------------------------- */ .cta-banner { background: linear-gradient(135deg, #1B4332 0%, #0f2d1e 40%, #1e4535 70%, #243a2e 100%) !important; background-size: 300% 300% !important; animation: ctaBgShift 10s ease-in-out infinite; } @keyframes ctaBgShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* CTA banner shimmer line across top */ .cta-banner::before { content: ''; position: absolute; top: 0; left: -100%; right: auto; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent); animation: ctaShimmerLine 4s ease-in-out infinite; } @keyframes ctaShimmerLine { 0% { left: -60%; } 100%{ left: 160%; } } /* ----------------------------------------------- FOOTER — top accent line ----------------------------------------------- */ .footer { position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.4) 50%, transparent 100%); } /* ----------------------------------------------- TRUST NUMBERS — glow on hover ----------------------------------------------- */ .trust-item:hover .trust-number { text-shadow: 0 0 36px rgba(201,168,76,0.7) !important; } /* ----------------------------------------------- VARIETY PILLS — stagger delay ----------------------------------------------- */ .sr-ready .variety-pill:nth-child(1)[data-sr] { transition-delay: 0.04s !important; } .sr-ready .variety-pill:nth-child(2)[data-sr] { transition-delay: 0.11s !important; } .sr-ready .variety-pill:nth-child(3)[data-sr] { transition-delay: 0.18s !important; } .sr-ready .variety-pill:nth-child(4)[data-sr] { transition-delay: 0.25s !important; } /* ----------------------------------------------- PRODUCT CARDS — gradient glow border on hover ----------------------------------------------- */ .product-card { position: relative; } .product-card::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(201,168,76,0.5) 0%, transparent 50%, rgba(201,168,76,0.3) 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: -1; } .product-card:hover::after { opacity: 1; } /* ----------------------------------------------- SCROLL LINE — gold gradient ----------------------------------------------- */ .scroll-line { background: linear-gradient(to bottom, rgba(201,168,76,0.8), transparent) !important; } /* ----------------------------------------------- HERO SUBLINE — fade in after headline words ----------------------------------------------- */ .hero-subline { opacity: 0; transition: opacity 0.6s ease; } .hero-subline.hs-visible { opacity: 1; } /* ----------------------------------------------- WHY ICON — base positioning for animation ----------------------------------------------- */ .why-icon { position: relative; } /* ----------------------------------------------- CONTACT FORM INPUTS — enhanced glow focus ----------------------------------------------- */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: 0 2px 0 0 #C9A84C, 0 0 24px rgba(201,168,76,0.14), 0 0 0 3px rgba(201,168,76,0.08) !important; } /* ----------------------------------------------- PAGE HERO — stagger entrance ----------------------------------------------- */ .sr-ready .page-title[data-sr], .sr-ready .page-subtitle[data-sr] { transition-duration: 0.7s !important; } /* ----------------------------------------------- REDUCED MOTION — disable all new effects ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero-eyebrow { animation: none !important; opacity: 1 !important; transform: none !important; } .logo-mark { animation: none !important; } .section-eyebrow { animation: none !important; text-shadow: none !important; } .cta-banner { animation: none !important; } .cta-banner::before { display: none !important; } .hero-particle { display: none !important; } [data-tilt] { transform: none !important; will-change: auto; } [data-magnetic] { transform: none !important; } .hero-subline { opacity: 1 !important; } }