/* =========================================================================
   Rock Consignments — interaction base states
   Hidden/initial states, header condense, link underline, reduced-motion.
   The motion itself lives in assets/js/main.js. Colour tokens come from
   theme.css (var(--gold), var(--hairline), var(--header-bg)).
   ========================================================================= */

/* Reveal elements are hidden ONLY when JS is active (no-FOUC guard).
   Without JS, content stays visible. */
.js [data-anim="reveal"] { opacity: 0; }

/* Hero word stagger — pre-hide words only when JS is present, so main.js can
   animate them in without a flash. (The hero IMAGE is never pre-hidden: it is
   the LCP element and must paint eagerly.) */
.js [data-anim="hero-words"] .word { opacity: 0; }

/* Sticky header condense on scroll (main.js initHeader). */
[data-anim="site-header"] {
	transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
[data-anim="site-header"].is-condensed {
	background: var(--header-bg);
	box-shadow: 0 1px 0 var(--hairline);
}

/* Gold underline-draw on text links (L→R). */
.link-underline {
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	color: var(--gold-soft);
}
.link-underline:hover,
.link-underline:focus-visible { background-size: 100% 1px; }

/* Respect user preference: reduce → show everything, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
	.js [data-anim="reveal"] { opacity: 1 !important; }
	.js [data-anim="hero-words"] .word { opacity: 1 !important; }
	* { scroll-behavior: auto !important; }
}