/* Echo Perfume — Motion */

@keyframes fadeUpBlur {
	from { opacity: 0; transform: translateY(32px); filter: blur(8px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes floatSlow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes pulseDot {
	0%, 100% { opacity: 0.3; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1); }
}

.hero-float { animation: floatSlow 7s var(--ease-soft) infinite; }

/* Magnetic button micro-tilt driven by JS setting --mx/--my custom props */
.magnetic { transition: transform 220ms var(--ease-fluid); }

.skeleton {
	background: linear-gradient(90deg, var(--color-border) 25%, var(--color-gold-soft) 37%, var(--color-border) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease-in-out infinite;
	border-radius: var(--radius-md);
}

.typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); animation: pulseDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Hero entrance (no JS required, runs once on load) */
.hero-anim > * { animation: fadeUpBlur var(--dur-slow) var(--ease-soft) both; }
.hero-anim > *:nth-child(1) { animation-delay: 0.05s; }
.hero-anim > *:nth-child(2) { animation-delay: 0.18s; }
.hero-anim > *:nth-child(3) { animation-delay: 0.32s; }
.hero-anim > *:nth-child(4) { animation-delay: 0.46s; }
.hero-anim > *:nth-child(5) { animation-delay: 0.6s; }