/* ===================================================== KHODORA LTD — animations.css Keyframes, scroll reveals & motion ===================================================== */ /* ---------- Keyframes ---------- */ @keyframes gradient-pan { 0% { background-position: 0% center; } 100% { background-position: -200% center; } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } } @keyframes orb-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-45px, 40px) scale(1.12); } } @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes ripple-expand { to { transform: scale(4); opacity: 0; } } /* ---------- Scroll reveal (Intersection Observer) ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered delays via data attribute */ .reveal[data-delay="1"] { --reveal-delay: 0.1s; } .reveal[data-delay="2"] { --reveal-delay: 0.2s; } .reveal[data-delay="3"] { --reveal-delay: 0.3s; } .reveal[data-delay="4"] { --reveal-delay: 0.4s; } .reveal[data-delay="5"] { --reveal-delay: 0.5s; } /* Slide variants (optional, applied via extra class) */ .reveal-left { transform: translateX(-36px); } .reveal-left.is-visible { transform: translateX(0); } .reveal-right { transform: translateX(36px); } .reveal-right.is-visible { transform: translateX(0); } /* ---------- Button ripple ---------- */ .ripple { position: relative; overflow: hidden; } .ripple-wave { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.25; transform: scale(0); animation: ripple-expand 0.6s ease-out forwards; pointer-events: none; } /* ---------- Parallax images ---------- */ .parallax { transition: transform 0.1s linear; will-change: transform; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } .parallax { transform: none !important; } /* Intro never plays under reduced motion (guard also skips it) */ .intro { display: none !important; } } /* ===================================================== Intro loader Plays once per session; .intro-pending on is set pre-paint by an inline guard in index.html. ===================================================== */ /* Hidden by default — only shown when the guard opts in */ .intro { display: none; } /* Hold the page still (no scroll) while the intro runs */ html.intro-pending body { overflow: hidden; } html.intro-pending .intro { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 300; background: var(--ink); color: var(--text-inverse); overflow: hidden; } /* --- Backdrop: same visual language as the hero --- */ .intro-bg { position: absolute; inset: 0; pointer-events: none; } .intro-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255, 198, 0, 0.10), transparent 65%), radial-gradient(ellipse 45% 40% at 20% 90%, rgba(255, 198, 0, 0.05), transparent 60%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); animation: intro-breathe 5s ease-in-out infinite alternate; } .intro-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 25%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 25%, transparent 72%); opacity: 0; animation: intro-fade-in 1.2s ease 0.25s forwards; } .intro-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; } .intro-orb-1 { width: 380px; height: 380px; top: -110px; right: -70px; background: radial-gradient(circle, rgba(255, 198, 0, 0.24), transparent 70%); animation: orb-drift 12s ease-in-out infinite alternate; } .intro-orb-2 { width: 300px; height: 300px; bottom: -120px; left: -90px; background: radial-gradient(circle, rgba(255, 198, 0, 0.12), transparent 70%); animation: orb-drift 15s ease-in-out infinite alternate-reverse; } /* --- Stage --- */ .intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 0 1.5rem; text-align: center; } /* Logo: scale + fade with a soft glow bloom behind it */ .intro-logo { position: relative; display: grid; place-items: center; width: clamp(84px, 14vw, 112px); height: clamp(84px, 14vw, 112px); border-radius: 26%; opacity: 0; transform: scale(0.82); animation: intro-logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; will-change: transform, opacity; } .intro-logo svg { width: 100%; height: 100%; border-radius: 26%; box-shadow: 0 18px 60px rgba(255, 198, 0, 0.28); } .intro-logo-glow { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 198, 0, 0.30), transparent 65%); filter: blur(28px); opacity: 0; animation: intro-glow-bloom 1.6s ease 0.45s forwards; pointer-events: none; } /* Light sweep across the logo face */ .intro-shine { position: absolute; inset: 0; border-radius: 26%; overflow: hidden; pointer-events: none; } .intro-shine::after { content: ""; position: absolute; top: -30%; left: -80%; width: 55%; height: 160%; transform: rotate(20deg) translateX(0); background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100% ); filter: blur(3px); animation: intro-shine-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) 1.05s forwards; } /* Wordmark: letter-by-letter rise */ .intro-name { display: flex; align-items: baseline; gap: 0.85rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: 0.14em; line-height: 1; } .intro-word { display: inline-flex; } .intro-letter { display: inline-block; opacity: 0; transform: translateY(0.55em); animation: intro-letter-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.85s + var(--i) * 0.06s); will-change: transform, opacity; } .intro-suffix { font-weight: 500; font-size: 0.42em; letter-spacing: 0.32em; color: var(--text-inverse-muted); opacity: 0; transform: translateY(0.6em); animation: intro-letter-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; } /* Accent rule that draws itself beneath the name */ .intro-rule { width: 64px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); animation: intro-rule-draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards; } /* --- Exit: cinematic lift + fade, page already rendered beneath --- */ .intro.is-leaving { animation: intro-exit 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .intro.is-leaving .intro-stage { animation: intro-stage-exit 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards; } /* --- Intro keyframes --- */ @keyframes intro-fade-in { to { opacity: 1; } } @keyframes intro-breathe { from { opacity: 1; } to { opacity: 0.82; } } @keyframes intro-logo-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } } @keyframes intro-glow-bloom { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.75; transform: scale(1); } } @keyframes intro-shine-sweep { to { transform: rotate(20deg) translateX(340%); } } @keyframes intro-letter-up { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: translateY(0); } } @keyframes intro-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-stage-exit { to { opacity: 0; transform: translateY(-28px) scale(0.96); } } @keyframes intro-exit { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 0; clip-path: inset(0 0 100% 0); } }