/* ---------------------------------------------------------------
   Motion: reveals + card hover, shared by every block.
   Nothing is hidden unless JavaScript is running (html.wtm-motion),
   and everything switches off for visitors who prefer less motion.
---------------------------------------------------------------- */
:root {
	--wtm-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--wtm-reveal-time: 0.75s;
	--wtm-step: 110ms; /* gap between items in a sequence */
}

/* ---------- Hidden until revealed ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wtm-motion :is(.wtm-reveal, .wtm-flicker, .wtm-zoom, .wtm-seq) { --wtm-delay: 0ms; }
	.wtm-motion .wtm-delay-1 { --wtm-delay: 1s; }
	.wtm-motion .wtm-delay-2 { --wtm-delay: 2s; }

	/* a block that reveals as a whole */
	.wtm-motion :is(.wtm-reveal, .wtm-flicker):not(.wtm-seq) {
		opacity: 0;
	}
	.wtm-motion .wtm-reveal:not(.wtm-seq).is-in {
		animation: wtm-rise var(--wtm-reveal-time) var(--wtm-ease) var(--wtm-delay) both;
	}
	.wtm-motion .wtm-flicker:not(.wtm-seq).is-in {
		animation: wtm-flicker 0.9s steps(1, end) var(--wtm-delay) both;
	}

	/* a block whose children appear one after another */
	.wtm-motion .wtm-seq > * { opacity: 0; }
	.wtm-motion .wtm-seq.is-in > * {
		animation: wtm-rise var(--wtm-reveal-time) var(--wtm-ease) calc(var(--wtm-delay) + var(--i, 0) * var(--wtm-step)) both;
	}
	.wtm-motion .wtm-seq.wtm-flicker.is-in > * {
		animation: wtm-flicker 0.9s steps(1, end) calc(var(--wtm-delay) + var(--i, 0) * var(--wtm-step)) both;
	}
	/* softer version: less travel, no flicker (About / The Premise) */
	.wtm-motion .wtm-soft.is-in,
	.wtm-motion .wtm-soft.is-in > * { --wtm-rise: 10px; animation-duration: 0.9s; }

	/* images: scale down into place instead of moving (banners) */
	.wtm-motion .wtm-zoom { overflow: hidden; }
	.wtm-motion .wtm-zoom :is(img, .wp-block-cover__image-background, video) {
		opacity: 0;
		transform: scale(1.07);
	}
	.wtm-motion .wtm-zoom.is-in :is(img, .wp-block-cover__image-background, video) {
		animation: wtm-zoom 1.4s var(--wtm-ease) var(--wtm-delay) both;
	}
}

@keyframes wtm-rise {
	from { opacity: 0; transform: translate3d(0, var(--wtm-rise, 16px), 0); }
	to   { opacity: 1; transform: none; }
}

/* fade with a couple of flickers on the way in */
@keyframes wtm-flicker {
	0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
	20%  { opacity: 0.45; }
	28%  { opacity: 0.1; }
	42%  { opacity: 0.85; }
	52%  { opacity: 0.35; }
	70%  { opacity: 1; transform: translate3d(0, 2px, 0); }
	78%  { opacity: 0.7; }
	100% { opacity: 1; transform: none; }
}

@keyframes wtm-zoom {
	from { opacity: 0; transform: scale(1.07); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---------- One card hover for the whole site ---------- */
.wtm-card,
.wtm-tm__card,
.wtm-or__shop {
	transition:
		transform 0.25s var(--wtm-ease),
		border-color 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}
.wtm-card:hover,
.wtm-tm__card:hover,
a.wtm-or__shop:hover {
	transform: translateY(-4px);
	border-color: var(--accent, currentColor);
	box-shadow: 0 18px 30px -22px rgb(0 0 0 / 0.55);
}
/* rows behave like cards, but slide instead of lift */
.wtm-fi--list .wtm-fi__tab { transition: color 0.2s, padding 0.25s var(--wtm-ease), border-color 0.25s; }
.wtm-fi--list .wtm-fi__tab:hover { padding-inline-start: 0.6rem; }

/* ---------- Every gold button behaves like the header's ----------
   Set a button's background to Gold (on ink) or Gold bright in the editor
   and it gets this automatically. No class needed. */
/* ---------- Every gold button behaves like the Order form's ---------- */
.wp-block-button__link:is(.has-gold-light-background-color, .has-gold-bright-background-color, .has-gold-background-color),
.wtm-cta .wp-block-button__link,
a.wtm-cta,
.wtm-header__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--gold-light, #E3B45F);
	color: var(--wp--preset--color--ink, #0B1A33);
	border-radius: 2px;
	transition: background-color 0.2s ease;
}
.wp-block-button__link:is(.has-gold-light-background-color, .has-gold-bright-background-color, .has-gold-background-color):is(:hover, :focus-visible),
.wtm-cta .wp-block-button__link:is(:hover, :focus-visible),
a.wtm-cta:is(:hover, :focus-visible),
.wtm-header__cta .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--gold-bright, #F7DCA4);
	color: var(--wp--preset--color--ink, #0B1A33);
}

@media (prefers-reduced-motion: reduce) {
	.wtm-card, .wtm-tm__card, .wtm-or__shop, .wp-block-button__link { transition: none; }
	.wtm-card:hover, .wtm-tm__card:hover, a.wtm-or__shop:hover { transform: none; }
}