/**
 * Flag Tree — the tree's own visual system, fully namespaced
 * (flag-tree-*) and independent from the turtle's styling in
 * assets/css/stories.css and the meteor's in
 * assets/css/kalemiyle-taninir-meteor.css. Unlike either of those, this
 * symbol never moves through the stage -- it's rooted at a fixed point
 * (bottom-left, chosen to sit clear of the turtle's central roaming
 * bounds and the meteor's upper-right resting spot), so there's no
 * per-frame JS here at all. All idle motion is CSS @keyframes;
 * assets/js/flag-tree-wind.js only ever toggles one class for the
 * occasional gust.
 */

/* ── the link IS the whole tree, fixed in place ──
   Anchored low and to the left so the trunk base reads as planted near
   the bottom of the stage. transform-box/-origin values on the SVG
   groups below are what let the crown sway independently of this outer
   position. */
.flag-tree-link {
	position: absolute;
	left: 16%;
	top: 85%;
	transform: translate(-50%, -50%);
	display: block;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.flag-tree-svg {
	display: block;
	width: min(19vw, 250px);
	height: auto;
	overflow: visible;
}

/* Left-anchored (not centered like .turtle-label / .meteor-kt-title) --
   the tree sits right at the stage's left edge by design, so a title
   centered under it would grow equally into the off-stage void on the
   left and clip there on narrow viewports. Growing rightward from the
   tree's own left edge instead keeps it fully on-stage at any width. */
.flag-tree-title {
	position: absolute;
	left: 0;
	top: 4%;
	transform: translate(0, -14px);
	white-space: nowrap;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 0.95rem;
	letter-spacing: 0.09em;
	color: rgba(210, 216, 230, 0.75);
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.flag-tree-link:hover .flag-tree-title,
.flag-tree-link:focus-visible .flag-tree-title {
	opacity: 1;
}

.flag-tree-link:focus-visible {
	outline: 1px solid rgba(210, 216, 230, 0.5);
	outline-offset: 10px;
	border-radius: 6px;
}

.flag-tree-link:hover #flag-tree-glow,
.flag-tree-link:focus-visible #flag-tree-glow {
	filter: url(#flag-tree-soft-glow) brightness(1.35);
}

/* ── glow layer — same stacked-blur recipe as the turtle/meteor, own
   local filter and own breathing period (14.5s, deliberately different
   from the turtle's 11.5s so the two never pulse in visible unison). ── */
#flag-tree-glow {
	fill: none;
	stroke: #cfd6e6;
	stroke-linejoin: round;
	stroke-linecap: round;
	mix-blend-mode: screen;
	filter: url(#flag-tree-soft-glow);
	animation: flag-tree-glow-breathe 14.5s ease-in-out infinite;
	transition: filter 0.5s ease;
}
#flag-tree-glow path { stroke-width: 1.6; }
#flag-tree-glow g[id*="-twigs-glow"] path,
#flag-tree-glow g[id*="-twig-glow"] path,
#flag-tree-nub-glow path { stroke-width: 1; opacity: 0.85; }
#flag-tree-glow g[id*="-foliage"] path { stroke-width: 1.45; opacity: 0.85; }

@keyframes flag-tree-glow-breathe {
	0%, 100% { stroke-opacity: 0.30; }
	50%      { stroke-opacity: 0.58; }
}

/* ── crisp line beneath the glow ── */
#flag-tree-line {
	fill: none;
	stroke: #dfe4ef;
	stroke-opacity: 0.8;
	stroke-linejoin: round;
	stroke-linecap: round;
}
#flag-tree-line path { stroke-width: 1.2; }
.flag-tree-twig { stroke-width: 0.85; stroke-opacity: 0.7; }
.flag-foliage .flag-tree-twig { stroke-width: 1.15; stroke-opacity: 0.78; }

/* ── the tree's anatomy, and its rig ──
   Real lenga/ñire flag trees aren't "a trunk plus parallel branches" --
   growth is irregular, asymmetric, and almost entirely downwind, with
   sparse foliage riding the outer branches rather than a filled canopy.
   See the docblock in template-parts/flag-tree.php for the full anatomy
   this silhouette is built from.
   The rig mirrors that structure with three nested branch tiers:
   .flag-sway (a primary branch straight off the backbone) can contain
   .flag-sway-sec (a secondary fork), which can contain .flag-sway-twig
   (a twig cluster) -- each an SVG <g> nested inside its parent, so a
   twig's actual on-screen motion is every ancestor's rotation plus its
   own. .flag-foliage clusters nest one level deeper still (inside
   whichever twig or branch grew them) and carry no idle animation of
   their own -- during idle wind they simply move with their host, and
   only gain independent motion during a gust (see the bottom of this
   file). One shared @keyframes (flag-tree-sway) reads a --sway-amp
   custom property, so each element only needs to set its own
   amplitude/duration/delay -- not its own keyframe. */

#flag-tree-crown, #flag-tree-crown-glow { transform-box: view-box; transform-origin: 95px 210px; }

@keyframes flag-tree-sway {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(var(--sway-amp, -2deg)); }
}

/* -- windward side + the one broken branch: barely any motion, on
   purpose -- these read as stunted/half-dead wood, not living growth. */
#flag-tree-nub, #flag-tree-nub-glow {
	transform-box: view-box; transform-origin: 57px 310px;
	--sway-amp: -0.4deg; animation: flag-tree-sway 11s ease-in-out infinite;
}
#flag-tree-windward-stub, #flag-tree-windward-stub-glow {
	transform-box: view-box; transform-origin: 67px 230px;
	--sway-amp: -0.6deg; animation: flag-tree-sway 10.2s ease-in-out infinite; animation-delay: -4s;
}
#flag-tree-windward-stub-twig, #flag-tree-windward-stub-twig-glow {
	transform-box: view-box; transform-origin: 28px 253px;
	--sway-amp: -1deg; animation: flag-tree-sway 8s ease-in-out infinite;
}
#flag-tree-windward-foliage, #flag-tree-windward-foliage-glow {
	transform-box: view-box; transform-origin: 17px 271px;
}
#flag-tree-branch-a, #flag-tree-branch-a-glow {
	transform-box: view-box; transform-origin: 84px 278px;
	--sway-amp: -0.9deg; animation: flag-tree-sway 9.6s ease-in-out infinite; animation-delay: -2s;
}

/* -- the three real limbs (primary tier). Each is now a hollow, tapered
   outline (see the .php template) rather than a single stroke, but the
   two edges share their start point exactly where the limb leaves the
   trunk, so that shared point is still the correct rotation origin --
   nothing about rotating a tapered outline around its own base differs
   from rotating a single stroke around its start. Each limb keeps its
   own curve "personality" and now reaches far downwind at every height,
   not just the main branch -- amplitude/timing here only add phase
   variety on top of already-different shapes/lengths. -- */
#flag-tree-branch-b, #flag-tree-branch-b-glow {
	transform-box: view-box; transform-origin: 92px 180px;
	--sway-amp: -2.6deg; animation: flag-tree-sway 6.8s ease-in-out infinite; animation-delay: -0.4s;
}
#flag-tree-branch-c, #flag-tree-branch-c-glow {
	transform-box: view-box; transform-origin: 102px 134px;
	--sway-amp: -2.1deg; animation: flag-tree-sway 7.6s ease-in-out infinite; animation-delay: -2.9s;
}
#flag-tree-branch-d, #flag-tree-branch-d-glow {
	transform-box: view-box; transform-origin: 116px 91px;
	--sway-amp: -1.7deg; animation: flag-tree-sway 8.4s ease-in-out infinite; animation-delay: -1.1s;
}
#flag-tree-branch-e, #flag-tree-branch-e-glow {
	transform-box: view-box; transform-origin: 130px 55px;
	--sway-amp: -1.3deg; animation: flag-tree-sway 9.2s ease-in-out infinite; animation-delay: -3.6s;
}
#flag-tree-top-twigs, #flag-tree-top-twigs-glow {
	transform-box: view-box; transform-origin: 144px 36px;
	--sway-amp: -3.5deg; animation: flag-tree-sway 4.8s ease-in-out infinite; animation-delay: -2.6s;
}

/* -- foliage clusters riding directly on a primary limb, well before any
   secondary fork -- several per limb now, spaced along its length, so
   the leaf cover reads as distributed growth rather than end-of-branch
   tufts. Each rides its host's own sway with no extra idle animation of
   its own (see the .flag-foliage gust rule further down). -- */
#flag-tree-branch-b-foliage1, #flag-tree-branch-b-foliage1-glow {
	transform-box: view-box; transform-origin: 128px 191px;
}
#flag-tree-branch-b-foliage2, #flag-tree-branch-b-foliage2-glow {
	transform-box: view-box; transform-origin: 200px 194px;
}
#flag-tree-branch-b-foliage3, #flag-tree-branch-b-foliage3-glow {
	transform-box: view-box; transform-origin: 278px 173px;
}
#flag-tree-branch-c-foliage1, #flag-tree-branch-c-foliage1-glow {
	transform-box: view-box; transform-origin: 124px 118px;
}
#flag-tree-branch-c-foliage2, #flag-tree-branch-c-foliage2-glow {
	transform-box: view-box; transform-origin: 186px 97px;
}
#flag-tree-branch-d-foliage1, #flag-tree-branch-d-foliage1-glow {
	transform-box: view-box; transform-origin: 141px 79px;
}
#flag-tree-branch-d-foliage2, #flag-tree-branch-d-foliage2-glow {
	transform-box: view-box; transform-origin: 196px 61px;
}
#flag-tree-branch-e-foliage1, #flag-tree-branch-e-foliage1-glow {
	transform-box: view-box; transform-origin: 159px 47px;
}

/* -- secondary forks (branch b and c only -- the two developed enough
   to fork again). Each splits well past its parent's own base, not
   near it, so it reads as a branch that grew its own fork rather than
   several lines fanning from one point -- and pivots where it actually
   leaves its parent. -- */
#flag-tree-branch-b-sec1, #flag-tree-branch-b-sec1-glow {
	transform-box: view-box; transform-origin: 175px 198px;
	--sway-amp: -3.4deg; animation: flag-tree-sway 5.2s ease-in-out infinite; animation-delay: -1.6s;
}
#flag-tree-branch-b-sec2, #flag-tree-branch-b-sec2-glow {
	transform-box: view-box; transform-origin: 250px 184.5px;
	--sway-amp: -3deg; animation: flag-tree-sway 5.6s ease-in-out infinite; animation-delay: -0.2s;
}
#flag-tree-branch-c-sec, #flag-tree-branch-c-sec-glow {
	transform-box: view-box; transform-origin: 216px 85px;
	--sway-amp: -3.2deg; animation: flag-tree-sway 5.4s ease-in-out infinite; animation-delay: -2.4s;
}

/* -- twig clusters: the finest division, pivoting at the tip that
   grew them, always the fastest/largest motion on the tree -- and the
   foliage tufts riding each one, which take no extra idle animation of
   their own (see the .flag-foliage rule below). -- */
#flag-tree-branch-b-sec1-twigs, #flag-tree-branch-b-sec1-twigs-glow {
	transform-box: view-box; transform-origin: 228px 151px;
	--sway-amp: -5.5deg; animation: flag-tree-sway 3.6s ease-in-out infinite; animation-delay: -1s;
}
#flag-tree-branch-b-foliage4, #flag-tree-branch-b-foliage4-glow {
	transform-box: view-box; transform-origin: 246px 146px;
}
#flag-tree-branch-b-sec2-twig, #flag-tree-branch-b-sec2-twig-glow {
	transform-box: view-box; transform-origin: 280px 216.5px;
	--sway-amp: -5deg; animation: flag-tree-sway 3.9s ease-in-out infinite; animation-delay: -2.2s;
}
#flag-tree-branch-b-foliage5, #flag-tree-branch-b-foliage5-glow {
	transform-box: view-box; transform-origin: 293px 206px;
}
#flag-tree-branch-b-tip-twigs, #flag-tree-branch-b-tip-twigs-glow {
	transform-box: view-box; transform-origin: 302px 168px;
	--sway-amp: -5.8deg; animation: flag-tree-sway 3.4s ease-in-out infinite; animation-delay: -0.5s;
}
#flag-tree-branch-b-foliage6, #flag-tree-branch-b-foliage6-glow {
	transform-box: view-box; transform-origin: 320px 171px;
}
#flag-tree-branch-c-sec-twig, #flag-tree-branch-c-sec-twig-glow {
	transform-box: view-box; transform-origin: 258px 55px;
	--sway-amp: -5.2deg; animation: flag-tree-sway 3.7s ease-in-out infinite; animation-delay: -1.8s;
}
#flag-tree-branch-c-foliage3, #flag-tree-branch-c-foliage3-glow {
	transform-box: view-box; transform-origin: 273px 49px;
}
#flag-tree-branch-c-tip-twigs, #flag-tree-branch-c-tip-twigs-glow {
	transform-box: view-box; transform-origin: 272px 82px;
	--sway-amp: -4.8deg; animation: flag-tree-sway 4s ease-in-out infinite; animation-delay: -3s;
}
#flag-tree-branch-c-foliage4, #flag-tree-branch-c-foliage4-glow {
	transform-box: view-box; transform-origin: 289px 73px;
}
#flag-tree-branch-d-twigs, #flag-tree-branch-d-twigs-glow {
	transform-box: view-box; transform-origin: 258px 48px;
	--sway-amp: -4.5deg; animation: flag-tree-sway 4.2s ease-in-out infinite; animation-delay: -0.8s;
}
#flag-tree-branch-d-foliage3, #flag-tree-branch-d-foliage3-glow {
	transform-box: view-box; transform-origin: 273px 37px;
}
#flag-tree-branch-e-twig, #flag-tree-branch-e-twig-glow {
	transform-box: view-box; transform-origin: 188px 42px;
	--sway-amp: -3.8deg; animation: flag-tree-sway 4.6s ease-in-out infinite; animation-delay: -1.4s;
}
#flag-tree-branch-e-foliage2, #flag-tree-branch-e-foliage2-glow {
	transform-box: view-box; transform-origin: 203px 31px;
}

/* ── the occasional gust ──
   assets/js/flag-tree-wind.js toggles this class on #flag-tree-crown
   and #flag-tree-crown-glow together, at a randomized interval. It's a
   single rotation applied to the whole crown at once, riding on top of
   every branch's own independent sway underneath -- one gust passing
   through, not a change of shape. animation-fill-mode isn't needed
   since the keyframe itself starts and ends at 0deg. */
.flag-tree-gust-active {
	animation: flag-tree-gust 2.8s ease-in-out 1;
}
@keyframes flag-tree-gust {
	0%   { transform: rotate(0deg); }
	28%  { transform: rotate(-4.5deg); }
	62%  { transform: rotate(-1.6deg); }
	100% { transform: rotate(0deg); }
}

/* Foliage gets no idle animation of its own (it just rides whatever
   twig/branch grew it), but reacts a little more than plain twigs
   during a gust specifically -- the same 2.8s window as the crown-wide
   gust above, playing on every .flag-foliage group at once since they're
   all descendants of #flag-tree-crown / -glow. */
.flag-tree-gust-active .flag-foliage {
	animation: flag-tree-foliage-gust 2.8s ease-in-out 1;
}
@keyframes flag-tree-foliage-gust {
	0%   { transform: rotate(0deg); }
	28%  { transform: rotate(-7deg); }
	62%  { transform: rotate(-2.4deg); }
	100% { transform: rotate(0deg); }
}

@media (max-width: 640px) {
	.flag-tree-link { left: 15%; top: 88%; }
	.flag-tree-svg { width: min(28vw, 180px); }
}

@media (prefers-reduced-motion: reduce) {
	#flag-tree-glow { animation: none; stroke-opacity: 0.42; }
	#flag-tree-crown *, #flag-tree-crown-glow *,
	.flag-tree-gust-active { animation: none; }
}