/* =========================================================
   CuraX Section Lighting
   ========================================================= */

/* Light blends into each section, beneath its copy and controls. */

.vision {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.vision:before,
.vision:after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.vision:before {
    inset: 0;
    background: radial-gradient(
        ellipse at 0% 62%,
        #0eb4f62e,
        transparent 68%
    );
    filter: blur(28px);
}

.vision:after {
    left: -16%;
    top: 8%;
    width: 92%;
    height: 90%;

    background: conic-gradient(
        from 55deg at 0% 65%,
        transparent 0deg,
        #39cfff0d 14deg,
        #69dcff21 26deg,
        #0eb4f60b 39deg,
        transparent 52deg
    );

    filter: blur(22px);

    mask-image: linear-gradient(
        90deg,
        #000,
        transparent 92%
    );

    -webkit-mask-image: linear-gradient(
        90deg,
        #000,
        transparent 92%
    );
}

/* =========================================================
   Invitation Lighting
   ========================================================= */

.invitation {
    isolation: isolate;
}

.invitation:before {
    left: -8%;
    right: -8%;
    bottom: -70px;
    height: 100%;

    background:
        conic-gradient(
            from -26deg at 50% 100%,
            transparent 0deg,
            #0eb4f612 10deg,
            #45d5ff30 26deg,
            #0eb4f612 42deg,
            transparent 52deg
        ),
        radial-gradient(
            ellipse at 50% 100%,
            #0eb4f647,
            transparent 65%
        );

    filter: blur(24px);
    z-index: -1;

    mask-image: linear-gradient(
        transparent,
        #000 48%
    );

    -webkit-mask-image: linear-gradient(
        transparent,
        #000 48%
    );
}

.invitation:after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;

    left: 18%;
    right: 18%;
    bottom: -105px;
    height: 240px;

    background: radial-gradient(
        ellipse at 50% 80%,
        #a3eeff66 0%,
        #0eb4f638 30%,
        transparent 70%
    );

    filter: blur(35px);
}

/* =========================================================
   Patient and Provider Cards
   Original appearance preserved
   ========================================================= */

.patient-card,
.provider-card {
    position: relative;
    isolation: isolate;
    overflow: visible;

    border-radius: 16px;
    border-color: #3fcaff42;

    background:
        radial-gradient(
            ellipse at var(--glow-x, 50%) var(--glow-y, 50%),
            #0eb4f60a,
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #37778d12,
            #07192524
        );
}

/* Disable original background pseudo-elements */

.patient-card:before,
.provider-card:before {
    display: none;
}

/* Card hover backgrounds */

.patient-card:hover,
.patient-card:focus-within,
.provider-card:hover,
.provider-card:focus-within {
    border-color: #69dcff66;

    background:
        radial-gradient(
            ellipse at var(--glow-x, 50%) var(--glow-y, 50%),
            #0eb4f61b,
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #37778d1b,
            #0719252e
        );
}

/* Keep all card content above the animated border */

.patient-card > :not(.card-pulse),
.provider-card > :not(.card-pulse) {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Disable Previous SVG Border Glow
   ========================================================= */

.patient-card > .card-pulse,
.provider-card > .card-pulse {
    display: none !important;
}

/* =========================================================
   Shared Synchronized Glow
   Both cards use the same animation clock
   ========================================================= */

/* Register an inheritable angle property */

@property --ecosystem-glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

/* Animate the common parent only */

.glass-grid {
    animation: curax-shared-card-glow 4s linear infinite;
}

/* Single animation shared by both cards */

@keyframes curax-shared-card-glow {
    from {
        --ecosystem-glow-angle: 0deg;
    }

    to {
        --ecosystem-glow-angle: 360deg;
    }
}

/* =========================================================
   CSS-Only Glowing Borders
   Same visual language as Sign In and Store buttons
   ========================================================= */

.patient-card::after,
.provider-card::after {
    content: "";

    position: absolute;
    inset: -2px;

    border-radius: inherit;
    padding: 2px;

    pointer-events: none;
    z-index: 2;

    background: conic-gradient(
        from var(--ecosystem-glow-angle),

        transparent 0deg,
        transparent 225deg,

        #098dff55 250deg,
        #098dff 300deg,
        #0eb4f6 330deg,

        transparent 360deg
    );

    /* Mask everything except the border */

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    filter:
        drop-shadow(0 0 4px #0eb4f6b3)
        drop-shadow(0 0 10px #008aff70);
}

/* =========================================================
   Mirrored Movement
   ========================================================= */

/* Patient card - clockwise */

.patient-card::after {
    transform: none;
}

/* Provider card - mirrored counterclockwise */

.provider-card::after {
    transform: scaleX(-1);
    transform-origin: center;
}

/* =========================================================
   Hover Glow
   ========================================================= */

.patient-card:hover::after,
.patient-card:focus-within::after,
.provider-card:hover::after,
.provider-card:focus-within::after {
    filter:
        drop-shadow(0 0 6px #36ccff)
        drop-shadow(0 0 16px #008aff99);
}

/* =========================================================
   Card Actions
   ========================================================= */

.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.pulse-control {
    border: 0;
    border-bottom: 1px solid #7acfe52e;
    padding: 5px 0;

    background: none;
    color: #9cb9c7;

    font-size: 9px;
    line-height: 1.5;
}

.pulse-control:hover {
    color: #bcf1ff;
}

.pulse-control:disabled {
    opacity: 0.6;
    cursor: default;
}

/* =========================================================
   Mobile Responsive Lighting
   ========================================================= */

@media (max-width: 600px) {

    .vision:after {
        left: -28%;
        width: 128%;
        height: 85%;
    }

    .invitation:before {
        left: -30%;
        right: -30%;
    }

    .invitation:after {
        left: 8%;
        right: 8%;
    }
}

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

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

    .glass-grid {
        animation: none !important;
    }

    .patient-card::after,
    .provider-card::after {
        filter: none;
    }

    .patient-card:hover,
    .provider-card:hover {
        transform: none;
    }
}