/**
 * IDW — motion.
 *
 * Design rules that keep motion premium rather than distracting:
 *  - Reveals move a short distance (26px) and settle with easeOutQuint.
 *  - Nothing animates for longer than ~900ms.
 *  - Everything is opt-out via prefers-reduced-motion AND a Customizer switch.
 *  - Only transform/opacity are animated, so nothing triggers layout.
 */

/* ------------------------------------------------------------- Keyframes */

@keyframes idw-fade-up {
	from { opacity: 0; transform: translate3d(0, var(--idw-reveal-distance), 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes idw-fade-down {
	from { opacity: 0; transform: translate3d(0, calc(-1 * var(--idw-reveal-distance)), 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes idw-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes idw-zoom-in {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}

@keyframes idw-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes idw-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

@keyframes idw-float-slow {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -22px, 0) rotate(2deg); }
}

@keyframes idw-ripple {
	0%   { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes idw-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes idw-scroll-hint {
	0%        { transform: translateY(0); opacity: 0; }
	28%       { opacity: 1; }
	100%      { transform: translateY(16px); opacity: 0; }
}

@keyframes idw-spin {
	to { transform: rotate(360deg); }
}

@keyframes idw-pulse-ring {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--idw-accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 18px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes idw-gradient-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	33%  { transform: translate3d(4%, -3%, 0) scale(1.08); }
	66%  { transform: translate3d(-3%, 3%, 0) scale(1.04); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Slow zoom for image-only heroes — the "Ken Burns" fallback. */
@keyframes idw-ken-burns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(1.5%, -1.5%, 0); }
}

/* -------------------------------------------------------- Scroll reveals */

/*
 * Elements opt in with data-idw-reveal. JS adds .is-revealed via
 * IntersectionObserver. If JS never runs, the fallback below keeps content
 * visible — content must never depend on JavaScript to be readable.
 */
[data-idw-reveal] {
	opacity: 0;
	will-change: transform, opacity;
}

[data-idw-reveal].is-revealed {
	animation-duration: 760ms;
	animation-timing-function: var(--idw-ease);
	animation-fill-mode: both;
	animation-delay: var(--idw-reveal-delay, 0ms);
	will-change: auto;
}

[data-idw-reveal="up"].is-revealed    { animation-name: idw-fade-up; }
[data-idw-reveal="down"].is-revealed  { animation-name: idw-fade-down; }
[data-idw-reveal="fade"].is-revealed  { animation-name: idw-fade-in; }
[data-idw-reveal="zoom"].is-revealed  { animation-name: idw-zoom-in; }

/* No-JS / observer-unsupported fallback. */
.no-js [data-idw-reveal],
html:not(.idw-motion) [data-idw-reveal] {
	opacity: 1;
	animation: none;
}

/* Stagger helper: children reveal in sequence. */
[data-idw-stagger] > * {
	--idw-reveal-delay: calc(var(--idw-stagger-step, 90ms) * var(--idw-i, 0));
}

/* --------------------------------------------------------- Ambient motion */

.idw-float { animation: idw-float 6s var(--idw-ease-soft) infinite; }
.idw-float--slow { animation: idw-float-slow 11s var(--idw-ease-soft) infinite; }
.idw-float--delayed { animation-delay: -3s; }

.idw-orb--drift { animation: idw-gradient-drift 22s var(--idw-ease-soft) infinite; }

.idw-pulse { animation: idw-pulse-ring 2.4s var(--idw-ease-soft) infinite; }

/* ----------------------------------------------------------- Scroll hint */

.idw-scroll-hint {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--idw-fs-xs);
	letter-spacing: var(--idw-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
}

.idw-scroll-hint:hover { color: #fff; }

.idw-scroll-hint__mouse {
	position: relative;
	width: 26px;
	height: 42px;
	border: 2px solid currentColor;
	border-radius: 14px;
	opacity: 0.8;
}

.idw-scroll-hint__mouse::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: currentColor;
	animation: idw-scroll-hint 1.9s var(--idw-ease-soft) infinite;
}

/* --------------------------------------------------------- Parallax layer */

/*
 * Subtle parallax. JS writes --idw-parallax-y (a px value already damped
 * by the element's data-idw-parallax speed) on scroll, inside rAF.
 */
[data-idw-parallax] {
	transform: translate3d(0, var(--idw-parallax-y, 0px), 0);
	will-change: transform;
}

/* ------------------------------------------------------ Marquee (insurers) */

.idw-marquee {
	position: relative;
	overflow: hidden;
	/* Fade the edges so logos dissolve rather than clip. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.idw-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: var(--idw-marquee-gap, 4rem);
	animation: idw-marquee var(--idw-marquee-duration, 34s) linear infinite;
}

.idw-marquee--reverse .idw-marquee__track {
	animation-direction: reverse;
}

.idw-marquee:hover .idw-marquee__track,
.idw-marquee:focus-within .idw-marquee__track {
	animation-play-state: paused;
}

/* The track is duplicated in markup; the copy is hidden from assistive tech. */
.idw-marquee__group {
	display: flex;
	align-items: center;
	gap: var(--idw-marquee-gap, 4rem);
	flex: none;
}

/* ------------------------------------------------------------ Reduced motion */

/*
 * Two switches: the OS preference, and a Customizer toggle that adds
 * .idw-reduce-motion to <html> for clients who want a still site.
 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-idw-reveal] { opacity: 1 !important; }
	[data-idw-parallax] { transform: none !important; }

	.idw-marquee__track { animation: none !important; }
}

html.idw-reduce-motion,
html.idw-reduce-motion * {
	animation: none !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

html.idw-reduce-motion [data-idw-reveal] { opacity: 1 !important; }
html.idw-reduce-motion [data-idw-parallax] { transform: none !important; }