/* ==============================================
ANIMATIONS & SPECIAL EFFECTS
============================================== */
/* Keyframe Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes twinkle {
0% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0.5;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(184, 155, 95, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(184, 155, 95, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(184, 155, 95, 0);
}
}
@keyframes snowfall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
@keyframes glow {
0%, 100% {
text-shadow: 0 0 5px var(--antique-gold), 0 0 10px var(--antique-gold), 0 0 15px var(--antique-gold);
}
50% {
text-shadow: 0 0 10px var(--antique-gold), 0 0 20px var(--antique-gold), 0 0 30px var(--antique-gold);
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -15px, 0);
}
70% {
transform: translate3d(0, -7px, 0);
}
90% {
transform: translate3d(0, -2px, 0);
}
}
/* Festive Cursor Effect */
.festive-cursor {
position: fixed;
pointer-events: none;
z-index: 9999;
width: 20px;
height: 20px;
background: radial-gradient(circle, var(--antique-gold), transparent);
border-radius: 50%;
animation: sparkle 2s infinite;
}
/* Smooth Scroll Enhancement */
html {
scroll-behavior: smooth;
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(184, 155, 95, 0.3);
border-radius: 50%;
border-top-color: var(--antique-gold);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Form Validation Animations */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
border-color: var(--muted-red);
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
border-color: var(--muted-blue);
}
/* Success Animation */
.success-message {
background: rgba(95, 135, 184, 0.1);
color: var(--muted-blue);
padding: var(--spacing-sm);
border-radius: var(--radius-sm);
margin-top: var(--spacing-sm);
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Parallax Effect */
.parallax {
transform: translateZ(0);
will-change: transform;
}
/* Interactive Elements */
.interactive {
cursor: pointer;
transition: var(--transition-smooth);
}
.interactive:hover {
transform: translateY(-2px);
}
/* Service Card Hover Enhancements */
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(184, 155, 95, 0.1) 0%, rgba(42, 75, 58, 0.1) 100%);
opacity: 0;
transition: var(--transition-smooth);
border-radius: var(--radius-lg);
pointer-events: none;
}
.service-card:hover::before {
opacity: 1;
}
/* Section Reveal Animation */
.section-reveal {
opacity: 0;
transform: translateY(50px);
transition: var(--transition-smooth);
}
.section-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* Festive Border Animation */
.festive-border {
position: relative;
overflow: hidden;
}
.festive-border::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(184, 155, 95, 0.3),
transparent);
animation: borderShine 3s infinite;
}
@keyframes borderShine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Snowflake Animation */
.snowflake {
position: absolute;
color: var(--antique-gold);
font-size: 14px;
animation: snowfall linear infinite;
pointer-events: none;
}
/* Countdown Number Animation */
.countdown-number {
animation: countdownPulse 1s infinite;
}
@keyframes countdownPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
text-shadow: 0 0 10px var(--antique-gold);
}
}
/* Logo Glow Effect */
.logo-glow {
filter: drop-shadow(0 0 10px rgba(184, 155, 95, 0.5));
animation: logoShimmer 4s infinite;
}
@keyframes logoShimmer {
0%, 100% {
filter: drop-shadow(0 0 5px rgba(184, 155, 95, 0.3));
}
50% {
filter: drop-shadow(0 0 15px rgba(184, 155, 95, 0.8));
}
}
/* Header Scroll Effect */
.header.scrolled {
background: rgba(253, 253, 252, 0.98);
box-shadow: 0 2px 20px rgba(184, 155, 95, 0.1);
}
/* Navigation Active State */
.nav-link.active {
color: var(--antique-gold);
}
.nav-link.active::after {
width: 100%;
}
/* Button Click Effect */
.submit-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.submit-btn:active::after {
width: 300px;
height: 300px;
}
/* Form Focus Enhancement */
.form-group input:focus + label,
.form-group textarea:focus + label {
color: var(--antique-gold);
transform: translateY(-2px);
transition: var(--transition-fast);
}
/* Mobile Optimizations */
@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;
}
}
/* Performance Optimizations */
.service-card,
.stat-item,
.submit-btn {
will-change: transform;
}
/* High Performance Animations */
.countdown-number {
will-change: transform, text-shadow;
}
.service-icon {
will-change: transform, background-color;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.hero-logo {
animation: none;
}
.countdown-number {
animation: none;
}
.snowflake {
display: none;
}
}
/* Print Styles */
@media print {
.theme-toggle,
#snowCanvas,
.festive-cursor {
display: none !important;
}
* {
animation: none !important;
transition: none !important;
}
}