/*
 * MindTech Academy — Animations
 * - CSS only for ambient motion (glows, rings, badges, marquee, shimmer, gradient text).
 * - Scroll reveal is driven by assets/js/mindtech.js (adds .mt-js on <html>, .is-visible on elements).
 *   Without JS, nothing is hidden.
 * - Everything is disabled under prefers-reduced-motion and inside the Elementor editor.
 * Only transform/opacity/background-position are animated (GPU friendly, no layout thrashing).
 */

/* ---------- Keyframes ---------- */
@keyframes mt-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mt-ring { 0% { transform: scale(.92); opacity: .9; } 70% { opacity: .35; } 100% { transform: scale(1.08); opacity: 0; } }
@keyframes mt-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mt-gradient-move { to { background-position: 200% center; } }
@keyframes mt-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(-4%, 3%, 0) scale(1.05); }
	66% { transform: translate3d(3%, -2%, 0) scale(.97); }
}
@keyframes mt-marquee { to { transform: translateX(-50%); } }
@keyframes mt-shimmer { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes mt-blink { 50% { opacity: 0; } }
@keyframes mt-line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes mt-spin-slow { to { transform: rotate(360deg); } }

/* ---------- Ambient motion ---------- */
.mt-hero::after { animation: mt-drift 18s ease-in-out infinite; }
.mt-hero h1 span:not(.mt-hl),
.mt-hl { animation: mt-gradient-move 6s linear infinite; }

.mt-rings i:nth-child(1) { animation: mt-ring 4.5s ease-out infinite; }
.mt-rings i:nth-child(2) { animation: mt-ring 4.5s ease-out 1.5s infinite; }
.mt-rings i:nth-child(3) { animation: mt-ring 4.5s ease-out 3s infinite; }
.mt-rings i:nth-child(4) { animation: mt-drift 10s ease-in-out infinite; }

.mt-badge-float--1 { animation: mt-float 6s ease-in-out infinite; }
.mt-badge-float--2 { animation: mt-float 7s ease-in-out .8s infinite; }
.mt-badge-float--3 { animation: mt-float 6.5s ease-in-out 1.6s infinite; }
.mt-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: mt-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.mt-cursor { animation: mt-blink 1.1s steps(1) infinite; }

.mt-marquee__track { animation: mt-marquee 38s linear infinite; }
.mt-marquee:hover .mt-marquee__track,
.mt-marquee:focus-within .mt-marquee__track { animation-play-state: paused; }

.mt-cta::after { animation: mt-drift 14s ease-in-out infinite; }

/* Shimmer sweep on primary (gold) buttons */
.mt-btn--primary::after,
.elementor-widget.mt-btnw--primary .elementor-button::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translateX(-120%) skewX(-20deg);
	pointer-events: none;
}
.mt-btn--primary:hover::after,
.elementor-widget.mt-btnw--primary .elementor-button:hover::after { animation: mt-shimmer .8s var(--mt-ease); }

/* ---------- Terminal: lines appear one after another once visible ---------- */
.mt-js .mt-terminal .ln { opacity: 0; }
.mt-js .mt-terminal.is-visible .ln {
	animation: mt-line-in .35s var(--mt-ease) forwards;
	animation-delay: calc(var(--i, 0) * 0.32s + .3s);
}

/* ---------- Scroll reveal ---------- */
/* Off-screen elements are translated sideways before reveal: clip so the page never scrolls
   horizontally (clip, unlike hidden, keeps position: sticky working). */
.mt-site-content { overflow-x: clip; }
.mt-js .mt-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity .7s var(--mt-ease), transform .7s var(--mt-ease);
	transition-delay: var(--mt-delay, 0s);
}
.mt-js .mt-reveal--left { transform: translate3d(-32px, 0, 0); }
.mt-js .mt-reveal--right { transform: translate3d(32px, 0, 0); }
.mt-js .mt-reveal--zoom { transform: scale(.94); }
.mt-js .mt-reveal.is-visible { opacity: 1; transform: none; }
/* Cards keep their own hover transform once revealed */
.mt-js .mt-card.mt-reveal.is-visible { transition: opacity .7s var(--mt-ease), transform .35s var(--mt-ease), box-shadow .35s var(--mt-ease), border-color .35s var(--mt-ease); transition-delay: var(--mt-delay, 0s), 0s, 0s, 0s; }
.mt-js .mt-card.mt-reveal.is-visible:hover { transform: translateY(-6px); }
.mt-js .mt-placeholder.mt-reveal.is-visible:hover { transform: none; }

/* Steps: connecting line grows when the list is revealed */
.mt-js .mt-steps li::after { transform: scaleY(0); transform-origin: top; transition: transform .6s var(--mt-ease); transition-delay: calc(var(--mt-delay, 0s) + .3s); }
.mt-js .mt-steps li.is-visible::after { transform: scaleY(1); }

/* ---------- Opt-outs ---------- */
.elementor-editor-active .mt-reveal,
.elementor-editor-preview .mt-reveal { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .mt-terminal .ln { opacity: 1 !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.mt-js .mt-reveal,
	.mt-js .mt-terminal .ln { opacity: 1; transform: none; }
	.mt-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.mt-marquee__track [aria-hidden="true"] { display: none; }
	.mt-card:hover,
	.mt-tile:hover { transform: none; }
}