/**
 * Experience layer — tokens, texture, motion, micro-interactions.
 * Gated by html.exp-* classes from inc/experience.php. All reveals only under
 * html.js-motion:not(.reduced-motion). Transform/opacity only.
 */

:root {
	--sw-motion-xfast: 120ms;
	--sw-motion-fast: 200ms;
	--sw-motion-base: 320ms;
	--sw-motion-slow: 480ms;
	--sw-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--sw-ease-entrance: cubic-bezier(0, 0, 0.2, 1);
	--sw-ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--sw-reveal-y: 16px;
	--sw-reveal-stagger: 60ms;
	--sw-elev-1: 0 1px 2px rgba(14, 42, 71, 0.06);
	--sw-elev-2: 0 8px 24px rgba(14, 42, 71, 0.08);
	--sw-elev-3: 0 16px 40px rgba(14, 42, 71, 0.12);
	--sw-grain-opacity: 0;
	--sw-hairline: 1px solid rgba(176, 141, 87, 0.35);
	--sw-vignette: radial-gradient(120% 120% at 70% 20%, transparent 55%, rgba(14, 42, 71, 0.18) 100%);
	--sw-band-wash: linear-gradient(180deg, #0e2a47 0%, #102d4c 100%);
}

/* ---- Icons ---- */
html.exp-icons .sw-icon {
	display: block;
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html.exp-icons .sw-icon-slot {
	background-color: transparent;
	border: 1px solid rgba(176, 141, 87, 0.35);
}
html.exp-icons .has-evergreen-background-color .sw-icon-slot,
html.exp-icons .has-ink-background-color .sw-icon-slot,
html.exp-icons .has-charcoal-background-color .sw-icon-slot {
	color: #e2c48a;
	border-color: rgba(226, 196, 138, 0.4);
	background: rgba(0, 0, 0, 0.12);
}
html.exp-icons .sw-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---- Elevation (exp_texture) — replaces slots.css hover when texture on ---- */
html.exp-texture .sw-card {
	box-shadow: var(--sw-elev-2);
	transition:
		transform var(--sw-motion-base) var(--sw-ease-standard),
		box-shadow var(--sw-motion-base) var(--sw-ease-standard),
		border-color var(--sw-motion-fast) var(--sw-ease-standard);
}
html.exp-texture .sw-card:hover,
html.exp-texture .sw-card:focus-within {
	border-color: #b08d57;
	box-shadow: var(--sw-elev-3);
}
html.exp-texture.exp-motion.js-motion:not(.reduced-motion) .sw-card:hover,
html.exp-texture.exp-motion.js-motion:not(.reduced-motion) .sw-card:focus-within {
	transform: translateY(-2px);
}

/* ---- Reveal (exp_motion) ---- */
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal] {
	opacity: 0;
	transform: translateY(var(--sw-reveal-y));
	transition:
		opacity var(--sw-motion-base) var(--sw-ease-entrance),
		transform var(--sw-motion-base) var(--sw-ease-entrance);
}
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal].is-in {
	opacity: 1;
	transform: translateY(0);
}
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal-stagger] > [data-reveal]:nth-child(1) {
	transition-delay: 0ms;
}
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal-stagger] > [data-reveal]:nth-child(2) {
	transition-delay: var(--sw-reveal-stagger);
}
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal-stagger] > [data-reveal]:nth-child(3) {
	transition-delay: calc(var(--sw-reveal-stagger) * 2);
}
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal-stagger] > [data-reveal]:nth-child(4) {
	transition-delay: calc(var(--sw-reveal-stagger) * 3);
}

/* Hero staging — never hide H1 without js-motion; kicker/sub/cta may stagger */
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero [data-reveal="kicker"] {
	transition-delay: 0ms;
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero [data-reveal="headline"] {
	/* LCP: start visible — only subtle polish after .is-in, do not start at opacity 0 */
	opacity: 1;
	transform: none;
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero [data-reveal="sub"] {
	transition-delay: calc(var(--sw-reveal-stagger) * 2);
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero [data-reveal="media"] {
	transition-delay: calc(var(--sw-reveal-stagger) * 2);
}

/* Ken-burns-lite on hero media */
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero .sw-image-slot.is-in img,
html.exp-motion.js-motion:not(.reduced-motion) .sw-hero.sw-ken-burns .sw-image-slot {
	animation: sw-kenburns 8s var(--sw-ease-standard) 1 forwards;
}
@keyframes sw-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.04);
	}
}

/* Card learn-more arrow */
html.exp-motion.js-motion:not(.reduced-motion) .sw-card-arrow {
	display: inline-block;
	transition: transform var(--sw-motion-fast) var(--sw-ease-standard);
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-card:hover .sw-card-arrow,
html.exp-motion.js-motion:not(.reduced-motion) .sw-card:focus-within .sw-card-arrow {
	transform: translateX(4px);
}

/* Link underline wipe */
html.exp-motion.js-motion:not(.reduced-motion) .sw-card-more a,
html.exp-motion.js-motion:not(.reduced-motion) main a:not(.wp-element-button):not([class*="navigation"]) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--sw-motion-fast) var(--sw-ease-standard);
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-card-more a:hover,
html.exp-motion.js-motion:not(.reduced-motion) main a:not(.wp-element-button):not([class*="navigation"]):hover {
	background-size: 100% 1px;
}

/* Button press */
html.exp-motion.js-motion:not(.reduced-motion) .wp-element-button {
	transition:
		transform var(--sw-motion-xfast) var(--sw-ease-standard),
		box-shadow var(--sw-motion-fast) var(--sw-ease-standard),
		filter var(--sw-motion-xfast) var(--sw-ease-standard);
	box-shadow: var(--sw-elev-1);
}
html.exp-motion.js-motion:not(.reduced-motion) .wp-element-button:hover {
	box-shadow: var(--sw-elev-2);
	transform: translateY(-1px);
}
html.exp-motion.js-motion:not(.reduced-motion) .wp-element-button:active {
	transform: translateY(1px);
	filter: brightness(0.96);
}

/* FAQ chevron + panel */
html.exp-icons .sw-faq summary,
html.exp-motion .sw-faq summary {
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none;
}
html.exp-icons .sw-faq summary::-webkit-details-marker,
html.exp-motion .sw-faq summary::-webkit-details-marker {
	display: none;
}
.sw-faq-chevron {
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
	transition: transform var(--sw-motion-base) var(--sw-ease-standard);
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-faq details[open] .sw-faq-chevron {
	transform: rotate(225deg);
}
.sw-faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--sw-motion-base) var(--sw-ease-standard);
}
.sw-faq-panel-inner {
	overflow: hidden;
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-faq details[open] .sw-faq-panel {
	grid-template-rows: 1fr;
}
/* Without motion flag, panels always open fully when details open (native) */
html:not(.exp-motion) .sw-faq-panel,
html.reduced-motion .sw-faq-panel,
html:not(.js-motion) .sw-faq-panel {
	display: block;
}
html:not(.exp-motion) .sw-faq-panel-inner,
html.reduced-motion .sw-faq-panel-inner,
html:not(.js-motion) .sw-faq-panel-inner {
	overflow: visible;
}

/* Numbered step connective line */
.sw-step {
	position: relative;
}
.sw-step-line {
	display: block;
	height: 2px;
	width: 100%;
	max-width: 3rem;
	margin: 0.5rem 0 0.75rem;
	background: rgba(176, 141, 87, 0.55);
	transform-origin: left center;
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-step-line {
	transform: scaleX(0);
	transition: transform var(--sw-motion-slow) var(--sw-ease-entrance);
}
html.exp-motion.js-motion:not(.reduced-motion) .sw-step.is-in .sw-step-line,
html.exp-motion.js-motion:not(.reduced-motion) [data-reveal].is-in .sw-step-line {
	transform: scaleX(1);
}

/* Texture — ink bands */
html.exp-texture .sw-band-ink,
html.exp-texture .sw-hero.has-ink-background-color,
html.exp-texture .sw-cta-band.has-ink-background-color {
	background-image: var(--sw-band-wash), var(--sw-vignette);
	background-color: #0e2a47;
	position: relative;
}
html.exp-texture .sw-band-ink::after,
html.exp-texture .sw-hero.has-ink-background-color::after,
html.exp-texture .sw-cta-band.has-ink-background-color::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	opacity: var(--sw-grain-opacity);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}
html.exp-texture .sw-hairline {
	border: 0;
	border-top: var(--sw-hairline);
	height: 0;
	margin: 0;
}
html.exp-texture .sw-paper {
	position: relative;
	border-top: 1px solid var(--wp--preset--color--border, #e7e0d0);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html.exp-texture .sw-paper::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.09;
	background-image: url("../media/textures/paper-ivory.svg");
	background-size: 180px 180px;
	border-radius: inherit;
}
html.exp-texture .sw-paper > * {
	position: relative;
	z-index: 1;
}

/* Testimonial quote mark */
.sw-testimonial {
	position: relative;
}
html.exp-icons .sw-testimonial::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: 0.75rem;
	background-color: #8a6b38;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.2 18c-1.9 0-3.4-1.5-3.4-3.4 0-2.4 1.8-4.6 4.4-6.2L9.4 10C7.8 11 6.8 12.2 6.8 13.8c.4-.2.9-.3 1.4-.3 1.7 0 3 1.3 3 3s-1.4 3.5-3 3.5zm9.6 0c-1.9 0-3.4-1.5-3.4-3.4 0-2.4 1.8-4.6 4.4-6.2L19 10c-1.6 1-2.6 2.2-2.6 3.8.4-.2.9-.3 1.4-.3 1.7 0 3 1.3 3 3s-1.4 3.5-3 3.5z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.2 18c-1.9 0-3.4-1.5-3.4-3.4 0-2.4 1.8-4.6 4.4-6.2L9.4 10C7.8 11 6.8 12.2 6.8 13.8c.4-.2.9-.3 1.4-.3 1.7 0 3 1.3 3 3s-1.4 3.5-3 3.5zm9.6 0c-1.9 0-3.4-1.5-3.4-3.4 0-2.4 1.8-4.6 4.4-6.2L19 10c-1.6 1-2.6 2.2-2.6 3.8.4-.2.9-.3 1.4-.3 1.7 0 3 1.3 3 3s-1.4 3.5-3 3.5z'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* Duotone / media overlay (exp_duotone) */
html.exp-duotone .sw-image-slot {
	position: relative;
}
html.exp-duotone .sw-image-slot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14, 42, 71, 0.12);
	pointer-events: none;
	border-radius: inherit;
}
html.exp-duotone .sw-image-slot img {
	filter: grayscale(0.15) contrast(1.05);
}

/* Hero video gated */
.sw-hero-video {
	display: none;
}
html.exp-hero-video.js-motion:not(.reduced-motion) .sw-hero-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
html.exp-hero-video.js-motion:not(.reduced-motion) .sw-hero-video[data-reduced-data="1"] {
	display: none;
}