/**
 * Hero entrance animation.
 *
 * Sequence:
 *   1. gold mark slides down from the top - translation only, no scaling or rotation
 *   2. blue mark slides up from the bottom the same way, overlapping step 1
 *   3. product logo slides in and fades up
 *   4. headline slides in from the opposite side and fades up
 *
 * Direction is mirrored per layout via --lyr-from-logo / --lyr-from-copy:
 * on Day 1 the logo sits left and the headline right; on Day 3/7 that is flipped.
 * Each element therefore enters from its own outer edge.
 *
 * Timing knobs live in the :root block below - adjust there, not in the keyframes.
 */

.lyr-hero {
	--lyr-slide: 120px;
	--lyr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--lyr-blue-delay: 100ms;
	--lyr-blue-dur: 600ms;
	--lyr-gold-delay: 0ms;
	--lyr-gold-dur: 600ms;
	--lyr-logo-delay: 800ms;
	--lyr-logo-dur: 700ms;
	--lyr-copy-delay: 1400ms;
	--lyr-copy-dur: 700ms;
}

/* Day 1: logo left, headline right. */
.lyr-hero--day1 {
	--lyr-from-logo: calc(var(--lyr-slide) * -1);
	--lyr-from-copy: var(--lyr-slide);
}

/* Day 3 / Day 7: headline left, logo right. */
.lyr-hero--split {
	--lyr-from-logo: var(--lyr-slide);
	--lyr-from-copy: calc(var(--lyr-slide) * -1);
}

@keyframes lyr-enter-blue {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes lyr-enter-gold {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes lyr-enter-logo {
	from { opacity: 0; transform: translateX(var(--lyr-from-logo, -120px)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes lyr-enter-copy {
	from { opacity: 0; transform: translateX(var(--lyr-from-copy, 120px)); }
	to   { opacity: 1; transform: translateX(0); }
}

.lyr-hero .lyr-art--blue {
	animation: lyr-enter-blue var(--lyr-blue-dur) var(--lyr-ease) var(--lyr-blue-delay) both;
}

.lyr-hero .lyr-art--gold {
	animation: lyr-enter-gold var(--lyr-gold-dur) var(--lyr-ease) var(--lyr-gold-delay) both;
}

.lyr-hero .lyr-hero__logo {
	animation: lyr-enter-logo var(--lyr-logo-dur) var(--lyr-ease) var(--lyr-logo-delay) both;
	/* logo eases in and out rather than the shared ease-out */
	animation-timing-function: ease-in-out;
}

.lyr-hero .lyr-hero__copy {
	animation: lyr-enter-copy var(--lyr-copy-dur) var(--lyr-ease) var(--lyr-copy-delay) both;
}

/* Sky arcs pop in after the marks begin (QA #29). */
.lyr-hero .lyr-art--sky-a,
.lyr-hero .lyr-art--sky-b {
	animation: lyr-fade 450ms var(--lyr-ease) 500ms both;
}

@keyframes lyr-fade {
	from { scale: 0; opacity: 0; }
	50% { scale: 1.2; opacity: 0.5; }
	to   { scale: 1; opacity: 1; }
}

/* Mobile: no entrance animation at all.
 *
 * Below 900px the hero is a single flat artboard (mobile_hero.svg) rather than
 * five separately-positioned layers, so there is nothing left to slide the blue
 * and gold marks against - and the slide-in distances were authored for the
 * wide two-column hero, not a centred stack. The desktop animation above is
 * unchanged. */
@media (max-width: 900px) {
	.lyr-hero .lyr-art--blue,
	.lyr-hero .lyr-art--gold,
	.lyr-hero .lyr-art--sky-a,
	.lyr-hero .lyr-art--sky-b,
	.lyr-hero .lyr-hero__logo,
	.lyr-hero .lyr-hero__copy {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* No motion: land everything in its final state immediately. */
@media (prefers-reduced-motion: reduce) {
	.lyr-hero .lyr-art--blue,
	.lyr-hero .lyr-art--gold,
	.lyr-hero .lyr-art--sky-a,
	.lyr-hero .lyr-art--sky-b,
	.lyr-hero .lyr-hero__logo,
	.lyr-hero .lyr-hero__copy {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Editor and no-JS safety: never leave the hero permanently blank. */
.wp-admin .lyr-hero .lyr-art--blue,
.wp-admin .lyr-hero .lyr-art--gold,
.wp-admin .lyr-hero .lyr-hero__logo,
.wp-admin .lyr-hero .lyr-hero__copy {
	animation: none;
	opacity: 1;
	transform: none;
}