/**
 * TBT tree logo — the canonical mark, and its bloom.
 *
 * Owned by TBT Hub under the handle `tbt-tree`. Consumers declare the handle
 * as a dependency; they never ship their own copy of the mark.
 *
 * The fill rules below used to live in a <style> block inside the SVG file.
 * An inline SVG's <style> is document-scoped rather than shadowed, so those
 * rules applied to the whole page and any second Illustrator export sharing
 * the `.cls-N` naming would have fought with them. They live here, scoped
 * under `.tbt-tree`, for that reason — and the SVG's classes were renamed to
 * semantic ones so this file never references an export artefact.
 */

/* -------------------------------------------------------------------------
 * Host and mark
 * ---------------------------------------------------------------------- */

.tbt-tree-host {
	display: inline-block;
	line-height: 0;          /* no descender gap under an inline-block SVG */
	flex: none;              /* the mark never shrinks inside a flex/grid hero */

	/* The bloom's three stops. Exposed as variables so a surface that needs
	   the mark to settle in something other than TBT blue can say so without
	   forking the stylesheet. */
	--tbt-tree-leaf-start: #FFFFFF;
	--tbt-tree-leaf-mid:   #6F9EE2;
	--tbt-tree-leaf-final: var(--tbt-blue, #0856C9);
	--tbt-tree-duration:   1800ms;
	--tbt-tree-step:        280ms;
}

/* For a mark sitting on a blue surface, where settling into blue would make
   it disappear. Not used by the header — kept because the alternative is a
   second copy of the mark somewhere down the line. */
.tbt-tree-host--settle-white {
	--tbt-tree-leaf-mid:   #9FC0EC;
	--tbt-tree-leaf-final: #FFFFFF;
}

.tbt-tree {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;       /* leaves scale past the viewBox mid-bloom */
}

/* -------------------------------------------------------------------------
 * The mark at rest
 *
 * The three figures forming the trunk carry the three TBT domain colours.
 * They are identity, not state, so they are not tokenised as interaction
 * colours — see Style Book §2.
 *
 * Leaves rest in the bloom's final colour, so `animate="no"` renders the
 * settled tree rather than a different one. The `--89` / `--81` classes are
 * inert by design: the original animation drove every leaf through the same
 * three stops, so the export's three white tints never showed. They are kept
 * in the markup only so a future re-export maps onto this file cleanly.
 * ---------------------------------------------------------------------- */

.tbt-tree__eo            { fill-rule: evenodd; }

.tbt-tree__figure--le    { fill: rgba(99, 16, 17, .99); }    /* Learn English */
.tbt-tree__figure--gi    { fill: rgba(101, 35, 101, .99); }  /* General Interest */
.tbt-tree__figure--pd    { fill: rgba(25, 103, 53, .99); }   /* Personal Development */

.tbt-tree__leaf {
	fill: var(--tbt-tree-leaf-final);
	stroke: var(--tbt-blue, #0856C9);
	stroke-miterlimit: 10;
	stroke-width: .5px;
}

/* -------------------------------------------------------------------------
 * Bloom
 *
 * Six waves, centre outward. The wave index is baked into each leaf as
 * `--tbt-tree-wave` at build time, because the geometry is static — which is
 * why this needs no JavaScript at all.
 *
 * A leaf grows white, holds white while it opens, then sweeps through pale
 * blue into TBT blue. The blue hairline outlines each leaf during the white
 * phase and disappears into the fill once it lands.
 *
 * Leaves animate only under `.tbt-tree-host--animate`, which the shortcode
 * adds when animation is asked for. If the stylesheet fails to load, the tree
 * renders plainly rather than disappearing.
 * ---------------------------------------------------------------------- */

.tbt-tree-host--animate .tbt-tree__leaf {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity, fill;
	animation: tbt-tree-bloom var(--tbt-tree-duration) cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: calc(var(--tbt-tree-wave, 0) * var(--tbt-tree-step));
}

/* A second animation name makes pointer entry a true replay. The completed
   entrance bloom remains as the first animation, so leaving the mark does not
   trigger another bloom. Restrict this to mouse-like pointers: touch devices
   can otherwise leave :hover stuck after a tap. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.tbt-tree-host--animate:hover .tbt-tree__leaf {
		animation-name: tbt-tree-bloom, tbt-tree-bloom-hover;
	}
}

@keyframes tbt-tree-bloom {
	0%   { fill: var(--tbt-tree-leaf-start); opacity: 0; transform: scale(.15); }
	35%  { fill: var(--tbt-tree-leaf-start); opacity: 1; transform: scale(.65); }
	70%  { fill: var(--tbt-tree-leaf-mid);   opacity: 1; transform: scale(.98); }
	100% { fill: var(--tbt-tree-leaf-final); opacity: 1; transform: scale(1); }
}

/* Kept separate from the entrance keyframes so each pointer entry creates a
   new animation instance. The motion itself remains intentionally identical. */
@keyframes tbt-tree-bloom-hover {
	0%   { fill: var(--tbt-tree-leaf-start); opacity: 0; transform: scale(.15); }
	35%  { fill: var(--tbt-tree-leaf-start); opacity: 1; transform: scale(.65); }
	70%  { fill: var(--tbt-tree-leaf-mid);   opacity: 1; transform: scale(.98); }
	100% { fill: var(--tbt-tree-leaf-final); opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.tbt-tree-host--animate .tbt-tree__leaf {
		animation: none;
		opacity: 1;
	}
}