/*
 * Kaladorn motion (front end only; driven by assets/js/motion.js).
 *
 * - Hidden-until-revealed states only apply under html.kaladorn-motion, which the head script
 *   sets when the visitor allows motion, so content can never get stuck invisible.
 * - Looping touches sit behind prefers-reduced-motion: no-preference.
 * - Entrance keyframes only define `from`, so they end on each element's own styles
 *   (offsets, hover lifts) instead of overriding them.
 */

/* ---------- Scroll reveals ---------- */
.kaladorn-motion .k-reveal:not(.is-in),
.kaladorn-motion .k-stagger:not(.is-in) > * {
	opacity: 0;
}

.kaladorn-motion .k-reveal.is-in {
	animation: k-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.kaladorn-motion .k-stagger.is-in > * {
	animation: k-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--k-i, 0) * 90ms);
}

/* Inline rows (chips, objectives) slide in from the side instead. */
.kaladorn-motion .wp-block-list.is-style-chips.is-in > *,
.kaladorn-motion .kaladorn-news-filter.is-in > *,
.kaladorn-motion .kaladorn-quest__objectives ol.is-in > * {
	animation-name: k-slide;
	animation-duration: 0.45s;
	animation-delay: calc(var(--k-i, 0) * 60ms);
}

@keyframes k-rise {
	from { opacity: 0; transform: translateY(22px); }
}

@keyframes k-slide {
	from { opacity: 0; transform: translateX(-10px); }
}

/* ---------- Era timeline: the line draws itself, then each era lights up ---------- */
.kaladorn-motion .kaladorn-timeline::before {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 1.6s cubic-bezier(0.6, 0, 0.2, 1);
}

.kaladorn-motion .kaladorn-timeline.is-in::before {
	transform: none;
}

.kaladorn-motion .kaladorn-timeline.is-in > .kaladorn-era {
	animation-delay: calc(0.2s + var(--k-i, 0) * 0.35s);
}

.kaladorn-motion .kaladorn-timeline.is-in > .kaladorn-era::before {
	animation: k-era-light 1.2s ease-out backwards;
	animation-delay: calc(0.2s + var(--k-i, 0) * 0.35s);
}

@keyframes k-era-light {
	from { transform: scale(0.2); box-shadow: 0 0 0 0 rgba(224, 138, 70, 0.9); }
	40% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(224, 138, 70, 0.35); }
	to { box-shadow: 0 0 0 14px rgba(224, 138, 70, 0); }
}

/* ---------- Unit table: HP bars grow ---------- */
.kaladorn-army__bar {
	transform-origin: left center;
}

.kaladorn-motion .kaladorn-army:not(.is-in) .kaladorn-army__bar {
	transform: scaleX(0);
}

.kaladorn-motion .kaladorn-army.is-in .kaladorn-army__bar {
	animation: k-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(0.25s + var(--k-i, 0) * 70ms);
}

@keyframes k-grow {
	from { transform: scaleX(0); }
}

/* ---------- Battle report: the "Victory!" stamp ---------- */
.kaladorn-motion .kaladorn-phones.is-in .kaladorn-win {
	animation: k-stamp 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) 0.9s backwards;
}

@keyframes k-stamp {
	from { opacity: 0; transform: scale(2.3) rotate(-9deg); }
	60% { opacity: 1; transform: scale(0.94) rotate(1.5deg); }
}

@media (prefers-reduced-motion: no-preference) {
	.kaladorn-phone__body .kaladorn-win {
		animation: k-glow 3.2s ease-in-out infinite alternate;
	}

	.kaladorn-motion .kaladorn-phones.is-in .kaladorn-win {
		animation: k-stamp 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) 0.9s backwards, k-glow 3.2s ease-in-out 1.6s infinite alternate;
	}
}

@keyframes k-glow {
	from { text-shadow: 0 0 0 rgba(224, 138, 70, 0); }
	to { text-shadow: 0 0 14px rgba(224, 138, 70, 0.55); }
}

/* ---------- Sun time track ---------- */
@media (prefers-reduced-motion: no-preference) {
	.kaladorn-suntrack .ks-route[stroke-dasharray] {
		animation: k-march 1.4s linear infinite;
	}

	.kaladorn-suntrack .ks-sun-ring {
		transform-box: fill-box;
		transform-origin: center;
		animation: k-spin 14s linear infinite;
	}

	.kaladorn-suntrack .ks-event {
		animation: k-blink 2.6s ease-in-out infinite;
	}
}

@keyframes k-march {
	to { stroke-dashoffset: -16; }
}

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

@keyframes k-blink {
	50% { opacity: 0.55; }
}

/* ---------- Hover flourishes ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Cards lift with a copper glow. */
	.kaladorn-wiki-card,
	.wp-block-image.is-style-portrait img,
	.kaladorn-hero-grid .wp-block-post,
	.kaladorn-race-grid .wp-block-post,
	.kaladorn-entry-grid .wp-block-post,
	.kaladorn-news-grid .wp-block-post,
	.kaladorn-news-latest .wp-block-post,
	.kaladorn-art-strip .wp-block-image img {
		transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
	}

	.kaladorn-wiki-card:hover,
	.kaladorn-hero-grid .wp-block-post:hover,
	.kaladorn-race-grid .wp-block-post:hover,
	.kaladorn-entry-grid .wp-block-post:hover,
	.kaladorn-news-grid .wp-block-post:hover,
	.kaladorn-news-latest .wp-block-post:hover {
		transform: translateY(-4px);
		box-shadow: 0 0 0 1px rgba(224, 138, 70, 0.55), 0 18px 36px -18px rgba(224, 138, 70, 0.6);
	}

	.wp-block-image.is-style-portrait:hover img,
	.kaladorn-art-strip .wp-block-image:hover img {
		transform: translateY(-4px) scale(1.015);
		border-color: #e08a46;
		box-shadow: 0 18px 36px -18px rgba(224, 138, 70, 0.6);
	}

	/* Buttons: a glint sweeps across. */
	.wp-block-button__link,
	.wp-element-button {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.wp-block-button__link::after,
	.wp-element-button::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 200, 0.5) 50%, transparent 70%);
		transform: translateX(-120%);
		pointer-events: none;
	}

	.wp-block-button__link:hover::after,
	.wp-element-button:hover::after {
		transform: translateX(120%);
		transition: transform 0.8s ease;
	}

	/* Race flags flutter. */
	.kaladorn-race-flag i {
		transform-origin: left center;
	}

	.kaladorn-race-flag:hover i,
	tr:hover .kaladorn-race-flag i,
	.wp-block-post:hover .kaladorn-race-flag i {
		animation: k-flutter 0.9s ease-in-out infinite;
	}

	/* Wiki sidebar groups slide open. */
	.kaladorn-wiki-nav__group[open] > ul {
		animation: k-drop 0.25s ease-out;
	}
}

@keyframes k-flutter {
	0%, 100% { transform: none; }
	30% { transform: skewY(-8deg) scaleX(0.9); }
	65% { transform: skewY(6deg) scaleX(0.95); }
}

@keyframes k-drop {
	from { opacity: 0; transform: translateY(-6px); }
}

/* The cover tilts toward the mouse (motion.js sets the angles). */
.k-tilt {
	transform: perspective(1100px) rotateX(var(--k-rx, 0deg)) rotateY(var(--k-ry, 0deg));
	transition: transform 0.35s ease-out;
	will-change: transform;
}

.k-tilt.is-style-art-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	pointer-events: none;
	background: radial-gradient(circle at var(--k-gx, 50%) var(--k-gy, 50%), rgba(255, 230, 190, 0.18), transparent 55%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.k-tilt.wp-block-image {
	position: relative;
}

.k-tilt.is-style-art-plate:hover::after {
	opacity: 1;
}

/* ---------- Atmosphere: embers ---------- */
.has-embers {
	position: relative;
	overflow: hidden;
}

.has-embers > :not(.kaladorn-embers):not(.kaladorn-planet-canvas) {
	position: relative;
	z-index: 1;
}

.kaladorn-embers {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
	overflow: hidden;
}

.kaladorn-embers i {
	position: absolute;
	left: var(--x);
	bottom: var(--y);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: radial-gradient(circle, #ffd9a0 0%, #e08a46 55%, rgba(224, 138, 70, 0) 75%);
	box-shadow: 0 0 6px 1px rgba(224, 138, 70, 0.5);
	opacity: 0;
	animation: k-ember var(--d) linear var(--delay) infinite;
}

/* Fainter on the parchment hero in light mode. */
.kaladorn-hero .kaladorn-embers {
	opacity: 0.55;
}

@keyframes k-ember {
	0% { opacity: 0; transform: translate(0, 0); }
	12% { opacity: 0.9; }
	50% { opacity: 0.6; transform: translate(calc(var(--drift) * 0.6), -32vh); }
	70% { opacity: 0.85; }
	100% { opacity: 0; transform: translate(var(--drift), -62vh); }
}

@media (prefers-reduced-motion: reduce) {
	.kaladorn-embers {
		display: none;
	}
}