/**
 * The stomp.
 *
 * A button that shakes the page and walks a set of tracks across it.
 *
 * Motion rules, because this is the one component on the site that is
 * deliberately disruptive:
 *   - it only ever runs on a deliberate press, never on load or scroll
 *   - every individual animation is under 600ms, per docs/06 section 7
 *   - only transform and opacity are animated
 *   - prefers-reduced-motion removes the shake and the travel entirely and
 *     leaves the tracks and the link, so the content still arrives
 *   - nothing blocks interaction: the overlay never takes pointer events
 */

.dea-stomp {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background-color: #14100c;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 30px -10px rgba(20, 16, 12, .55);
	transition: transform .15s cubic-bezier(.16, 1, .3, 1), background-color .15s ease;
}

/* Host themes style bare buttons; out-specify them the same way the hero does. */
.dea-stomp,
.dea-stomp:hover,
.dea-stomp:focus,
.dea-stomp:active {
	background-color: #14100c;
	color: #fff;
	border: 0;
	text-decoration: none;
}

.dea-stomp:hover { transform: translateY(-2px); }
.dea-stomp:focus-visible { outline: 3px solid #14100c; outline-offset: 3px; }
.dea-stomp[disabled] { opacity: .55; cursor: default; transform: none; }

.dea-stomp__icon { display: block; width: 26px; height: 19px; flex: none; }

@media (max-width: 720px) {
	.dea-stomp { left: 12px; bottom: 12px; font-size: 14px; padding: 0 16px 0 13px; }
}

/* ---------------------------------------------------------------- tracks */

.dea-stomp-layer {
	position: fixed;
	inset: 0;
	z-index: 89;
	pointer-events: none;   /* never traps a click */
	overflow: hidden;
}

.dea-stomp-print {
	position: absolute;
	width: var(--print-w, 222px);
	height: var(--print-h, 158px);
	/* Vertical then horizontal, so the print centres on its coordinates. */
	margin: calc(var(--print-h, 158px) / -2) calc(var(--print-w, 222px) / -2);
	opacity: 0;
	/* DEA's #351917, softened so it sits in the dirt rather than on it. */
	color: rgba(53, 25, 23, .58);
	/*
	 * A pale rim under the impression. Against a mid-red dirt a flat dark shape
	 * reads as a smudge; the highlight on the lower edge is what makes it look
	 * pressed into the ground rather than laid on top of it.
	 */
	filter: drop-shadow(0 1.5px 0 rgba(255, 236, 214, .34));
	transform: rotate(var(--print-rot, 0deg)) scale(.6);
	animation: dea-print-in 420ms cubic-bezier(.16, 1, .3, 1) forwards;
}

/* The flip lives on the svg so it does not fight the wrapper's entrance animation. */
.dea-stomp-print svg {
	display: block;
	width: 100%;
	height: 100%;
	/* X mirrors the walk's direction, Y alternates left foot and right. */
	transform: scale(var(--print-dir, 1), var(--print-flip, 1));
}

@keyframes dea-print-in {
	from { opacity: 0; transform: rotate(var(--print-rot, 0deg)) scale(.6); }
	to   { opacity: 1; transform: rotate(var(--print-rot, 0deg)) scale(1); }
}

/* Fading the whole trail at once reads as a switch being thrown. Each print
   leaves in the order it arrived, so the tracks walk off rather than vanish. */
.dea-stomp-layer.is-clearing .dea-stomp-print {
	/*
	 * `both`, and a written-out `from`.
	 *
	 * A print's resting style is opacity 0 - they fade in as they land - so
	 * swapping the animation dropped each one straight back to invisible and
	 * then animated 0 to 0. Backwards fill holds it visible through its delay,
	 * forwards fill keeps it gone afterwards.
	 */
	animation: dea-print-out 760ms ease both;
	animation-delay: var(--print-out-delay, 0ms);
}

@keyframes dea-print-out {
	from { opacity: 1; transform: rotate(var(--print-rot, 0deg)) scale(1); }
	to   { opacity: 0; transform: rotate(var(--print-rot, 0deg)) scale(.92); }
}

/* ------------------------------------------------------------- the shake */

/*
 * The shake is applied to every top-level block EXCEPT the track layer, and
 * not to <body> itself.
 *
 * A transform on an ancestor makes that ancestor the containing block for any
 * fixed descendant, so shaking <body> quietly re-anchored the fixed track
 * layer to the document: the prints landed a screen or two up the page while
 * you were scrolled down, then snapped back to the middle of the viewport the
 * moment the last thud ended. Everything still moves as one piece, because
 * every block gets the same animation at the same moment.
 * clip on <html> stops the translation exposing a gap at the edge.
 */
html.dea-stomping { overflow-x: clip; }

html.dea-stomping body > *:not(.dea-stomp-layer) {
	animation: dea-thud 540ms cubic-bezier(.22, 1, .36, 1);
}

/*
 * A heavy footfall, not a rattle.
 *
 * The weight comes from the shape rather than the amplitude: a sharp drop on
 * impact, then a slow decaying settle. Four quick oscillations read as a phone
 * vibrating; one big one that takes its time reads as something large landing.
 * Amplitude stays deliberately small - under 1% of a laptop viewport - because
 * displacement is what makes this kind of motion nauseating, not duration.
 */
@keyframes dea-thud {
	0%   { transform: translate3d(0, 0, 0); }
	10%  { transform: translate3d(-5px, 8px, 0); }
	32%  { transform: translate3d(4px, -5px, 0); }
	56%  { transform: translate3d(-3px, 3px, 0); }
	78%  { transform: translate3d(2px, -2px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------- the card */

.dea-stomp-card {
	position: fixed;
	left: 24px;
	bottom: 84px;
	z-index: 91;
	max-width: min(340px, calc(100vw - 48px));
	padding: 18px 20px;
	border-radius: 14px;
	background: #14100c;
	color: #fff;
	box-shadow: 0 24px 60px -18px rgba(20, 16, 12, .6);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.dea-stomp-card.is-open { opacity: 1; transform: none; }
.dea-stomp-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.dea-stomp-card p:last-child { margin-bottom: 0; }

.dea-stomp-card a {
	color: #e8b04b;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dea-stomp-card a:focus-visible { outline: 3px solid #e8b04b; outline-offset: 3px; }

.dea-stomp-card__close {
	position: absolute; top: 8px; right: 8px;
	width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 50%;
	background-color: rgba(255, 255, 255, .12);
	color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.dea-stomp-card__close:hover { background-color: rgba(255, 255, 255, .22); }

@media (max-width: 720px) {
	.dea-stomp-card { left: 12px; right: 12px; bottom: 70px; max-width: none; }
}

/* ------------------------------------------------------- reduced motion */

/*
 * Not a degraded version: the tracks and the link still arrive, they just do
 * not travel and the page does not move. Shaking the viewport is exactly the
 * kind of thing this media query exists to prevent.
 */
@media (prefers-reduced-motion: reduce) {
	html.dea-stomping body { animation: none; }

	.dea-stomp-print {
		opacity: 1;
		transform: rotate(var(--print-rot, 0deg));
		animation: none;
	}

	.dea-stomp-layer.is-clearing .dea-stomp-print { animation: none; opacity: 0; }

	.dea-stomp,
	.dea-stomp-card { transition: none; }
	.dea-stomp:hover { transform: none; }
	.dea-stomp-card.is-open { opacity: 1; transform: none; }
}