/* ============================================================
   HOMEPAGE SCROLL DECOR — loaded ONLY by index.html.
   Leaf-circuit line art + GSAP ScrollTrigger parallax.
   Engine: landing-decor.js + vendor/gsap.min.js + vendor/ScrollTrigger.min.js
   Docs (read first): GUIDE_scroll_decor.md
   To add/change art: edit index.html markup + data-decor-* attributes.
   NEVER edit this file to place individual art pieces.
   ============================================================ */

/* A section that hosts decor. z-index:0 creates a stacking context so
   the decor's z-index:-1 paints above the section background but below
   ALL section content (same pattern as .feat-hero in landing.css). */
.tcd-host { position: relative; z-index: 0; overflow-x: clip; }

/* One decor piece. Position/size/color ride on each element's inline
   style (top/right/bottom/left, width, color, --tcd-o). */
.tcd {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    line-height: 0;
    will-change: transform;
}
.tcd svg { display: block; width: 100%; height: auto; opacity: var(--tcd-o, 0.08); }

/* ---- Draw-in entrance (hero pieces only: add class tcd--draw) ----
   Strokes draw themselves on page load, nodes pop in after.
   Requires pathLength="1" on every .tcd-trace path and a
   style="--i:n" stagger index per path/circle. */
.tcd--draw .tcd-trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tcdDraw 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.2s);
}
@keyframes tcdDraw {
    to { stroke-dashoffset: 0; }
}
.tcd--draw .tcd-node {
    opacity: 0;
    transform: scale(0.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: tcdNode 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.9s);
}
@keyframes tcdNode {
    to { opacity: 1; transform: scale(1); }
}

/* Reduced motion: art appears fully drawn, no animation.
   (Scroll parallax is separately disabled in landing-decor.js.) */
@media (prefers-reduced-motion: reduce) {
    .tcd--draw .tcd-trace { animation: none; stroke-dashoffset: 0; }
    .tcd--draw .tcd-node { animation: none; opacity: 1; transform: none; }
}

/* Pieces that crowd small screens: add class tcd--desktop to hide. */
@media (max-width: 768px) {
    .tcd--desktop { display: none; }
}