/* ==========================================================================
   Motion System — keyframes, scroll reveals, micro-interactions
   ========================================================================== */

/* ---- Loader -------------------------------------------------------- */
@keyframes loader-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(198, 164, 108, 0.35); }
	50% { box-shadow: 0 0 0 12px rgba(198, 164, 108, 0); }
}

@keyframes loader-fill {
	from { width: 0%; }
	to { width: 100%; }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes scroll-line {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}

/* ---- Generic scroll / load reveal ------------------------------------ */
/* (The old .reveal-line hero-text reveal and the .hero-scoped .reveal-up
   variant were removed with the hero redesign — the hero's entrance is
   now GSAP-driven in js/modules/heroIntro.js.) */
.reveal-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
	transition-delay: calc(var(--delay, 0) * 0.09s);
}

.reveal-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Floating gold particles (fallback CSS orbs if canvas disabled) -- */
@keyframes float-y {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-18px); }
}

/* ---- Magnetic buttons -------------------------------------------------
   JS sets --mx/--my (pointer offset); the transform below reacts to it. */
[data-magnetic] {
	transition: transform 0.35s var(--ease-luxury);
	transform: translate(var(--mx, 0), var(--my, 0));
}

/* ---- Nav underline / active link handled in main.css; keep entrance --- */
.nav {
	animation: nav-drop 0.8s var(--ease-luxury) both;
	animation-delay: 0.2s;
}

@keyframes nav-drop {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ---- Glass reflection sheen on hover for glass surfaces --------------- */
.glass {
	position: relative;
}

.service-card.glass::after,
.phone-mockup.glass::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(247,247,247,0.08) 0%, transparent 35%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-soft);
}

.service-card.glass:hover::after {
	opacity: 1;
}