/* Category hub banner line art — draw-on entrance + two quiet ambient loops.
   Loaded only on hub pages that have a scene registered (see inc/hub-art.php),
   so pages without one carry none of this weight. */

.hub-art { position: relative; height: 260px; }
.hub-art svg { width: 100%; height: 100%; display: block; overflow: visible; }

.scene-path {
	fill: none;
	stroke: var(--pine);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.scene-contour {
	fill: none;
	stroke: var(--pine);
	stroke-width: 1;
}
.scene-trail {
	fill: none;
	stroke: var(--mist);
	stroke-width: 1.7;
	stroke-linecap: round;
	/* stroke-dasharray intentionally omitted here -- the pathLength=1 draw-on
	   technique below needs a single dash spanning the whole path, so any
	   dash pattern set here would just get overridden by .draw anyway. The
	   dashed "trail" look comes from .scene-trail-shimmer layered on top. */
}
.scene-sun-ring {
	fill: none;
	stroke: var(--marigold);
	stroke-width: 1.6;
	transform-box: fill-box;
	transform-origin: center;
}
.scene-ray {
	stroke: var(--marigold);
	stroke-width: 1.4;
	stroke-linecap: round;
}
.scene-accent {
	fill: none;
	stroke: var(--pine-deep);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.scene-bird {
	fill: none;
	stroke: var(--mist);
	stroke-width: 1.3;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: center;
}

/* draw-on paths: pathLength="1" normalizes dash math regardless of geometry */
.draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.hub-art.play .draw-primary { animation: hubArtDraw 1.15s cubic-bezier(.4,0,.2,1) 0.05s forwards; }
.hub-art.play .draw-secondary { animation: hubArtDraw 1.05s cubic-bezier(.4,0,.2,1) 0.55s forwards; }
.hub-art.play .draw-ray { animation: hubArtDraw .5s ease-out forwards; }
.hub-art.play .draw-ray:nth-of-type(1) { animation-delay: 1.05s; }
.hub-art.play .draw-ray:nth-of-type(2) { animation-delay: 1.10s; }
.hub-art.play .draw-ray:nth-of-type(3) { animation-delay: 1.15s; }
.hub-art.play .draw-ray:nth-of-type(4) { animation-delay: 1.20s; }
.hub-art.play .draw-ray:nth-of-type(5) { animation-delay: 1.25s; }
.hub-art.play .draw-ray:nth-of-type(6) { animation-delay: 1.30s; }

@keyframes hubArtDraw { to { stroke-dashoffset: 0; } }

.fade-up {
	opacity: 0;
	transform: translateY(6px);
}
.hub-art.play .scene-sun {
	animation: hubArtFadeIn .5s ease-out 0.95s forwards;
}
.hub-art.play .scene-accent-group {
	animation: hubArtFadeUp .6s cubic-bezier(.2,.7,.3,1) 1.5s forwards;
}
.hub-art.play .scene-bird-1 {
	animation: hubArtFadeUp .7s ease-out 1.85s forwards;
}
.hub-art.play .scene-bird-2 {
	animation: hubArtFadeUp .7s ease-out 2.05s forwards;
}
@keyframes hubArtFadeIn { to { opacity: 1; } }
@keyframes hubArtFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ambient loops, start once the intro has finished. Each keyframe set
   re-asserts its resting opacity/transform at every step -- switching from
   the entrance animation to the loop otherwise snaps the element back to
   its pre-entrance (hidden) state for a frame, since the two animations
   never touch the same properties by coincidence. */
.hub-art.settled .scene-ray-group { animation: hubArtRaypulse 2.6s ease-in-out infinite; }
.hub-art.settled .scene-trail-shimmer { animation: hubArtMarchdash 12s linear infinite; }
/* Which loop an accent element gets is a modifier class chosen per scene --
   a bob suits the traveler's footsteps, a sway suits anything hanging or
   rooted (a flag, a bell, a tree canopy). Both re-assert opacity/transform
   at every step for the same handoff-safety reason noted above. */
.hub-art.settled .scene-accent-group.loop-bob { animation: hubArtFigureBob 1.8s ease-in-out infinite; }
.hub-art.settled .scene-accent-group.loop-sway { animation: hubArtSway 2.4s ease-in-out infinite; }
.hub-art.settled .scene-sun-ring { animation: hubArtSunShine 2.6s ease-in-out infinite; }
.hub-art.settled .scene-bird-1 { animation: hubArtBirdFlap .9s ease-in-out infinite; }
.hub-art.settled .scene-bird-2 { animation: hubArtBirdFlap 1.05s ease-in-out .15s infinite backwards; }
.hub-art.settled .scene-steam-1 { animation: hubArtRise 2.4s ease-in .1s infinite; }
.hub-art.settled .scene-steam-2 { animation: hubArtRise 2.7s ease-in .7s infinite; }
.hub-art.settled .scene-steam-3 { animation: hubArtRise 2.5s ease-in 1.3s infinite; }
@keyframes hubArtRaypulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes hubArtMarchdash { to { stroke-dashoffset: -22; } }
@keyframes hubArtFigureBob {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-1.6px); }
}
@keyframes hubArtSway {
	0%, 100% { opacity: 1; transform: rotate(0deg); }
	50% { opacity: 1; transform: rotate(5deg); }
}
@keyframes hubArtSunShine {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@keyframes hubArtBirdFlap {
	0%, 100% { opacity: 1; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(0.35); }
}
/* Steam wisps loop independently of the entrance choreography (there's no
   single "settled" resting frame to hold -- each wisp is meant to keep
   rising and fading, one after another), so unlike the loops above this
   keyframe doesn't need to re-assert a static end state. */
@keyframes hubArtRise {
	0% { opacity: 0; transform: translateY(0); }
	15% { opacity: 0.65; }
	100% { opacity: 0; transform: translateY(-18px); }
}

.scene-trail-shimmer {
	fill: none;
	stroke: var(--marigold);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 2 9;
	opacity: 0.7;
}

.scene-steam {
	fill: none;
	stroke: var(--mist);
	stroke-width: 1.5;
	stroke-linecap: round;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hub-art .draw,
	.hub-art .fade-up,
	.hub-art .scene-sun,
	.hub-art .scene-accent-group,
	.hub-art .scene-bird-1,
	.hub-art .scene-bird-2 {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.scene-ray-group,
	.scene-trail-shimmer,
	.scene-sun-ring {
		animation: none !important;
		transform: none !important;
	}
	.scene-steam-1,
	.scene-steam-2,
	.scene-steam-3 {
		animation: none !important;
		opacity: 0.55 !important;
		transform: none !important;
	}
}

@media (max-width: 780px) {
	.hub-art { order: -1; height: 190px; }
}