/* =========================

   Shared background theming

   ========================= */



/* Default theme vars (you can override per-page/section) */

.hero-geo, .about-page {

    --ink: #2B2A74;

    --dot: rgba(0, 0, 0, .10);

}



/* Layer helpers */

.hero-visual, .hero-dots-mobile {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}



.page-geo-bg {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}



.hero-visual-svg, .page-geo-svg {

    width: 100%;

    height: 100%;

    display: block;

}



/* Ensure real content sits above the visuals */

.hero-geo .container,

.about-page .container {

    position: relative;

    z-index: 1;

}



.hero-geo .hero-visual-fixed {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}



/* =========================

   SVG shape styles (used across partials)

   ========================= */

.ns {

    vector-effect: non-scaling-stroke;

}



.hair {

    stroke: var(--ink);

    stroke-width: 2;

    opacity: .40;

    fill: none;

}



.thin {

    stroke: var(--ink);

    stroke-width: 1;

    opacity: .28;

    fill: none;

}



.stripe {

    stroke: var(--ink);

    stroke-width: 2;

    opacity: .35;

    stroke-linecap: round;

    fill: none;

}



.hair-pg {

    stroke: var(--ink);

    stroke-width: 2;

    opacity: .35;

    fill: none;

}



.thin-pg {

    stroke: var(--ink);

    stroke-width: 1;

    opacity: .22;

    fill: none;

}



.patch, .patch-about, .patch-pg {

    opacity: .9;

}

/* fill is set inline with url(#patternId) */

.orb, .orb-about, .orb-pg {

    fill: var(--ink);

    opacity: .06;

}



.blue-shape, .blue-about, .blue-pg {

    fill: var(--ink);

    opacity: .10;

}



/* =========================

   Motion

   ========================= */

@keyframes floatY {

    0%,100% {

        transform: translateY(0)

    }



    50% {

        transform: translateY(-8px)

    }

}



@keyframes floatX {

    0%,100% {

        transform: translateX(0)

    }



    50% {

        transform: translateX(10px)

    }

}



@keyframes pulseDot {

    0%,100% {

        transform: scale(1);

        opacity: .18

    }



    50% {

        transform: scale(1.8);

        opacity: .04

    }

}



@keyframes dashLoop {

    to {

        stroke-dashoffset: -800;

    }

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



@keyframes spinRev {

    to {

        transform: rotate(-360deg);

    }

}



.float-slow {

    animation: floatY 9s ease-in-out infinite;

}



.float-x {

    animation: floatX 12s ease-in-out infinite;

}



.float-y {

    animation: floatY 12s ease-in-out infinite;

}



.pulse {

    animation: pulseDot 6s ease-in-out infinite;

    transform-origin: center;

}



.dash {

    stroke: var(--ink);

    stroke-width: 3;

    opacity: .55;

    fill: none;

    stroke-linecap: round; /* for dotted look */

    stroke-dasharray: 1 12; /* dot-gap */

    animation: dashLoop 18s linear infinite;

}



/* =========================

   Avatar orbits (around team images)

   ========================= */

.avatar-orbit {

    --size: 140px;

    width: var(--size);

    height: var(--size);

    position: relative;

}



    .avatar-orbit img {

        width: var(--size);

        height: var(--size);

        border-radius: 50%;

        display: block;

        position: relative;

        z-index: 1;

    }



    .avatar-orbit .orbit {

        position: absolute;

        inset: -10px;

        width: calc(var(--size) + 20px);

        height: calc(var(--size) + 20px);

        pointer-events: none;

        z-index: 0;

    }



.ring-dashed {

    stroke-width: 1.6;

    fill: none;

    stroke-dasharray: 7 10;

    opacity: .7;

    transform-origin: 50% 50%;

    animation: spin 18s linear infinite;

}



.ring-dotted {

    stroke: var(--ink);

    stroke-width: 1.4;

    fill: none;

    stroke-linecap: round;

    stroke-dasharray: 1 8;

    opacity: .45;

    transform-origin: 50% 50%;

    animation: spinRev 22s linear infinite;

}



/* =========================

   Reduced motion accessibility

   ========================= */

@media (prefers-reduced-motion: reduce) {

    .float-slow, .float-x, .float-y, .pulse, .dash, .ring-dashed, .ring-dotted {

        animation: none !important;

    }

}



/* =========================

   Card ring (Home hero, top-right)

   ========================= */

.card-ring .ring-strong,

.card-ring .ring-mid,

.card-ring .ring-thin,

.card-ring .thin {

    fill: none; /* prevents black discs */

}



.card-ring .ring-strong {

    stroke: var(--ink);

    stroke-width: 6;

    opacity: .85;

}



.card-ring .ring-mid {

    /* uses the inline <defs> gradient: id="inkGradCard" */

    stroke: url(#inkGradCard);

    stroke-width: 2;

    opacity: .80;

}



.card-ring .ring-thin {

    stroke: var(--ink);

    stroke-width: 1;

    opacity: .50;

}



/* We already have .dash in this file; just ensuring round caps look dotted */

.card-ring .dash {

    stroke-linecap: round;

}