/* ==========================================================================
   Homepage hero motion (front page only).
   Animates transform / opacity / individual transform properties only, so it
   stays on the compositor. Entrance is pure CSS (works without JS); main.js
   adds the scroll-linked --hero-p value. Everything is off under reduced motion.
   ========================================================================== */

.hero { overflow: hidden; --hero-p: 0; }
.hero-grid { position: relative; z-index: 1; }

/* Background: slow Ken Burns zoom + scroll parallax (separate properties so they compose). */
.hero .hero-bg {
	inset: -10% 0;
	transform-origin: 30% 60%;
	animation: alaghsan-kenburns 30s ease-in-out infinite alternate;
	translate: 0 calc(var(--hero-p) * 12%);
	will-change: scale, translate;
}
@keyframes alaghsan-kenburns {
	from { scale: 1.06; }
	to   { scale: 1.18; }
}

/* Warm sunlight that slowly breathes in the top corner. */
.hero-light {
	position: absolute;
	top: -25%;
	right: -15%;
	width: min(70vw, 1100px);
	aspect-ratio: 1;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 60% 40%, rgba(255, 236, 190, .34), rgba(255, 220, 150, .1) 38%, transparent 66%);
	mix-blend-mode: screen;
	animation: alaghsan-sun 9s ease-in-out infinite alternate;
}
@keyframes alaghsan-sun {
	from { opacity: .5; translate: 0 0; }
	to   { opacity: 1; translate: -4% 3%; }
}

/* Pollen drifting up through the light. Positions come from front-page.php. */
.hero-pollen { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-pollen i {
	position: absolute;
	left: var(--x);
	bottom: -12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(232, 246, 205, .9);
	box-shadow: 0 0 10px 2px rgba(200, 235, 160, .45);
	opacity: 0;
	animation: alaghsan-drift var(--d) linear var(--dl) infinite;
}
.hero-pollen i:nth-child(3n) { width: 3px; height: 3px; }
.hero-pollen i:nth-child(4n) { width: 7px; height: 7px; filter: blur(1px); }
@keyframes alaghsan-drift {
	0%   { transform: translate3d(0, 0, 0); opacity: 0; }
	12%  { opacity: .85; }
	50%  { transform: translate3d(28px, -50vh, 0); }
	85%  { opacity: .55; }
	100% { transform: translate3d(-18px, -105vh, 0); opacity: 0; }
}

/* Entrance choreography ---------------------------------------------------- */
.hero .eyebrow { opacity: 0; animation: alaghsan-fade-up .8s ease-out .15s forwards; }
.hero .eyebrow::before { transform-origin: left center; transform: scaleX(0); animation: alaghsan-line .9s cubic-bezier(.2, .7, .2, 1) .25s forwards; }

/* Each headline word rises from behind its own mask. The padding keeps descenders
   (g, y, q) and italic overhangs from being clipped by the mask. */
.hero h1 .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0 .08em .16em 0;
	margin: 0 -.08em -.16em 0;
}
.hero h1 .w > span {
	display: inline-block;
	transform: translateY(110%);
	animation: alaghsan-word 1s cubic-bezier(.2, .75, .15, 1) forwards;
	animation-delay: calc(.35s + var(--i) * .09s);
}

.hero-copy > p { opacity: 0; animation: alaghsan-fade-up .9s ease-out 1s forwards; }
.hero-actions { opacity: 0; animation: alaghsan-fade-up .9s ease-out 1.2s forwards; }

/* Featured card slides in, then floats. translate and transform compose. */
.now-card {
	opacity: 0;
	animation:
		alaghsan-card-in 1.1s cubic-bezier(.2, .7, .2, 1) 1.35s forwards,
		alaghsan-float 6s ease-in-out 2.6s infinite;
	transition: background .3s, border-color .3s;
}
.now-card:hover { background: rgba(255, 253, 248, .17); border-color: rgba(255, 255, 255, .42); }

@keyframes alaghsan-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes alaghsan-line { to { transform: scaleX(1); } }
@keyframes alaghsan-word { to { transform: translateY(0); } }
@keyframes alaghsan-card-in { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes alaghsan-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Content drifts up and fades as the visitor scrolls past the hero. */
.hero-grid {
	translate: 0 calc(var(--hero-p) * -70px);
	opacity: calc(1 - var(--hero-p) * 1.4);
}

/* Scroll cue ----------------------------------------------------------------- */
.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	translate: -50% 0;
	z-index: 1;
	width: 26px;
	height: 42px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 14px;
	opacity: 0;
	animation: alaghsan-fade-up .8s ease-out 2s forwards;
}
.scroll-cue:hover { border-color: #fff; }
.scroll-cue span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #fff;
	animation: alaghsan-cue 1.8s ease-in-out infinite;
}
@keyframes alaghsan-cue {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(14px); opacity: 0; }
}

/* Save battery: main.js pauses the loops while the hero is off-screen. */
.hero.is-offscreen *, .hero.is-offscreen *::before { animation-play-state: paused !important; }

@media (max-width: 1100px) {
	.scroll-cue { display: none; }
	.hero-pollen i:nth-child(n+8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero .hero-bg, .hero-light, .hero .eyebrow, .hero .eyebrow::before, .hero h1 .w > span,
	.hero-copy > p, .hero-actions, .now-card, .scroll-cue, .scroll-cue span {
		animation: none !important;
		opacity: 1;
		transform: none;
		translate: none;
	}
	.hero-pollen { display: none; }
	.hero-grid { translate: none; opacity: 1; }
	.scroll-cue { translate: -50% 0; }
}