/**
* Index page (index.html) styles
* Hero animations, card effects, pricing tabs
*/
/* ── Hero Gradient Background ─────────────────────────── */
.hero-gradient {
background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(76,110,245,0.12) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 50%, rgba(76,110,245,0.06) 0%, transparent 60%);
}
/* ── Dynamic Gradient Text ────────────────────────────── */
.hero-gradient-text {
background: linear-gradient(90deg,
#60a5fa, #22d3ee, #a78bfa, #f472b6, #fb923c, #22d3ee, #60a5fa);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── Hero Glow Pulse ──────────────────────────────────── */
.hero-glow {
animation: glowPulse 2s ease-in-out 0.6s forwards;
opacity: 0.7;
}
@keyframes glowPulse {
0% { text-shadow: none; opacity: 0.7; }
30% { text-shadow: 0 0 20px rgba(96,165,250,0.6), 0 0 40px rgba(96,165,250,0.3), 0 0 80px rgba(167,139,250,0.2); opacity: 1; }
60% { text-shadow: 0 0 10px rgba(96,165,250,0.3), 0 0 30px rgba(167,139,250,0.15); opacity: 1; }
100% { text-shadow: none; opacity: 1; }
}
/* ── Card Hover Lift ──────────────────────────────────── */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
/* ── Pricing Tab Active State ─────────────────────────── */
.tab-active { background: #18181b; color: #fff; }
/* ── Hero Wash Animation ──────────────────────────────── */
/* Grime / dirt texture */
.wash-grime {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 18% 25% at 15% 30%, rgba(90,70,35,0.18) 0%, transparent 70%),
radial-gradient(ellipse 22% 15% at 60% 55%, rgba(55,75,35,0.15) 0%, transparent 70%),
radial-gradient(ellipse 12% 28% at 82% 22%, rgba(80,60,30,0.12) 0%, transparent 70%),
radial-gradient(ellipse 25% 12% at 35% 78%, rgba(65,70,40,0.14) 0%, transparent 70%),
radial-gradient(ellipse 16% 20% at 8% 65%, rgba(85,65,30,0.11) 0%, transparent 70%),
radial-gradient(ellipse 14% 22% at 92% 48%, rgba(60,75,35,0.13) 0%, transparent 70%),
radial-gradient(ellipse 35% 35% at 50% 45%, rgba(70,55,30,0.09) 0%, transparent 80%);
}
/* Wipe-layer: clips away grime + water beads */
.wash-wipe-layer {
position: absolute; inset: 0;
animation: wipeClip 2s cubic-bezier(0.4,0,0.2,1) 2s forwards;
}
@keyframes wipeClip {
0% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 100%); }
}
/* Phase 1: Spray mist band */
.spray-mist {
position: absolute; top: 0; bottom: 0;
width: 200px; left: -200px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(100,180,255,0.03) 15%,
rgba(130,200,255,0.10) 40%,
rgba(160,220,255,0.14) 50%,
rgba(130,200,255,0.10) 60%,
rgba(100,180,255,0.03) 85%,
transparent 100%);
filter: blur(3px);
animation: spraySweep 1.6s cubic-bezier(0.35,0,0.25,1) 0.2s forwards;
}
@keyframes spraySweep {
0% { left: -200px; opacity: 1; }
88% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Water beads from spray */
.water-bead {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: beadLand 0.35s ease-out var(--bead-delay, 0.4s) forwards;
}
@keyframes beadLand {
0% { opacity: 0; transform: scale(0.2); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0.8; transform: scale(1); }
}
/* Phase 2: Wipe band */
.wash-band {
position: absolute; top: 0; bottom: 0;
width: 120px; left: -120px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(200,220,240,0.06) 10%,
rgba(220,235,255,0.14) 30%,
rgba(255,255,255,0.28) 50%,
rgba(220,235,255,0.14) 70%,
rgba(200,220,240,0.06) 90%,
transparent 100%);
filter: blur(0.5px);
animation: bandSweep 2s cubic-bezier(0.4,0,0.2,1) 2s forwards;
}
@keyframes bandSweep {
0% { left: -120px; opacity: 1; }
92% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Splash particles from wipe edge */
.wipe-splash {
position: absolute;
border-radius: 50%;
background: rgba(170,215,255,0.55);
pointer-events: none;
opacity: 0;
animation: splashFly var(--sp-dur, 0.4s) ease-out var(--sp-delay, 2s) forwards;
}
@keyframes splashFly {
0% { opacity: 0.85; transform: translate(0,0) scale(1); }
100% { opacity: 0; transform: translate(var(--sp-dx, 20px), var(--sp-dy, -18px)) scale(0.1); }
}
/* Phase 3: Clean-surface shine gleam */
.wash-shine {
position: absolute; top: 0; bottom: 0;
width: 350px; left: -350px; opacity: 0;
background: linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.02) 30%,
rgba(255,255,255,0.07) 47%,
rgba(255,255,255,0.12) 50%,
rgba(255,255,255,0.07) 53%,
rgba(255,255,255,0.02) 70%,
transparent 100%);
animation: shineSweep 1.6s ease-in-out 4.2s forwards;
}
@keyframes shineSweep {
0% { left: -350px; opacity: 1; }
80% { opacity: 1; }
100% { left: 110%; opacity: 0; }
}
/* Scroll-triggered reflective light flares */
.scroll-flare {
position: absolute;
pointer-events: none;
border-radius: 50%;
opacity: 0;
animation: flareGlow var(--flare-dur, 1.2s) ease-in-out forwards;
}
@keyframes flareGlow {
0% { opacity: 0; transform: scale(0.3); filter: blur(4px); }
30% { opacity: var(--flare-alpha, 0.35); transform: scale(1); filter: blur(2px); }
70% { opacity: var(--flare-alpha, 0.35); transform: scale(1.05); filter: blur(2px); }
100% { opacity: 0; transform: scale(0.6); filter: blur(6px); }
}
/* ── Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.wash-grime, .wash-wipe-layer, .spray-mist, .wash-band,
.wash-shine, .water-bead, .wipe-splash,
.scroll-flare { animation: none !important; opacity: 0 !important; }
}