/*========================================================= NIC KERALA ONAM CELEBRATION 2026 animations.css PART 1 =========================================================*/ /*========================================================= GLOBAL VARIABLES =========================================================*/ :root { --ease: cubic-bezier(.22, .61, .36, 1); } /*========================================================= HERO ENTRY =========================================================*/ .heroContent { opacity: 0; transform: translateY(60px); animation: heroFadeUp 1.4s var(--ease) forwards; animation-delay: .3s; } .tag { opacity: 0; animation: fadeIn .8s ease forwards; animation-delay: .5s; } .heroContent h3 { opacity: 0; animation: slideDown .9s ease forwards; animation-delay: .8s; } .heroContent h1 { opacity: 0; transform: scale(.85); animation: zoomIn 1s var(--ease) forwards; animation-delay: 1s; } .heroContent h2 { opacity: 0; animation: slideUp 1s ease forwards; animation-delay: 1.15s; } .heroContent p { opacity: 0; animation: fadeIn 1.2s ease forwards; animation-delay: 1.35s; } .heroButtons { opacity: 0; animation: fadeIn 1.2s ease forwards; animation-delay: 1.55s; } .heroInfo { opacity: 0; animation: fadeIn 1.2s ease forwards; animation-delay: 1.8s; } /*========================================================= SUN =========================================================*/ .sun { animation: sunGlow 5s ease-in-out infinite, sunFloat 10s ease-in-out infinite; } /*========================================================= CLOUDS =========================================================*/ .cloud { animation: cloudMove linear infinite; } .cloud1 { animation-duration: 42s; } .cloud2 { animation-duration: 56s; } .cloud3 { animation-duration: 48s; } /*========================================================= TREES =========================================================*/ .treeLeft { transform-origin: bottom center; animation: treeSwingLeft 6s ease-in-out infinite; } .treeRight { transform-origin: bottom center; animation: treeSwingRight 6s ease-in-out infinite; } /*========================================================= LAMPS =========================================================*/ .lamp { animation: lampFloat 4s ease-in-out infinite; } .lamp img { animation: lampGlow 2.5s ease-in-out infinite; } /*========================================================= POOKALAM =========================================================*/ .pookalam { animation: rotatePookalam 70s linear infinite; } .ring { animation: pulseRing 5s ease-in-out infinite; } .one { animation-delay: 0s; } .two { animation-delay: .5s; } .three { animation-delay: 1s; } .four { animation-delay: 1.5s; } /*========================================================= BIRDS =========================================================*/ .birds { animation: birdsFly 18s linear infinite; } /*========================================================= BUTTONS =========================================================*/ .primaryButton:hover { animation: buttonPulse .8s ease; } .secondaryButton:hover { animation: buttonGlow 1.2s ease infinite; } /*========================================================= HERO INFO =========================================================*/ .heroInfo div { animation: floatCard 5s ease-in-out infinite; } .heroInfo div:nth-child(2) { animation-delay: .6s; } .heroInfo div:nth-child(3) { animation-delay: 1.2s; } /*========================================================= SECTION REVEAL =========================================================*/ .sectionTitle { animation: fadeUp both; animation-timeline: view(); animation-range: entry 10% cover 35%; } .highlightCard, .menuCard, .galleryItem, .aboutText, .aboutArtwork, .countdownBox { animation: fadeScale both; animation-timeline: view(); animation-range: entry 15% cover 35%; } /*========================================================= FLOATING =========================================================*/ .aboutArtwork img { animation: artworkFloat 6s ease-in-out infinite; } .highlightCard:nth-child(even) { animation-delay: .2s; } .galleryItem:nth-child(2) { animation-delay: .2s; } .galleryItem:nth-child(3) { animation-delay: .4s; } .galleryItem:nth-child(4) { animation-delay: .6s; } /*========================================================= KEYFRAMES =========================================================*/ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } @keyframes zoomIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } } @keyframes sunGlow { 0%, 100% { box-shadow: 0 0 90px #FFD54F, 0 0 180px rgba(255, 213, 79, .5); } 50% { box-shadow: 0 0 130px #FFD54F, 0 0 260px rgba(255, 213, 79, .85); } } @keyframes sunFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /*========================================================= NIC KERALA ONAM CELEBRATION 2026 animations.css PART 2 =========================================================*/ /*========================================================= CLOUD MOVEMENT =========================================================*/ @keyframes cloudMove { 0% { transform: translateX(-250px); } 100% { transform: translateX(calc(100vw + 350px)); } } /*========================================================= TREE SWAY =========================================================*/ @keyframes treeSwingLeft { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(-2deg); } } @keyframes treeSwingRight { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(2deg); } } /*========================================================= LAMP =========================================================*/ @keyframes lampFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes lampGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 213, 79, .4)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 213, 79, .95)); } } /*========================================================= POOKALAM =========================================================*/ @keyframes rotatePookalam { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes pulseRing { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.15); transform: scale(1.02); } } /*========================================================= BIRDS =========================================================*/ @keyframes birdsFly { 0% { transform: translateX(-180px) translateY(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateX(50vw) translateY(-20px); } 100% { transform: translateX(120vw) translateY(15px); opacity: 0; } } /*========================================================= FLOATING CARDS =========================================================*/ @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes artworkFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } } /*========================================================= BUTTON EFFECTS =========================================================*/ @keyframes buttonPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes buttonGlow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 213, 79, 0); } 50% { box-shadow: 0 0 25px rgba(255, 213, 79, .6); } } /*========================================================= REVEAL ANIMATIONS =========================================================*/ @keyframes fadeUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeScale { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /*========================================================= GALLERY =========================================================*/ .galleryItem:hover { animation: galleryBounce .45s ease; } @keyframes galleryBounce { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } } /*========================================================= ICON FLOAT =========================================================*/ .highlightCard .icon { animation: iconFloat 4s ease-in-out infinite; } .highlightCard:nth-child(2) .icon { animation-delay: .5s; } .highlightCard:nth-child(3) .icon { animation-delay: 1s; } .highlightCard:nth-child(4) .icon { animation-delay: 1.5s; } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /*========================================================= NIC KERALA ONAM CELEBRATION 2026 animations.css PART 3 (FINAL) =========================================================*/ /*========================================================= FLOATING PETALS =========================================================*/ .petal { position: absolute; pointer-events: none; will-change: transform, opacity; animation-name: petalFall; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes petalFall { 0% { transform: translate3d(0, -80px, 0) rotate(0deg); opacity: 1; } 25% { transform: translate3d(30px, 25vh, 0) rotate(120deg); } 50% { transform: translate3d(-25px, 50vh, 0) rotate(240deg); } 75% { transform: translate3d(40px, 75vh, 0) rotate(360deg); } 100% { transform: translate3d(-20px, 110vh, 0) rotate(520deg); opacity: 0; } } /*========================================================= GOLD PARTICLES =========================================================*/ .goldParticle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFD54F; box-shadow: 0 0 12px #FFD54F; animation: goldFloat linear infinite; } @keyframes goldFloat { from { transform: translateY(100vh) scale(.3); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-120px) scale(1.4); opacity: 0; } } /*========================================================= CURSOR GLOW =========================================================*/ #cursorGlow { animation: cursorPulse 2s ease-in-out infinite; } @keyframes cursorPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.5); } } /*========================================================= RIPPLE =========================================================*/ .ripple { position: absolute; border-radius: 50%; pointer-events: none; animation: ripple .7s ease forwards; border: 2px solid rgba(255, 255, 255, .75); } @keyframes ripple { from { width: 0; height: 0; opacity: 1; } to { width: 180px; height: 180px; margin-left: -90px; margin-top: -90px; opacity: 0; } } /*========================================================= SHIMMER EFFECT =========================================================*/ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; transform: skewX(-25deg); background: linear-gradient(transparent, rgba(255, 255, 255, .65), transparent); animation: shimmerMove 3s infinite; } @keyframes shimmerMove { to { left: 170%; } } /*========================================================= REUSABLE ANIMATION CLASSES =========================================================*/ .fade-in { animation: fadeIn .8s ease both; } .slide-up { animation: slideUp .8s ease both; } .slide-down { animation: slideDown .8s ease both; } .zoom-in { animation: zoomIn .8s ease both; } .float { animation: floatCard 5s ease-in-out infinite; } .glow { animation: buttonGlow 2s infinite; } .rotate { animation: rotatePookalam 50s linear infinite; } /*========================================================= HOVER ENHANCEMENTS =========================================================*/ .menuCard:hover { animation: buttonPulse .45s ease; } .highlightCard:hover .icon { animation: iconFloat .8s ease; } .galleryItem:hover img { animation: zoomIn .45s ease; } /*========================================================= PRELOADER EXIT =========================================================*/ #loader.hide { animation: loaderHide .8s ease forwards; } @keyframes loaderHide { to { opacity: 0; visibility: hidden; } } /*========================================================= ACCESSIBILITY =========================================================*/ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }