/* ============================================================ ALL BILL — FONT & UI ANIMATIONS (animations.css) Link in index.html after style.css ============================================================ */ /* ─── CSS CUSTOM PROPERTIES (tweak here to change timing) ─── */ :root { /* Hero heading word fade-up */ --anim-word-duration: 0.55s; --anim-word-stagger: 0.12s; /* "One Place" flowing gradient text */ --anim-gradient-dur: 4s; /* "One Place" neon glow pulse */ --anim-glow-dur: 2.6s; /* Typewriter subtitle */ --anim-cursor-blink: 0.75s; /* Card stagger delay increment (snappy 120Hz feel) */ --anim-card-in-dur: 0.32s; --anim-card-stagger: 0.035s; /* Button hover shine */ --anim-btn-shine-dur: 0.55s; /* ── LOGO PREMIUM variables ────────────────────────────── */ --logo-gradient-dur: 5s; /* flowing gradient cycle */ --logo-shimmer-period: 4s; /* shine sweep interval */ --logo-glow-dur: 3s; /* neon breathing period */ --logo-float-dur: 3s; /* icon float bob */ --logo-spin-dur: 6s; /* conic glow rotation */ --logo-letter-stagger: 0.06s; /* per-letter entrance delay */ --logo-wave-stagger: 0.03s; /* per-letter hover wave delay */ /* Neon palette */ --neon-purple: #a855f7; --neon-pink: #ec4899; --neon-blue: #60a5fa; /* Logo glow intensities */ --logo-glow-lo: rgba(168, 85, 247, 0.5); --logo-glow-hi: rgba(168, 85, 247, 0.95); --logo-glow-pk: rgba(236, 72, 153, 0.55); } /* ─── RESPECT prefers-reduced-motion ─────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* Make hero words immediately visible */ .hero-word { opacity: 1 !important; transform: none !important; } /* Logo letters visible instantly */ .brand-letter { opacity: 1 !important; transform: none !important; } /* Hide sparkles entirely */ .logo-sparkle { display: none !important; } /* Hide typewriter cursor */ .hero-subtitle::after { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. HERO HEADING — "All Your Bills," word-by-word slide-up ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero-word { display: inline-block; opacity: 0; transform: translateY(22px); will-change: opacity, transform; } .hero-word--visible { animation: wordFadeUp var(--anim-word-duration) cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--delay, 0s); } @keyframes wordFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2. "One Place" — flowing gradient + pulsing neon glow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero-gradient-text { background: linear-gradient( 110deg, var(--neon-purple) 0%, var(--neon-pink) 35%, var(--neon-blue) 65%, var(--neon-purple) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; /* neutralise style.css text-shadow which breaks bg-clip */ display: inline-block; will-change: filter, background-position; animation: heroGradientFlow var(--anim-gradient-dur) linear infinite, heroNeonPulse var(--anim-glow-dur) ease-in-out infinite; } @keyframes heroGradientFlow { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 200% center; } } @keyframes heroNeonPulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.55)) drop-shadow(0 0 22px rgba(236, 72, 153, 0.25)); } 50% { filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.95)) drop-shadow(0 0 40px rgba(236, 72, 153, 0.55)); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3. SUBTITLE — typewriter blinking cursor (JS types the text; CSS provides the cursor) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero-subtitle { position: relative; display: inline-block; } .hero-subtitle::after { content: "|"; display: inline-block; margin-left: 2px; color: var(--neon-pink); animation: cursorBlink var(--anim-cursor-blink) step-end infinite; will-change: opacity; } /* JS adds this class when typing finishes */ .hero-subtitle.typing-done::after { animation: none; opacity: 0; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4. LOGO — PREMIUM BRAND AREA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── 4a. Header-left wrapper ── */ .header-left { position: relative; /* anchor sparkles */ cursor: pointer; animation: logoAreaEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes logoAreaEnter { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* ── 4b. "AB" icon — floating + rotating conic glow ── */ /* Rotating conic-gradient glow BEHIND the icon wrapper */ .brand-logo-wrapper::before { content: ""; position: absolute; inset: -6px; border-radius: 18px; background: conic-gradient( from 0deg, #9333ea, #ec4899, #60a5fa, #9333ea ); filter: blur(8px); opacity: 0.7; animation: iconSpinGlow var(--logo-spin-dur) linear infinite; z-index: -1; will-change: transform, opacity; } @keyframes iconSpinGlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Icon pop-in entrance: injected class by JS */ .brand-logo-wrapper.icon-enter { animation: iconPopIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes iconPopIn { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 70% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Float bob */ .brand-logo-wrapper { animation: logoFloat var(--logo-float-dur) ease-in-out infinite, iconPopIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Icon hover: tilt + scale + intensified glow */ .header-left:hover .brand-logo-wrapper { transform: rotate(8deg) scale(1.08) translateY(-2px) !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .header-left:hover .brand-logo-wrapper::before { opacity: 1; filter: blur(12px); } /* ── 4c. Brand title — flowing gradient + shimmer + glow breath ── */ /* CRITICAL: Overriding `background` shorthand resets background-clip. We MUST re-declare all clip props with !important. */ .brand-title { background: linear-gradient( 110deg, #9333ea 0%, #c026d3 15%, #ec4899 30%, #60a5fa 50%, #ec4899 65%, #ffffff 78%, /* shine highlight */ #9333ea 100% ) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: logoGradientFlow var(--logo-gradient-dur) linear infinite, logoShimmerSweep var(--logo-shimmer-period) ease-in-out infinite, logoGlowBreath var(--logo-glow-dur) ease-in-out infinite !important; will-change: background-position, filter; } @keyframes logoGradientFlow { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 200% center; } } @keyframes logoShimmerSweep { 0%, 58% { background-position: 0% center; } /* idle */ 78% { background-position: 100% center; } /* sweep */ 100% { background-position: 200% center; } /* reset */ } @keyframes logoGlowBreath { 0%, 100% { filter: drop-shadow(0 0 6px var(--logo-glow-lo)) drop-shadow(0 0 16px rgba(236, 72, 153, 0.2)); } 50% { filter: drop-shadow(0 0 14px var(--logo-glow-hi)) drop-shadow(0 0 30px var(--logo-glow-pk)); } } /* Hover: intensified glow on brand title */ .header-left:hover .brand-title { filter: drop-shadow(0 0 22px var(--logo-glow-hi)) drop-shadow(0 0 40px var(--logo-glow-pk)) !important; } /* ── 4d. Per-letter spans (injected by JS) ── */ .brand-letter { display: inline-block; opacity: 0; transform: translateX(-10px); will-change: opacity, transform; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; } .brand-letter.letter-visible { animation: letterSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--letter-delay, 0s); } @keyframes letterSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } /* Hover wave — JS adds .logo-wave-active on header-left */ .logo-wave-active .brand-letter { animation: letterWave 0.35s ease both; animation-delay: var(--wave-delay, 0s); } @keyframes letterWave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } } /* ── 4e. Sparkles ── */ .logo-sparkle { position: absolute; font-size: 10px; color: #f0abfc; /* light purple */ pointer-events: none; animation: sparkleTwinkle var(--sparkle-dur, 2s) ease-in-out infinite; will-change: opacity, transform; user-select: none; } @keyframes sparkleTwinkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1.2) rotate(20deg); } } /* Hide sparkles on very small screens */ @media (max-width: 480px) { .logo-sparkle { display: none; } /* Reduce glow blur radius on mobile */ :root { --logo-glow-lo: rgba(168, 85, 247, 0.3); --logo-glow-hi: rgba(168, 85, 247, 0.6); --logo-glow-pk: rgba(236, 72, 153, 0.3); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5. CARD TITLES — hover: letter-spacing + glow + shift ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .card-title { letter-spacing: 0.5px; text-shadow: none; transform: translateY(0); will-change: letter-spacing, transform; transition: letter-spacing 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease; } .card:hover .card-title { letter-spacing: 1.5px; transform: translateY(-2px); text-shadow: 0 0 8px rgba(168, 85, 247, 0.75), 0 0 18px rgba(236, 72, 153, 0.45); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5b. CARD STAGGER & 120Hz SCROLL OPTIMIZATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .card, .nbfc-card { transform: translate3d(0, 16px, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; content-visibility: auto; contain-intrinsic-size: auto 220px; } .card.show, .nbfc-card.show { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; transition: opacity var(--anim-card-in-dur) cubic-bezier(0.2, 0.8, 0.2, 1) var(--stagger-delay, 0s), transform var(--anim-card-in-dur) cubic-bezier(0.2, 0.8, 0.2, 1) var(--stagger-delay, 0s) !important; } /* Eliminate hover repaints and style recalculation during fast scroll */ body.is-scrolling .card, body.is-scrolling .nbfc-card, body.is-scrolling .btn, body.is-scrolling button, body.is-scrolling a { pointer-events: none !important; } /* Reduce stagger & motion on small screens */ @media (max-width: 640px) { :root { --anim-card-stagger: 0.025s; --anim-word-stagger: 0.07s; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6. "CHECK BILL" BUTTONS — hover scale + shine + click ripple ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* All card-level buttons (Tailwind inline + .btn class) */ .card button, .gas-grid .card button, .card .btn, .gas-grid .card .btn { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; will-change: transform; } /* Shine stripe overlay */ .card button::before, .gas-grid .card button::before { content: ""; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient( 105deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80% ); transform: skewX(-20deg); opacity: 0; pointer-events: none; } .card button:hover { transform: scale(1.05); } .card button:hover::before { opacity: 1; animation: btnShineSweep var(--anim-btn-shine-dur) ease forwards; } @keyframes btnShineSweep { from { left: -75%; opacity: 1; } to { left: 125%; opacity: 1; } } /* Ripple element injected by JS on click */ .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: rippleExpand 0.55s ease-out forwards; pointer-events: none; will-change: transform, opacity; } @keyframes rippleExpand { to { transform: scale(4); opacity: 0; } }