/* ═══════════════════════════════════════════════════════ SUMADHURA ELYSIUM — ENTRY ANIMATIONS (FIXED) ═══════════════════════════════════════════════════════ */ /* ─── KEYFRAMES ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeLeft { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeRight { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes popIn { from { opacity: 0; transform: scale(0.7) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes floatUpLoop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes borderPulse { 0%, 100% { border-color: rgba(201, 162, 74, 0.3); } 50% { border-color: rgba(201, 162, 74, 0.7); } } /* ─── REDUCED MOTION — always first ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ═══════════════════════════════════════════════════════ 1. NAV — slides down on load ═══════════════════════════════════════════════════════ */ nav.main-nav { animation: fadeDown 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; } /* ═══════════════════════════════════════════════════════ 2. HERO — plays on page load, no observer needed ═══════════════════════════════════════════════════════ */ .hero-bg { animation: scaleIn 2.6s cubic-bezier(0.4, 0, 0.2, 1) both; } .hero-eyebrow { opacity: 0; animation: fadeDown 0.7s ease 0.4s forwards; } .hero-title { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards; } .hero-script { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.78s forwards; } .hero-subtitle { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.94s forwards; } .hero-desc { opacity: 0; animation: fadeUp 0.75s ease 1.15s forwards; } .hero-ctas { opacity: 0; animation: fadeUp 0.7s ease 1.35s forwards; } /* ═══════════════════════════════════════════════════════ 3. SCROLL-TRIGGERED — base hidden state Only applied when JS confirms observer support. The .js-anim class is added to by the script. ═══════════════════════════════════════════════════════ */ /* Without JS or observer, everything is visible */ .anim { opacity: 1; transform: none; } /* With JS: elements start hidden */ .js-anim .anim { opacity: 0; will-change: opacity, transform; transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); } .js-anim .anim.anim--up { transform: translateY(30px); } .js-anim .anim.anim--left { transform: translateX(44px); } .js-anim .anim.anim--right { transform: translateX(-44px); } .js-anim .anim.anim--scale { transform: scale(0.93); } /* Revealed state */ .js-anim .anim.in { opacity: 1; transform: none; } /* Delay utilities — set via data-delay attribute in JS */ .js-anim .anim[data-delay="1"].in { transition-delay: 0.08s; } .js-anim .anim[data-delay="2"].in { transition-delay: 0.16s; } .js-anim .anim[data-delay="3"].in { transition-delay: 0.24s; } .js-anim .anim[data-delay="4"].in { transition-delay: 0.32s; } .js-anim .anim[data-delay="5"].in { transition-delay: 0.40s; } .js-anim .anim[data-delay="6"].in { transition-delay: 0.48s; } .js-anim .anim[data-delay="7"].in { transition-delay: 0.56s; } .js-anim .anim[data-delay="8"].in { transition-delay: 0.64s; } /* ═══════════════════════════════════════════════════════ 4. SECTION-SPECIFIC EXTRAS (non-visibility — safe always) ═══════════════════════════════════════════════════════ */ /* Play button floats after video card appears */ .video-thumb.in .play-btn { animation: floatUpLoop 3s ease-in-out 0.8s infinite; } /* Form border pulses gently once visible */ .contact-form-wrap.in { animation: borderPulse 4s ease-in-out 1s infinite; } /* Map pins spring in — handled via JS popIn animation class */ .map-pin.pin-animate { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Stat accent line sweeps out */ .js-anim .stat-accent { width: 0 !important; display: inline-block; transition: width 0.5s ease 0.5s; } .js-anim .anim.in~.stat-accent, .js-anim .stat-card.in .stat-accent { width: 12px !important; }