/* ============================================================
   GEOMETRIC COMPONENT SYSTEM
   Pure CSS decorative shapes derived from the GTK Kepri Bedelau
   logo, whose visual DNA is quarter-circles, half-circles and
   curves arranged on a grid.

   Usage:
     <span class="geo geo--quarter geo--blue" aria-hidden="true"></span>

   Size / orientation / opacity are set per instance:
     style="--geo-size: 180px; --geo-rotate: 45deg; --geo-alpha: .12"

   IMPORTANT: static orientation uses the independent `rotate`
   property, NOT `transform`. GSAP animates `transform`, so keeping
   them separate means motion never clobbers a shape's base angle.
   ============================================================ */

.geo {
    /* Decorative only — never interactive, never announced. */
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: block;
    width: var(--geo-size, 120px);
    height: var(--geo-size, 120px);
    background: var(--geo-color, var(--color-blue));
    opacity: var(--geo-alpha, .12);
    rotate: var(--geo-rotate, 0deg);
}

/* ── Color modifiers ────────────────────────────────────────── */
.geo--blue   { --geo-color: var(--color-blue); }
.geo--orange { --geo-color: var(--color-orange); }
.geo--green  { --geo-color: var(--color-green); }
.geo--red    { --geo-color: var(--color-red); }
.geo--white  { --geo-color: #fff; }
.geo--ink    { --geo-color: var(--color-blue-deep); }

/* ── Shapes ─────────────────────────────────────────────────── */

/* Quarter circle — the logo's most characteristic unit. */
.geo--quarter {
    border-radius: 100% 0 0 0;
}

/* Half circle / dome. */
.geo--half {
    height: calc(var(--geo-size, 120px) / 2);
    border-radius: var(--geo-size, 120px) var(--geo-size, 120px) 0 0;
}

/* Lens / leaf — two opposing rounded corners. */
.geo--curve {
    border-radius: 100% 0 100% 0;
}

/* Organic blob — soft, irregular, good for large background masses. */
.geo--blob {
    border-radius: 42% 58% 63% 37% / 45% 41% 59% 55%;
}

.geo--blob-alt {
    border-radius: 63% 37% 37% 63% / 43% 47% 53% 57%;
}

/* Outlined circle. */
.geo--ring {
    background: transparent;
    border: var(--geo-stroke, 3px) solid var(--geo-color, var(--color-blue));
    border-radius: 50%;
}

/* Partial ring — an open arc, drawn by hiding two borders. */
.geo--arc {
    background: transparent;
    border: var(--geo-stroke, 3px) solid transparent;
    border-top-color: var(--geo-color, var(--color-blue));
    border-right-color: var(--geo-color, var(--color-blue));
    border-radius: 50%;
}

/* Small solid dot. */
.geo--dot {
    --geo-size: 10px;
    border-radius: 50%;
}

/* Four-point sparkle. */
.geo--spark {
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* Confetti chip — small rounded rectangle. */
.geo--confetti {
    width: var(--geo-size, 8px);
    height: calc(var(--geo-size, 8px) * 1.75);
    border-radius: 2px;
}

/* Soft-edged glow, for atmospheric depth behind content. */
.geo--glow {
    border-radius: 50%;
    filter: blur(var(--geo-blur, 60px));
}

/* Wavy band — repeating scallop edge. */
.geo--wave {
    height: var(--geo-wave-height, 24px);
    background:
        radial-gradient(circle at 50% 100%, var(--geo-color, var(--color-blue)) 60%, transparent 61%)
        0 0 / var(--geo-wave-step, 48px) 100% repeat-x;
}

/* ── Positioning helpers ────────────────────────────────────── */
.geo--tl { top: var(--geo-y, 0); left: var(--geo-x, 0); }
.geo--tr { top: var(--geo-y, 0); right: var(--geo-x, 0); }
.geo--bl { bottom: var(--geo-y, 0); left: var(--geo-x, 0); }
.geo--br { bottom: var(--geo-y, 0); right: var(--geo-x, 0); }

/* ── Continuous idle motion ─────────────────────────────────────
   Applied only to shapes that GSAP does NOT drive, since a CSS
   animation on `transform` would overwrite GSAP's transform each
   frame. GSAP-driven shapes get their float from the JS timeline.
   ──────────────────────────────────────────────────────────── */
@keyframes geo-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
}

@keyframes geo-drift {
    0%, 100% { translate: 0 0; rotate: var(--geo-rotate, 0deg); }
    50%      { translate: 6px -10px; rotate: calc(var(--geo-rotate, 0deg) + 6deg); }
}

.geo--float { animation: geo-float 7s ease-in-out infinite; }
.geo--drift { animation: geo-drift 11s ease-in-out infinite; }

/* Stagger idle motion so shapes never pulse in lockstep. */
.geo--delay-1 { animation-delay: -1.5s; }
.geo--delay-2 { animation-delay: -3s; }
.geo--delay-3 { animation-delay: -4.5s; }
.geo--delay-4 { animation-delay: -6s; }

/* ── Responsive: thin out decoration on smaller screens ─────── */
@media (max-width: 991px) {
    .geo--desktop-only { display: none; }
}

@media (max-width: 767px) {
    /* Mobile keeps only shapes explicitly marked as mobile-safe. */
    .geo:not(.geo--keep-mobile) { display: none; }
}

/* ── Reduced motion: shapes stay, movement stops ────────────── */
@media (prefers-reduced-motion: reduce) {
    .geo--float,
    .geo--drift {
        animation: none !important;
    }
}