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

Space Vanta Theme 1.0

Module:
Trust Bridge Policy Symbols

File:
public/trust-bridge/cs/policy/policy-symbol.css

Version:
1.4

Purpose:
Spatial Policy Symbol Geometry
Space Vanta DNA Color Differentiation
Timed Spatial Micro Motion

DNA:
- Cold Blue
- Silver White
- Metallic Grey
- Graphite
- Reflective White

Does Not Control:
- Policy Rail Layout
- Policy Item Hover Surface
- Policy Navigation
- Policy Interaction Logic
- Policy State

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


/* =================================================
Space Vanta DNA Palette
================================================= */

.sv-trust-bridge-policy-item__symbol {

    /*
    Existing Trust Bridge blue remains the
    primary Space Vanta signal.
    */

    --sv-policy-blue:
        var(--sv-trust-blue, #718ba3);

    --sv-policy-blue-soft:
        rgba(113, 139, 163, .58);

    --sv-policy-blue-faint:
        rgba(113, 139, 163, .18);

    --sv-policy-silver:
        rgba(205, 213, 219, .82);

    --sv-policy-silver-bright:
        rgba(238, 242, 244, .92);

    --sv-policy-metal:
        rgba(143, 154, 163, .66);

    --sv-policy-graphite:
        rgba(56, 63, 69, .70);

    --sv-policy-reflection:
        rgba(255, 255, 255, .82);

    color:
        var(--sv-policy-metal);

    transition:
        color 260ms ease,
        filter 260ms ease;

}


/* =================================================
SVG Base
================================================= */

.sv-trust-bridge-policy-item__symbol svg {

    display:
        block;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

}


/* =================================================
Base Geometry
================================================= */

.sv-policy-symbol__orbit,
.sv-policy-symbol__trajectory,
.sv-policy-symbol__loop,
.sv-policy-symbol__connection {

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    vector-effect:
        non-scaling-stroke;

}


.sv-policy-symbol__orbit {

    opacity:
        .38;

}


.sv-policy-symbol__core {

    fill:
        var(--sv-policy-blue-faint);

    stroke:
        currentColor;

    stroke-width:
        1.25;

}


.sv-policy-symbol__frame {

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.25;

}


.sv-policy-symbol__tilted-frame {

    fill:
        rgba(255, 255, 255, .14);

    stroke:
        currentColor;

    stroke-width:
        1.25;

}


.sv-policy-symbol__direction {

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.sv-policy-symbol__inner-line {

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.25;

    stroke-linecap:
        round;

}


.sv-policy-symbol__point {

    fill:
        var(--sv-policy-blue);

}


/* =================================================
DELIVERY
DNA:
Cold Blue Primary
Silver Orbit
Graphite Direction
================================================= */

.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__orbit {

    stroke:
        var(--sv-policy-silver);

    opacity:
        .48;

}


.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__core {

    fill:
        var(--sv-policy-blue-faint);

    stroke:
        var(--sv-policy-blue);

}


.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__trajectory {

    stroke:
        var(--sv-policy-blue);

    stroke-dasharray:
        36 8;

    animation:
        svPolicyDelivery 5.6s ease-in-out infinite;

}


.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__direction {

    stroke:
        var(--sv-policy-silver-bright);

}


.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__point {

    fill:
        var(--sv-policy-blue);

}


/* =================================================
RETURNS
DNA:
Silver Primary
Cold Blue Loop
Graphite Frame
================================================= */

.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__orbit {

    stroke:
        var(--sv-policy-metal);

    opacity:
        .42;

}


.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__loop {

    stroke:
        var(--sv-policy-blue);

    stroke-dasharray:
        70 20;

    animation:
        svPolicyReturns 6.8s ease-in-out infinite;

}


.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__direction {

    stroke:
        var(--sv-policy-silver-bright);

}


.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__frame {

    stroke:
        var(--sv-policy-silver);

}


.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__point {

    fill:
        var(--sv-policy-blue);

}


/* =================================================
PAYMENT
DNA:
Metallic Silver Frame
Cold Blue Core
Graphite Inner Structure
================================================= */

.sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__tilted-frame {

    stroke:
        var(--sv-policy-silver-bright);

    fill:
        rgba(255, 255, 255, .12);

    animation:
        svPolicyPayment 7.2s ease-in-out infinite;

}


.sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__core {

    stroke:
        var(--sv-policy-blue);

    fill:
        var(--sv-policy-blue-faint);

}


.sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__inner-line {

    stroke:
        var(--sv-policy-graphite);

}


.sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__point {

    fill:
        var(--sv-policy-blue);

}


/* =================================================
CUSTOMER CARE
DNA:
Graphite Orbit
Silver Connection
Cold Blue Core
================================================= */

.sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__orbit {

    stroke:
        var(--sv-policy-silver);

    opacity:
        .38;

}


.sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__core {

    stroke:
        var(--sv-policy-blue);

    fill:
        var(--sv-policy-blue-faint);

}


.sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__connection {

    stroke:
        var(--sv-policy-silver-bright);

    stroke-dasharray:
        28 12;

    animation:
        svPolicyCustomerCare 6.4s ease-in-out infinite;

}


.sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__point {

    fill:
        var(--sv-policy-blue);

}


/* =================================================
Timed Spatial Motion
================================================= */

/*
The symbols remain visually static most of the time.
Each one performs a restrained spatial event,
then returns to its resting state.
*/


@keyframes svPolicyDelivery {

    0%,
    55%,
    100% {

        stroke-dashoffset:
            0;

        opacity:
            .78;

    }

    64% {

        stroke-dashoffset:
            -44;

        opacity:
            1;

    }

    72% {

        stroke-dashoffset:
            -88;

        opacity:
            .78;

    }

}


@keyframes svPolicyReturns {

    0%,
    58%,
    100% {

        stroke-dashoffset:
            0;

        opacity:
            .72;

    }

    66% {

        stroke-dashoffset:
            -45;

        opacity:
            1;

    }

    74% {

        stroke-dashoffset:
            -90;

        opacity:
            .72;

    }

}


@keyframes svPolicyPayment {

    0%,
    64%,
    100% {

        transform:
            rotate(-12deg);

    }

    70% {

        transform:
            rotate(-9deg);

    }

    76% {

        transform:
            rotate(-12deg);

    }

}


@keyframes svPolicyCustomerCare {

    0%,
    60%,
    100% {

        stroke-dashoffset:
            0;

        opacity:
            .72;

    }

    68% {

        stroke-dashoffset:
            -40;

        opacity:
            1;

    }

    76% {

        stroke-dashoffset:
            -80;

        opacity:
            .72;

    }

}


/* =================================================
Animation Offset
================================================= */

/*
The four symbols do not animate together.
The stagger creates a subtle continuous
spatial-system feeling across the rail.
*/

.sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__trajectory {

    animation-delay:
        0s;

}


.sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__loop {

    animation-delay:
        1.4s;

}


.sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__tilted-frame {

    animation-delay:
        2.8s;

}


.sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__connection {

    animation-delay:
        4.2s;

}


/* =================================================
Active State
================================================= */

.sv-trust-bridge-policy-item.is-policy-active .sv-trust-bridge-policy-item__symbol {

    color:
        var(--sv-policy-blue);

    filter:
        drop-shadow(0 0 8px rgba(113, 139, 163, .20));

}


/* =================================================
No Hover Animation On Individual Icon
================================================= */

@media (hover: hover) {

    .sv-trust-bridge-policy-item:hover .sv-trust-bridge-policy-item__symbol {

        transform:
            none;

    }

}


/* =================================================
Reduced Motion
================================================= */

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

    .sv-trust-bridge-policy-item[data-policy-symbol="delivery"] .sv-policy-symbol__trajectory,

    .sv-trust-bridge-policy-item[data-policy-symbol="returns"] .sv-policy-symbol__loop,

    .sv-trust-bridge-policy-item[data-policy-symbol="payment"] .sv-policy-symbol__tilted-frame,

    .sv-trust-bridge-policy-item[data-policy-symbol="customer-care"] .sv-policy-symbol__connection {

        animation:
            none;

    }

}