/**
 * MCN Animations — Scenes
 *
 * Rebuilt from:
 *   Tippy fodder,     "Speedy truck"      (codepen.io/tippyfodder/pen/OyXWpr, MIT)
 *   Travis Doughty,   "Watch Tower"       (codepen.io/tdoughty/pen/bGGZWqg, MIT)
 *   Kevin David,      "Funny Candle"      (codepen.io/kevin_David_k/pen/eYNeQVY, MIT)
 *   Stephen Fairbanks,"Ants on Sugar"     (codepen.io/thathurtabit/pen/bgWdge, MIT)
 *   Alberto Jerez,    "Submarine with CSS"(codepen.io/ajerez/pen/EaEEOW, MIT)
 *
 * WHAT THESE ARE FOR — AND WHAT THEY ARE NOT
 * The originals are illustration: hundreds of positioned divs drawing a truck,
 * a candle, a submarine. Reproducing that artwork verbatim would give us five
 * fixed pictures we can never restyle for a client.
 *
 * What is actually reusable is the MOTION VOCABULARY underneath them:
 *   - a looping horizontal parallax bed (truck, watchtower)
 *   - multi-layer drift at different speeds (submarine, clouds)
 *   - organic flicker (candle flame)
 *   - travel along an arbitrary path (ants)
 *   - buoyant bob (submarine body)
 *
 * So this module ships those as primitives you point at YOUR artwork — a
 * client's SVG, a product shot, a logo mark. Same motion, any subject.
 *
 * ACCESSIBILITY
 * Every scene here is decoration. The container MUST carry aria-hidden="true".
 * All of them loop forever, so WCAG 2.2.2 (Level A) applies: each responds to
 * .is-paused, and the JS attaches a pause control to any .anim-scene that
 * does not already have one. Reduced motion stops all of it dead.
 *
 * @package MCN_Animations
 */

.anim-scene {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.anim-scene.is-paused *,
.anim-scene:has(.anim-scene__pause[aria-pressed="true"]) * {
	animation-play-state: paused !important;
}

.anim-scene__pause {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 10;
	min-width: 24px;
	min-height: 24px;
	display: inline-grid;
	place-items: center;
	padding: 0.25rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	font-size: 0.75rem;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--anim-duration-fast) var(--anim-ease);
}

.anim-scene__pause:hover,
.anim-scene__pause:focus-visible {
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Parallax bed
 *
 * Any number of layers scrolling right-to-left at independent speeds. Each
 * layer holds two copies of its artwork side by side and translates by
 * exactly -50%, so the loop is seamless with no JS bookkeeping.
 *
 * <div class="anim-scene anim-parallax" aria-hidden="true">
 *   <div class="anim-parallax__layer" style="--speed:60s"> ...art x2... </div>
 *   <div class="anim-parallax__layer" style="--speed:30s"> ...art x2... </div>
 * </div>
 * ----------------------------------------------------------------------- */

.anim-parallax {
	--scene-h: 320px;
	height: var(--scene-h);
}

.anim-parallax__layer {
	position: absolute;
	inset: 0;
	display: flex;
	width: 200%;
	will-change: transform;
	animation: anim-parallax-scroll var(--speed, 40s) linear infinite;
	animation-direction: var(--direction, normal);
}

.anim-parallax__layer > * {
	flex: 0 0 50%;
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: bottom left;
}

@keyframes anim-parallax-scroll {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
 * Drift — slow multi-axis float, for clouds, bubbles, submarines
 * ----------------------------------------------------------------------- */

.anim-drift {
	animation:
		anim-drift-x var(--drift-x-speed, 18s) ease-in-out infinite alternate,
		anim-drift-y var(--drift-y-speed, 7s) ease-in-out infinite alternate;
}

@keyframes anim-drift-x {
	to { transform: translateX(var(--drift-x, 28px)); }
}

@keyframes anim-drift-y {
	to { transform: translateY(var(--drift-y, -14px)); }
}

/* Bob — buoyancy, with a touch of roll so it does not read as a lift. */
.anim-bob {
	animation: anim-bob var(--bob-speed, 4s) ease-in-out infinite alternate;
	transform-origin: center;
}

@keyframes anim-bob {
	from { transform: translateY(0) rotate(-1.2deg); }
	to   { transform: translateY(var(--bob-distance, -10px)) rotate(1.2deg); }
}

/* --------------------------------------------------------------------------
 * Flicker — candle flame, neon sign, firelight
 *
 * WCAG 2.3.1 (Level A) is the live risk here: a naive flicker is a luminance
 * flash. The steps below never drop below 0.82 opacity and the cycle runs at
 * roughly 3.3s, so both the flash rate and the amplitude sit far under the
 * general flash threshold. Do not speed this up past ~1s.
 * ----------------------------------------------------------------------- */

.anim-flicker {
	animation: anim-flicker var(--flicker-speed, 3.3s) ease-in-out infinite;
	transform-origin: bottom center;
}

@keyframes anim-flicker {
	0%, 100% { opacity: 1;    transform: scaleY(1)    skewX(0deg); }
	18%      { opacity: 0.92; transform: scaleY(1.06) skewX(-2deg); }
	34%      { opacity: 1;    transform: scaleY(0.97) skewX(1.5deg); }
	52%      { opacity: 0.86; transform: scaleY(1.09) skewX(2deg); }
	68%      { opacity: 0.97; transform: scaleY(0.99) skewX(-1deg); }
	84%      { opacity: 0.9;  transform: scaleY(1.04) skewX(1deg); }
}

/* Glow companion for the flicker — sits behind the flame. */
.anim-flicker-glow {
	animation: anim-flicker-glow var(--flicker-speed, 3.3s) ease-in-out infinite;
	filter: blur(14px);
}

@keyframes anim-flicker-glow {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	40%      { opacity: 0.75; transform: scale(1.12); }
	70%      { opacity: 0.5;  transform: scale(0.95); }
}

/* --------------------------------------------------------------------------
 * Path travel — ants, delivery vans, progress markers
 *
 * offset-path takes any SVG path string, so the same class carries a logo
 * along a signature swoosh or a marker along a route.
 * ----------------------------------------------------------------------- */

.anim-path {
	offset-path: path(var(--path, "M 0 0 L 200 0"));
	offset-rotate: auto;
	animation: anim-path-travel var(--path-speed, 9s) linear infinite;
}

@keyframes anim-path-travel {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}

/* Staggered followers — a column of ants rather than one. */
.anim-path:nth-child(2) { animation-delay: -1.2s; }
.anim-path:nth-child(3) { animation-delay: -2.4s; }
.anim-path:nth-child(4) { animation-delay: -3.6s; }
.anim-path:nth-child(5) { animation-delay: -4.8s; }

/* --------------------------------------------------------------------------
 * Sweep — lighthouse / watchtower beam
 * ----------------------------------------------------------------------- */

.anim-sweep-beam {
	position: absolute;
	transform-origin: var(--beam-origin, bottom center);
	background: conic-gradient(
		from -14deg,
		transparent 0deg,
		var(--beam-color, rgb(255 244 200 / 0.42)) 10deg,
		transparent 28deg
	);
	animation: anim-beam-sweep var(--beam-speed, 8s) ease-in-out infinite alternate;
	pointer-events: none;
	mix-blend-mode: screen;
}

@keyframes anim-beam-sweep {
	from { transform: rotate(var(--beam-from, -38deg)); }
	to   { transform: rotate(var(--beam-to, 38deg)); }
}

/* --------------------------------------------------------------------------
 * Rise — bubbles, embers, steam
 * ----------------------------------------------------------------------- */

.anim-rise {
	animation: anim-rise var(--rise-speed, 5s) linear infinite;
	animation-delay: calc(var(--anim-index, 0) * -0.9s);
}

@keyframes anim-rise {
	0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
	12%  { opacity: var(--rise-opacity, 0.7); }
	80%  { opacity: var(--rise-opacity, 0.7); }
	100% { opacity: 0; transform: translateY(var(--rise-distance, -140px)) translateX(var(--rise-drift, 14px)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {

	.anim-parallax__layer,
	.anim-drift,
	.anim-bob,
	.anim-flicker,
	.anim-flicker-glow,
	.anim-path,
	.anim-sweep-beam,
	.anim-rise {
		animation: none !important;
		transform: none !important;
	}

	/* Particles only make sense in motion — hide rather than freeze. */
	.anim-rise {
		display: none;
	}

	.anim-scene__pause {
		display: none;
	}
}