/*
 * animations.css — keyframes, scroll-reveal states, the heading shine-sweep,
 * and a hard reduced-motion guard at the end.
 *
 * Principle: nothing here is required to READ the site. Reveal elements start
 * visible and are only hidden once JS confirms it can animate them (the .js
 * class is added by header.php). With JS off, everything is shown immediately.
 */

/* ======================================================================== *
 * Scroll reveal
 * ======================================================================== */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
	will-change: opacity, transform;
}
.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ======================================================================== *
 * Heading shine-sweep
 * A brass highlight sweeps across the letters when the heading enters view.
 * Built on background-clip:text; falls back to solid brass without support.
 * ======================================================================== */
.sk-heading { font-size: var(--sk-step-2); }
.sk-heading--sm { font-size: var(--sk-step-1); }
.sk-heading__sweep { color: var(--sk-brass-mid); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sk-heading__sweep {
		background: var(--sk-sheen-sweep);
		background-size: 250% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.js .sk-heading.is-visible .sk-heading__sweep {
		animation: sk-shine-sweep 1500ms var(--sk-ease) forwards;
	}
}

@keyframes sk-shine-sweep {
	from { background-position: 100% 0; }
	to   { background-position: 0% 0; }
}

/* ======================================================================== *
 * Hero molten brass loop
 * ======================================================================== */
@keyframes sk-molten {
	0%   { background-position: 0% 0%, 100% 100%, 0% 50%; }
	50%  { background-position: 40% 60%, 60% 40%, 100% 50%; }
	100% { background-position: 100% 100%, 0% 0%, 0% 50%; }
}

@keyframes sk-scroll-drip {
	0%   { transform: translateY(0); }
	100% { transform: translateY(300%); }
}

/* ======================================================================== *
 * Marquee
 * ======================================================================== */
@keyframes sk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ======================================================================== *
 * Counters: gentle settle as the number finishes
 * ======================================================================== */
.sk-stat__num.is-counting { opacity: 0.92; }

/* ======================================================================== *
 * Forging sparks (CTA hover) — injected as spans by JS into [data-sparks]
 * ======================================================================== */
.sk-spark {
	position: absolute; width: 3px; height: 3px; border-radius: 50%;
	background: var(--sk-brass-core);
	box-shadow: 0 0 6px 1px rgba(30,138,90,0.85);
	pointer-events: none; opacity: 0;
}
.sk-spark.is-live { animation: sk-spark-fly 700ms ease-out forwards; }
@keyframes sk-spark-fly {
	0%   { opacity: 1; transform: translate(0,0) scale(1); }
	100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -30px)) scale(0.3); }
}

/* ======================================================================== *
 * 3D depth motion: floating frames, drifting hero grid, pulsing dots, glow
 * ======================================================================== */
@keyframes sk-float {
	0%, 100% { transform: perspective(var(--sk-perspective)) rotateY(-6deg) rotateX(2deg) translateY(0); }
	50%      { transform: perspective(var(--sk-perspective)) rotateY(-3deg) rotateX(4deg) translateY(-12px); }
}

@keyframes sk-grid-drift {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 0 64px, 64px 0; }
}

@keyframes sk-pulse-dot {
	0%, 100% { box-shadow: 0 0 0 4px var(--sk-bg), 0 0 10px rgba(67,201,138,0.5); }
	50%      { box-shadow: 0 0 0 4px var(--sk-bg), 0 0 22px rgba(67,201,138,0.95); }
}

@keyframes sk-glow-pulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* Optional 3D reveal: elements flagged data-reveal="3d" rotate up into place. */
.js [data-reveal="3d"] {
	opacity: 0;
	transform: perspective(900px) rotateX(-14deg) translateY(34px);
	transform-origin: 50% 100%;
	transition: opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease-spring);
	will-change: opacity, transform;
}
.js [data-reveal="3d"].is-visible { opacity: 1; transform: none; }

/* ======================================================================== *
 * Page transition (progressive enhancement)
 * ======================================================================== */
.js body { animation: sk-fade-in 500ms var(--sk-ease) both; }
body.sk-leaving { opacity: 0; transition: opacity 260ms var(--sk-ease); }
@keyframes sk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ======================================================================== *
 * REDUCED MOTION — disable / simplify everything above.
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] { opacity: 1 !important; transform: none !important; }

	.sk-hero__molten,
	.sk-page-hero__molten { animation: none !important; }
	.sk-hero__grid { animation: none !important; opacity: 0.3 !important; }
	.sk-object-frame { animation: none !important; transform: none !important; }
	.sk-timeline__dot { animation: none !important; }
	.js [data-reveal="3d"] { opacity: 1 !important; transform: none !important; }
	.sk-hero__scroll-line::after { display: none; }
	.sk-marquee__track { animation: none !important; transform: none !important; }
	.sk-extrusion-divider span { width: 100% !important; transition: none !important; }
	.sk-timeline__fill { height: 100% !important; }

	.sk-heading__sweep {
		animation: none !important;
		background-position: 0 0 !important;
	}
	.sk-card:hover .sk-card__img { transform: none !important; }
	.sk-card__sheen { display: none; }
	.sk-spark { display: none !important; }
	.js body { animation: none !important; }
}