/* ============================================ INFOHAS PRO - ANIMATIONS Micro-interactions, transitions, scroll reveals ============================================ */ /* --- Keyframes --- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-8px) rotate(1deg); } 66% { transform: translateY(4px) rotate(-1deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.4); } 50% { box-shadow: 0 0 0 12px rgba(212,168,67,0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes drawLine { from { width: 0; } to { width: 100%; } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { 0%, 100% { border-color: transparent; } 50% { border-color: var(--ih-gold-500); } } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } @keyframes keywordFloat { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.07; } 25% { transform: translate(5px, -10px) rotate(2deg); opacity: 0.1; } 50% { transform: translate(-3px, -20px) rotate(-1deg); opacity: 0.06; } 75% { transform: translate(8px, -10px) rotate(1deg); opacity: 0.09; } 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.07; } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes heroTextReveal { from { opacity: 0; transform: translateY(40px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* --- Scroll Reveal Classes --- */ /* PROGRESSIVE ENHANCEMENT: Content is visible by default. JavaScript adds class "scroll-animations-active" to only when NOT inside Elementor editor. This ensures Elementor preview always shows content (no white space from opacity:0). */ /* Base state: visible (no animation, used as fallback for Elementor etc.) */ .animate-on-scroll { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } /* Animated state: hidden until scrolled into view (only when JS enables it) */ html.scroll-animations-active .animate-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(30px); } html.scroll-animations-active .animate-on-scroll.fade-up:not(.is-visible) { transform: translateY(40px); } html.scroll-animations-active .animate-on-scroll.fade-down:not(.is-visible) { transform: translateY(-40px); } html.scroll-animations-active .animate-on-scroll.fade-left:not(.is-visible) { transform: translateX(-40px); } html.scroll-animations-active .animate-on-scroll.fade-right:not(.is-visible) { transform: translateX(40px); } html.scroll-animations-active .animate-on-scroll.scale-in:not(.is-visible) { transform: scale(0.9); } html.scroll-animations-active .animate-on-scroll.zoom-in:not(.is-visible) { transform: scale(0.8); } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } .animate-on-scroll.is-visible.fade-up, .animate-on-scroll.is-visible.fade-down, .animate-on-scroll.is-visible.fade-left, .animate-on-scroll.is-visible.fade-right { transform: translate(0); } .animate-on-scroll.is-visible.scale-in, .animate-on-scroll.is-visible.zoom-in { transform: scale(1); } /* Stagger delays for children */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } .stagger-5 { transition-delay: 0.5s; } .stagger-6 { transition-delay: 0.6s; } .stagger-7 { transition-delay: 0.7s; } .stagger-8 { transition-delay: 0.8s; } /* --- Micro-Interactions --- */ /* Button Ripple Effect */ .btn-ripple { position: relative; overflow: hidden; } /* Ripple circle must be standalone selector so it works on ANY button (.btn-gold, .btn-primary, etc.) not just .btn-ripple */ .ripple-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); animation: ripple 0.6s linear; pointer-events: none; } /* Link Underline Animation */ .link-underline { position: relative; display: inline; } .link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--ih-gold-500); transition: width var(--ih-transition-base); } .link-underline:hover::after { width: 100%; } /* Card Hover Lift */ .card-lift { transition: transform var(--ih-transition-base), box-shadow var(--ih-transition-base); } .card-lift:hover { transform: translateY(-6px); box-shadow: var(--ih-shadow-xl); } /* Card Hover Scale Image */ .card-img-zoom { overflow: hidden; } .card-img-zoom img { transition: transform 0.5s var(--ease-out); } .card-img-zoom:hover img { transform: scale(1.08); } /* Button Press */ .btn-press:active { transform: scale(0.96); } /* Focus Glow */ .focus-glow:focus-visible { box-shadow: 0 0 0 3px rgba(212,168,67,0.4); outline: none; } /* Hover Grow */ .hover-grow { transition: transform var(--ih-transition-fast); } .hover-grow:hover { transform: scale(1.03); } /* Hover Color Shift */ .hover-color-shift { transition: color var(--ih-transition-fast), background-color var(--ih-transition-fast); } /* --- Skeleton Loading --- */ .skeleton { background: linear-gradient(90deg, var(--ih-neutral-200) 25%, var(--ih-neutral-100) 37%, var(--ih-neutral-200) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--ih-radius-md); } .skeleton-text { height: 1em; margin-bottom: 0.5em; width: 100%; } .skeleton-text.short { width: 60%; } .skeleton-text.medium { width: 80%; } .skeleton-heading { height: 1.5em; margin-bottom: 0.75em; width: 50%; } .skeleton-image { aspect-ratio: 16/10; width: 100%; } .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; } /* --- Counter Animation --- */ .counter-animated { display: inline-block; } .counter-animated.counting { animation: countUp 0.3s var(--ease-out); } /* --- Hero Text Reveal --- */ /* PROGRESSIVE ENHANCEMENT: Visible by default, animation only when JS enables */ .hero-text-reveal { opacity: 1; } html.scroll-animations-active .hero-text-reveal { opacity: 0; animation: heroTextReveal 0.8s var(--ease-out) forwards; } html.scroll-animations-active .hero-text-reveal.delay-1 { animation-delay: 0.2s; } html.scroll-animations-active .hero-text-reveal.delay-2 { animation-delay: 0.4s; } html.scroll-animations-active .hero-text-reveal.delay-3 { animation-delay: 0.6s; } html.scroll-animations-active .hero-text-reveal.delay-4 { animation-delay: 0.8s; } html.scroll-animations-active .hero-text-reveal.delay-5 { animation-delay: 1.0s; } /* --- Scroll Arrow Bounce --- */ .scroll-arrow { animation: float 2s ease-in-out infinite; } /* --- CTA Pulse --- */ .cta-pulse { animation: pulseGlow 2s infinite; } /* --- Page Transition --- */ .page-transition { animation: fadeIn 0.3s var(--ease-out); } /* --- Smooth Content Entry --- */ /* PROGRESSIVE ENHANCEMENT: Visible by default, animation only when JS enables */ .entry-content > * { opacity: 1; } html.scroll-animations-active .entry-content > *:not(.is-visible) { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .entry-content > *.is-visible { opacity: 1; transform: translateY(0); } /* --- Parallax Helper --- */ .parallax-bg { will-change: transform; transition: transform 0.1s linear; } /* --- Loading Spinner --- */ .spinner { width: 40px; height: 40px; border: 3px solid var(--ih-neutral-200); border-top-color: var(--ih-primary-600); border-radius: 50%; animation: rotate 0.8s linear infinite; } .spinner-gold { border-top-color: var(--ih-gold-500); } /* --- Reduced Motion Override --- */ @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; } .animate-on-scroll { opacity: 1 !important; transform: none !important; } .hero-text-reveal { opacity: 1 !important; animation: none !important; } .entry-content > * { opacity: 1 !important; transform: none !important; } } /* --- Elementor Editor Override --- */ /* Extra safety: in case scroll-animations-active is somehow added in Elementor context, force everything visible */ body.elementor-editor-active .animate-on-scroll, body.elementor-editor-active .hero-text-reveal, body.elementor-editor-active .entry-content > *, body.elementor-preview-active .animate-on-scroll, body.elementor-preview-active .hero-text-reveal, body.elementor-preview-active .entry-content > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } body.elementor-editor-active .card-lift:hover, body.elementor-preview-active .card-lift:hover { transform: none; } body.elementor-editor-active .card-img-zoom:hover img, body.elementor-preview-active .card-img-zoom:hover img { transform: none; } /* --- Smooth Scroll for anchors --- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }