/* ============================================================
   Digitro Pro — Animations & motion utility classes
   Pairs with assets/js/animations.js (GSAP + IntersectionObserver)
   ============================================================ */

/* Base reveal states — JS replaces them with GSAP timelines on capable devices */
[data-dp-fade] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--dp-ease-out), transform 0.8s var(--dp-ease-out);
}
[data-dp-fade].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-dp-stagger] > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s var(--dp-ease-out), transform 0.6s var(--dp-ease-out);
}
[data-dp-stagger].is-visible > * {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--i, 0) * 0.08s);
}

[data-dp-split] .dp-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px) rotateX(-90deg);
	transform-origin: 0 100%;
	transition: opacity 0.6s var(--dp-ease-out), transform 0.6s var(--dp-ease-out);
}
[data-dp-split].is-visible .dp-char {
	opacity: 1;
	transform: translateY(0) rotateX(0);
	transition-delay: calc(var(--i, 0) * 0.025s);
}

/* Number counter base */
[data-counter] { font-variant-numeric: tabular-nums; }

/* Marquee respects reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dp-marquee__track,
	.dp-bg-glow,
	.dp-hero__orb,
	.dp-hero__card,
	.dp-floating-wa__pulse,
	.dp-eyebrow__dot {
		animation: none !important;
	}
	[data-dp-fade],
	[data-dp-stagger] > *,
	[data-dp-split] .dp-char {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Hover lift */
.dp-hover-lift { transition: transform var(--dp-dur) var(--dp-ease-out); }
.dp-hover-lift:hover { transform: translateY(-6px); }

/* Scale hover */
.dp-hover-scale { transition: transform var(--dp-dur) var(--dp-ease-out); }
.dp-hover-scale:hover { transform: scale(1.04); }

/* Tilt 3D */
.dp-tilt {
	transform-style: preserve-3d;
	transition: transform var(--dp-dur) var(--dp-ease-out);
}

/* Glow on hover */
.dp-glow-hover { transition: filter var(--dp-dur), box-shadow var(--dp-dur); }
.dp-glow-hover:hover { filter: drop-shadow(0 0 24px rgba(var(--dp-primary-rgb), 0.6)); }

/* Soft shimmer/loading */
.dp-skeleton {
	position: relative; overflow: hidden;
	background: var(--dp-bg-elev-2);
}
.dp-skeleton::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
	animation: dp-shimmer 1.5s infinite;
}
@keyframes dp-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* Rotate slowly (for icons / logos) */
@keyframes dp-spin-slow {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
.dp-spin-slow { animation: dp-spin-slow 20s linear infinite; }

/* Float */
@keyframes dp-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
.dp-float { animation: dp-float 4s ease-in-out infinite; }

/* Subtle parallax background grid */
@keyframes dp-grid-move {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 60px 60px, 60px 60px; }
}
.dp-bg-grid { animation: dp-grid-move 30s linear infinite; }

/* Pulse outline (for CTAs and live elements) */
@keyframes dp-pulse-outline {
	0%   { box-shadow: 0 0 0 0    rgba(var(--dp-primary-rgb), 0.6); }
	100% { box-shadow: 0 0 0 20px rgba(var(--dp-primary-rgb), 0);   }
}
.dp-pulse-outline { animation: dp-pulse-outline 1.6s infinite; }

/* Reveal mask (curtain) */
.dp-reveal { position: relative; overflow: hidden; display: inline-block; }
.dp-reveal::after {
	content: ''; position: absolute; inset: 0;
	background: var(--dp-grad-brand);
	transform-origin: 100% 50%;
	animation: dp-reveal-curtain 1.2s var(--dp-ease-out) forwards;
}
@keyframes dp-reveal-curtain {
	0%   { transform: scaleX(0); transform-origin: 0 50%; }
	50%  { transform: scaleX(1); transform-origin: 0 50%; }
	51%  { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* Scroll snap helpers */
.dp-snap-x { scroll-snap-type: x mandatory; }
.dp-snap-x > * { scroll-snap-align: start; }

/* GSAP visibility helper — used during JS init to avoid FOUC */
.dp-js-hidden { visibility: hidden; }
.dp-js-loaded .dp-js-hidden { visibility: visible; }