/* =============================================================
   LOODON v2 — Scroll animation support styles
   Used by assets/js/scroll-animations.js (GSAP + ScrollTrigger).
   Only enqueued on the front page and the Services page.
   Without JS these rules are inert — the static design renders
   unchanged (progressive enhancement).
   ============================================================= */

/* --------------------------------------------------
   Ripple landing effect (ported from the concept
   prototypes — fired when a thread/line "docks")
-------------------------------------------------- */
.loodon-ripple {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ripple-color, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    animation: loodon-ripple 1s cubic-bezier(0.22, 0.61, 0.2, 1) forwards;
}

@keyframes loodon-ripple {
    from { width: 26px;  height: 26px;  opacity: 0.9; }
    to   { width: 132px; height: 132px; opacity: 0;   }
}

/* --------------------------------------------------
   Homepage connector area — animated mode
   (.connector-area--animated is added by JS on
   desktop only; the SVG overlay draws the threads,
   so the static line backgrounds are blanked while
   their dots become scroll-triggered "arrivals")
-------------------------------------------------- */
.connector-area__threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Flow threads — the continuation of each connector line down the page to
   its service section's white bubble. Injected by JS into .site-main; the
   sections get z-index:1 (via JS) so the threads run BEHIND them and stay
   visible only in the white gaps, like the reference concept. */
.connector-flow-threads {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* Explicit layering: above the (pinned) connector area, below the
       coloured sections (which JS raises to z-index:2). */
    z-index: 1;
}

/* While animated, the decorative band is compressed so visitors spend far
   less scroll on empty space (the static/no-JS design keeps the block's own
   editable height), the SVG overlay draws the threads, and the big static
   mid-thread circles are removed — the small travelling nodes carry the
   motif instead. */
/* Compressed to the revised design's gap (~380px between the service
   cards and the Branding block). */
.connector-area--animated {
    height: 380px;
}

.connector-area--animated .connector-area__line {
    background: transparent;
}

/* 2026-08 design revision: the revised Figma drops the LOODON wordmark
   from this band — the threads run through the gap over the page artwork. */
.connector-area--animated .connector-area__watermark {
    display: none;
}

/* --------------------------------------------------
   Reduced motion — belt and braces (JS also skips
   all animation setup under reduced motion)
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .loodon-ripple { display: none; }
}