/* ========================================= BlueCrest Estates Animation Styles ========================================= */ /* ========================= FADE IN ========================= */ .fade-in { opacity: 0; animation: fadeIn 1s ease forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Loading dots – Brand Blue */ .loader-dots { display: flex; gap: 10px; } .loader-dots span { width: 12px; height: 12px; border-radius: 50%; background: #0A3D91; /* your brand blue */ animation: dots 1.4s infinite ease-in-out both; } .loader-dots span:nth-child(1) { animation-delay: -0.32s; } .loader-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes dots { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } } /* ========================= FADE UP ========================= */ .fade-up { opacity: 0; transform: translateY(40px); animation: fadeUp 1s ease forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* ========================= FADE DOWN ========================= */ .fade-down { opacity: 0; transform: translateY(-40px); animation: fadeDown 1s ease forwards; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } /* ========================= FADE LEFT ========================= */ .fade-left { opacity: 0; transform: translateX(60px); animation: fadeLeft 1s ease forwards; } @keyframes fadeLeft { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } /* ========================= FADE RIGHT ========================= */ .fade-right { opacity: 0; transform: translateX(-60px); animation: fadeRight 1s ease forwards; } @keyframes fadeRight { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } /* ========================= SCALE IN ========================= */ .scale-in { opacity: 0; transform: scale(0.92); animation: scaleIn 0.9s ease forwards; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ========================= FLOAT ========================= */ .float { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } /* ========================= PULSE ========================= */ .pulse-soft { animation: pulseSoft 2s infinite; } @keyframes pulseSoft { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.92; } 100% { transform: scale(1); opacity: 1; } } /* ========================= SPIN ========================= */ .spin { animation: spin 1.2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================= SHIMMER ========================= */ .shimmer { position: relative; overflow: hidden; } .shimmer::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent ); animation: shimmer 2.4s infinite; } @keyframes shimmer { 100% { left: 120%; } } /* ========================= GLOW ========================= */ .glow { animation: glow 2.5s ease-in-out infinite; } @keyframes glow { 0% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); } 50% { box-shadow: 0 0 35px rgba(212, 175, 55, 0.25); } 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); } } /* ========================= BOUNCE ========================= */ .bounce-soft { animation: bounceSoft 2s infinite; } @keyframes bounceSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ========================= BUTTON HOVER ========================= */ .hover-lift { transition: transform 0.35s ease, box-shadow 0.35s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } /* ========================= IMAGE ZOOM ========================= */ .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.6s ease; } .image-zoom:hover img { transform: scale(1.08); } /* ========================= CARD HOVER ========================= */ .card-hover { transition: transform 0.35s ease, box-shadow 0.35s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); } /* ========================= UNDERLINE ANIMATION ========================= */ .link-underline { position: relative; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: #D4AF37; transition: width 0.35s ease; } .link-underline:hover::after { width: 100%; } /* ========================= LOADER DOTS ========================= */ .loader-dots { display: flex; gap: 10px; } .loader-dots span { width: 12px; height: 12px; border-radius: 50%; background: #D4AF37; animation: dots 1.4s infinite ease-in-out both; } .loader-dots span:nth-child(1) { animation-delay: -0.32s; } .loader-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes dots { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* ========================= MARQUEE ========================= */ .marquee { overflow: hidden; white-space: nowrap; } .marquee-content { display: inline-block; animation: marquee 18s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================= BLUR IN ========================= */ .blur-in { opacity: 0; filter: blur(12px); animation: blurIn 1s ease forwards; } @keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } } /* ========================= ROTATE IN ========================= */ .rotate-in { opacity: 0; transform: rotate(-8deg) scale(0.92); animation: rotateIn 0.9s ease forwards; } @keyframes rotateIn { from { opacity: 0; transform: rotate(-8deg) scale(0.92); } to { opacity: 1; transform: rotate(0deg) scale(1); } } /* ========================= STAGGER DELAYS ========================= */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; } /* ========================= SMOOTH SCROLL ========================= */ html { scroll-behavior: smooth; } /* ========================= REDUCE MOTION ========================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================= END OF FILE ========================================= */