/* ============================================================= RiumDolomiti — Emoji & Motion FX Drop-in: Pair with: animations.js ============================================================= */ :root { --rd-green-dark: #14532D; --rd-green: #1B6B45; --rd-gold: #C9A84C; --rd-bg-cream: #F3EFE8; --rd-ease-out: cubic-bezier(.2,.8,.2,1); --rd-ease-spring: cubic-bezier(.34,1.56,.64,1); } /* ------------------------------------------------------------- 1. EMOJI WRAPPER BASE Every detected emoji gets .em + a specific class (em-snow, etc.) ------------------------------------------------------------- */ .em { display: inline-block; position: relative; line-height: 1; transform-origin: center; will-change: transform; } /* ------------------------------------------------------------- 2. DEFAULT FLOAT — applied to every emoji not in the override list ------------------------------------------------------------- */ @keyframes rd-emoji-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .em-default { animation: rd-emoji-float 2s ease-in-out infinite; } /* ------------------------------------------------------------- 3. ❄️ SNOW — emoji with falling particles ------------------------------------------------------------- */ .em-snow { animation: rd-emoji-float 3s ease-in-out infinite; } .em-snow .rd-snowp { position: absolute; top: 0; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.9); opacity: 0; pointer-events: none; animation: rd-snow-fall 2.4s linear infinite; } .em-snow .rd-snowp:nth-child(1) { --rd-drift: -10px; animation-delay: 0s; left: 30%; } .em-snow .rd-snowp:nth-child(2) { --rd-drift: 6px; animation-delay: .7s; left: 65%; width: 2px; height: 2px; } .em-snow .rd-snowp:nth-child(3) { --rd-drift: -4px; animation-delay: 1.3s; left: 45%; } .em-snow .rd-snowp:nth-child(4) { --rd-drift: 12px; animation-delay: 1.9s; left: 80%; width: 2px; height: 2px; } @keyframes rd-snow-fall { 0% { transform: translate(-50%, -120%) scale(.5); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translate(calc(-50% + var(--rd-drift, 0)), 180%) scale(1); opacity: 0; } } /* ------------------------------------------------------------- 4. 🔥 FIRE — flickering flame ------------------------------------------------------------- */ @keyframes rd-fire-flicker { 0%,100% { transform: scale(1,1) translateY(0) rotate(-1deg); filter: brightness(1) saturate(1); } 20% { transform: scale(1.06,.96) translateY(-1px) rotate( 2deg); filter: brightness(1.2) saturate(1.1); } 40% { transform: scale(.96,1.08) translateY(-2px) rotate(-2deg); filter: brightness(1.1) saturate(1.05); } 60% { transform: scale(1.04,1.02) translateY(-1px) rotate( 1deg); filter: brightness(1.3) saturate(1.15); } 80% { transform: scale(.98,1.04) translateY(-1px) rotate(-1deg); filter: brightness(1.15) saturate(1.1); } } .em-fire { animation: rd-fire-flicker .55s ease-in-out infinite; transform-origin: bottom center; } /* ------------------------------------------------------------- 5. 🌿 LEAF / NATURE — gentle sway ------------------------------------------------------------- */ @keyframes rd-leaf-sway { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate( 7deg) translateY(-1px); } } .em-leaf { animation: rd-leaf-sway 3.2s ease-in-out infinite; transform-origin: bottom center; } /* ------------------------------------------------------------- 6. 🏔️ MOUNTAIN — parallax (driven by JS via CSS var) ------------------------------------------------------------- */ .em-mountain { transform: translate3d(0, var(--rd-parallax-y, 0px), 0); transition: transform .05s linear; will-change: transform; } /* ------------------------------------------------------------- 7. ⭐ 🌟 STAR — twinkle ------------------------------------------------------------- */ @keyframes rd-star-twinkle { 0%,100% { transform: scale(1) rotate(0); filter: brightness(1) drop-shadow(0 0 0 transparent); opacity: 1; } 30% { transform: scale(1.25) rotate(12deg); filter: brightness(1.6) drop-shadow(0 0 4px rgba(255,230,150,.7)); opacity: .95; } 60% { transform: scale(.92) rotate(-8deg); filter: brightness(.9); opacity: .8; } } .em-star { animation: rd-star-twinkle 1.9s ease-in-out infinite; } .em-star:nth-of-type(2n) { animation-delay: .6s; animation-duration: 2.3s; } .em-star:nth-of-type(3n) { animation-delay: 1.1s; animation-duration: 1.6s; } /* ------------------------------------------------------------- 8. 🍽️ PLATE — rotate on hover ------------------------------------------------------------- */ .em-plate { transition: transform .55s var(--rd-ease-spring); animation: rd-emoji-float 2.8s ease-in-out infinite; } .em-plate:hover, :where(a,button,li,label,.card,[class*="card"],[class*="Card"],[data-hover]):hover .em-plate { transform: rotate(22deg) scale(1.08); animation-play-state: paused; } /* ------------------------------------------------------------- 9. 🎁 GIFT — shake/bounce on hover ------------------------------------------------------------- */ @keyframes rd-gift-shake { 0%,100% { transform: translate(0,0) rotate(0); } 10% { transform: translate(-2px,-3px) rotate(-10deg); } 25% { transform: translate(2px,-2px) rotate( 9deg); } 40% { transform: translate(-2px,-1px) rotate(-7deg); } 55% { transform: translate(2px,-3px) rotate( 6deg); } 70% { transform: translate(-1px,-4px) rotate(-4deg); } 85% { transform: translate(1px,-2px) rotate( 2deg); } } .em-gift { animation: rd-emoji-float 2.4s ease-in-out infinite; transform-origin: center bottom; } .em-gift:hover, :where(a,button,li,label,.card,[class*="card"],[class*="Card"],[data-hover]):hover .em-gift { animation: rd-gift-shake .7s ease-in-out; } /* ------------------------------------------------------------- 10. 🚗 🚌 🚂 TRANSPORT — slide-in from left when in viewport ------------------------------------------------------------- */ .em-transport { opacity: 0; transform: translateX(-60px); } .em-transport.rd-in { animation: rd-transport-slide .9s var(--rd-ease-out) forwards; } @keyframes rd-transport-slide { 0% { opacity: 0; transform: translateX(-60px); } 60% { opacity: 1; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } } /* ------------------------------------------------------------- 11. 👤 👨 👩 PEOPLE — friendly wave ------------------------------------------------------------- */ @keyframes rd-person-wave { 0%,100% { transform: rotate(0); } 10%,30% { transform: rotate(-14deg); } 20%,40% { transform: rotate( 14deg); } 50% { transform: rotate(0); } } .em-person { animation: rd-person-wave 3.5s ease-in-out infinite; transform-origin: bottom center; } /* ------------------------------------------------------------- 12. ✅ CHECK — pop-in ------------------------------------------------------------- */ @keyframes rd-check-pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.35) rotate( 8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } .em-check { opacity: 0; transform: scale(0); } .em-check.rd-in, .em-check.rd-popped { animation: rd-check-pop .55s var(--rd-ease-spring) forwards; } /* ============================================================= GLOBAL FX ============================================================= */ /* ------------------------------------------------------------- FX 1. HERO — drifting fog/clouds Apply:
------------------------------------------------------------- */ .rd-hero { position: relative; overflow: hidden; isolation: isolate; } .rd-hero::before, .rd-hero::after { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 55% 18% at 25% 35%, rgba(255,255,255,.18), transparent 70%), radial-gradient(ellipse 45% 14% at 70% 55%, rgba(255,255,255,.12), transparent 70%), radial-gradient(ellipse 30% 10% at 50% 80%, rgba(255,255,255,.10), transparent 70%); filter: blur(2px); animation: rd-fog-drift 38s linear infinite; will-change: transform; } .rd-hero::after { inset: -10% -20%; background: radial-gradient(ellipse 60% 16% at 80% 25%, rgba(255,255,255,.14), transparent 70%), radial-gradient(ellipse 40% 12% at 20% 65%, rgba(255,255,255,.09), transparent 70%); animation: rd-fog-drift-rev 62s linear infinite; opacity: .85; } @keyframes rd-fog-drift { 0% { transform: translate3d(-6%,0,0); } 100% { transform: translate3d( 6%,0,0); } } @keyframes rd-fog-drift-rev { 0% { transform: translate3d( 5%,0,0); } 100% { transform: translate3d(-5%,0,0); } } /* Hero children: only boost z-index if already positioned (avoids breaking absolute-positioned slides) */ .rd-hero > .hero-content, .rd-hero > [class*="hero-content"], .rd-hero > .page-hero-content { position: relative; z-index: 2; } /* ------------------------------------------------------------- FX 2. CARDS — 3D lift on hover Apply:
------------------------------------------------------------- */ .rd-card { transition: transform .45s var(--rd-ease-out), box-shadow .45s ease, border-color .45s ease; will-change: transform; } .rd-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 24px 60px -20px rgba(20,83,45,.35), 0 8px 24px -12px rgba(20,83,45,.25); } /* ------------------------------------------------------------- FX 3. STICKY NAV — blur backdrop on scroll Apply: