/* ============================================================ MINK$BY$INA — Animations ============================================================ */ /* === Scroll Reveal Base States === Only hide elements when JS has loaded and confirmed animation support. The .animations-ready class is added to by JavaScript. */ .animations-ready [data-animate] { opacity: 0; will-change: transform, opacity; } .animations-ready [data-animate="fade-up"] { transform: translateY(40px); } .animations-ready [data-animate="fade-down"] { transform: translateY(-40px); } .animations-ready [data-animate="fade-left"] { transform: translateX(60px); } .animations-ready [data-animate="fade-right"] { transform: translateX(-60px); } .animations-ready [data-animate="fade-in"] { transform: scale(0.95); } .animations-ready [data-animate="reveal"] { clip-path: inset(0 100% 0 0); } /* Animated state */ [data-animate].animated { opacity: 1 !important; transform: translate(0) scale(1) !important; clip-path: inset(0 0 0 0) !important; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1s cubic-bezier(0.16, 1, 0.3, 1); } /* === Particle Styles === */ .particle { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; } .particle--gold { background: radial-gradient(circle, var(--gold), transparent); } .particle--pink { background: radial-gradient(circle, var(--neon-pink), transparent); } .particle--purple { background: radial-gradient(circle, var(--purple-light), transparent); } /* === Glow Effects === */ .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.3; animation: orbFloat 12s ease-in-out infinite; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -40px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.9); } 75% { transform: translate(40px, 30px) scale(1.05); } } /* === Text Shimmer === */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .text-shimmer { background: linear-gradient( 90deg, var(--gold-dark), var(--gold-light), var(--gold), var(--gold-light), var(--gold-dark) ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4s linear infinite; } /* === Counter Animation === */ .stat__number { transition: color var(--transition-fast); } /* === Card Hover Glow === */ @keyframes cardGlow { 0%, 100% { box-shadow: 0 0 0 rgba(201,169,110,0); } 50% { box-shadow: 0 0 30px rgba(201,169,110,0.1); } } /* === Magnetic Effect === */ .magnetic { transition: transform 0.3s var(--ease-out); } /* === Stagger Animation Helper === */ .stagger-1 { transition-delay: 0.05s !important; } .stagger-2 { transition-delay: 0.1s !important; } .stagger-3 { transition-delay: 0.15s !important; } .stagger-4 { transition-delay: 0.2s !important; } .stagger-5 { transition-delay: 0.25s !important; } .stagger-6 { transition-delay: 0.3s !important; } /* === Floating Animation for Cards === */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* === Smooth Image Zoom on Scroll === */ .zoom-on-scroll { transition: transform 1s var(--ease-out); } /* === Line Draw Animation === */ @keyframes lineGrow { from { width: 0; } to { width: 100%; } } /* === Cart Item Enter === */ @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .floating-cart__item { animation: slideInRight 0.3s var(--ease-out); } /* === Booking Step Transitions === */ .booking__panel { animation: fadeSlideIn 0.4s var(--ease-out); } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* === Confirmation Checkmark === */ @keyframes checkPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .booking__confirmation-icon { animation: checkPop 0.6s var(--ease-out) 0.2s both; } /* === Reduced Motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-animate] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .hero__glow, .glow-orb, .particle { display: none; } html { scroll-behavior: auto; } }