/* ==========================================================================
   TEAM360 — Keyframes & scroll-reveal utility classes
   GSAP handles orchestrated/scroll-triggered motion; these keyframes cover
   ambient, always-on CSS animation (loops, hovers) so JS failure never
   leaves the page inert.
   ========================================================================== */

@keyframes gradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes rotateBorder {
	to { --angle: 360deg; }
}

@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

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

@keyframes floatX {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(14px); }
}

@keyframes pulseGlow {
	0%, 100% { opacity: .55; transform: scale(1); }
	50% { opacity: .85; transform: scale(1.08); }
}

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

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

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes marqueeReverse {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@keyframes blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes ripple {
	to { transform: scale(3.5); opacity: 0; }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(36px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes scaleIn {
	from { opacity: 0; transform: scale(.9); }
	to { opacity: 1; transform: scale(1); }
}

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

@keyframes loaderBar {
	from { width: 0%; }
	to { width: 100%; }
}

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

.float-y { animation: floatY 6s ease-in-out infinite; }
.float-x { animation: floatX 7s ease-in-out infinite; }
.spin-slow { animation: spin 18s linear infinite; }
.spin-slow-reverse { animation: spinReverse 22s linear infinite; }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

/* Scroll-reveal base state — GSAP's ScrollTrigger flips these via a `.is-visible` class
   so content still renders (just static) with JS disabled, per progressive enhancement. */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

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

.reveal-scale {
	opacity: 0;
	transform: scale(.92);
	transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal-scale.is-visible {
	opacity: 1;
	transform: scale(1);
}

.no-js .reveal,
.no-js .reveal-scale {
	opacity: 1;
	transform: none;
}

/* Hero title mask reveal — .line (overflow:hidden, set in layout) clips this inner
   span while main.js translates it in on load. */
.hero-title .line-inner {
	display: inline-block;
	will-change: transform;
}

/* Section-title word cascade — main.js splits text into .word spans wrapped in
   an overflow-hidden mask, then animates each word in on scroll. */
.word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.word {
	display: inline-block;
	will-change: transform;
}

/* Stagger helper — pairs with JS adding .is-visible progressively */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .4s; }
.reveal-delay-6 { transition-delay: .48s; }