/**
 * @fileoverview Motion layer for the field-notes site.
 * Every movement stays in the stamp language: things press, land, and tick —
 * nothing slides or bounces. All transitions run under 200ms and the whole
 * layer switches off under prefers-reduced-motion (elements are only hidden
 * for the stamp-in reveal when the script confirms motion is allowed).
 */

/* ==========================================================================
   THE MOON IS THE TOGGLE (constant width — no layout shift between themes)
   ========================================================================== */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.moon-badge { display: inline-flex; }
.moon-badge svg { display: block; opacity: 0.8; }

@media (max-width: 700px) {
	.moon-name { display: none; }
}

/* ==========================================================================
   3 · ENTRIES STAMP IN ON SCROLL (state classes set by fieldnotes.js)
   ========================================================================== */
.will-stamp {
	opacity: 0;
	transform: scale(1.04) rotate(-0.8deg);
}

.stamped {
	opacity: 1;
	transform: none;
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* ==========================================================================
   4 · UNDERLINE DRAWS IN ON COMPANY LINKS
   ========================================================================== */
a.co-name {
	text-decoration: none;
	padding-bottom: 4px;
	background-image: linear-gradient(var(--underline), var(--underline));
	background-position: 0 100%;
	background-size: 0% 2px;
	background-repeat: no-repeat;
	transition: background-size 160ms ease;
}

.co-row:not(.co-row--archive):hover a.co-name,
a.co-name:focus-visible { background-size: 100% 2px; }

/* ==========================================================================
   5 · CTA PRESSES
   ========================================================================== */
.cta {
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cta:hover,
.cta:focus-visible {
	background: #A5503C;
	color: #F2EDE2;
	transform: rotate(0deg);
}

/* outranks the generic dark-theme a:hover color rule */
[data-theme="dark"] .cta:hover,
[data-theme="dark"] .cta:focus-visible { color: #F2EDE2; }

.cta:active { transform: rotate(0deg) translateY(1px); }

/* ==========================================================================
   REDUCED MOTION: static site, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	a.co-name, .cta { transition: none; }
	.will-stamp { opacity: 1; transform: none; }
}