.security-pattern {
    /* Using double quotes outside and single quotes inside the SVG */
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20L0 0M40 0L20 20L40 40M0 40L20 20' stroke='%23000' fill='none'/%3E%3C/svg%3E");
    /* background-image: url("/assets/images/security/securities.avif"); */

}


.sec-reveal,
.sec-hero-visual {
    visibility: hidden;
}

@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.animate-scan {
    animation: scan 4s linear infinite;
}

/* Ensure visual is scaled down slightly for the pop-in effect */
.sec-hero-visual {
    transform: scale(0.95);
}

.sec-reveal,
.sec-measure,
.security-visual-wrap {
    visibility: hidden;
    will-change: transform, opacity;
}

.priv-reveal,
.priv-card,
.privacy-card-visual {
    visibility: hidden;
    opacity: 0;
    /* Ensure they all start slightly lower to animate upward */
    transform: translateY(30px);
    will-change: transform, opacity;
}

/* Specific start scale for the visual card only */
.privacy-card-visual {
    transform: translateY(30px) scale(0.98);
}

/* 2. Interactive States & Accessibility (Toggled OFF) */
/* We simulate OFF to show the animation difference in the visualization above.
   In production, you would use a JS event listener to add/remove classes or set aria-checked. */

.permission-control[aria-checked="false"] .toggle-container {
    background-color: #cbd5e1;
    /* slate-300 - Disabled color */
}

.permission-control[aria-checked="false"] .toggle-slider {
    transform: translateX(0);
    /* Resets slider position */
}

/* Accessiblity Focus Ring */
.permission-control:focus-visible {
    outline: 2px solid #6366f1;
    /* indigo-500 */
    outline-offset: 4px;
}

.abdm-reveal,
.abdm-visual {
    visibility: hidden;
    opacity: 0;
    will-change: transform, opacity;
}

/* Only focus on what GSAP will animate */
.infra-reveal,
.infra-card,
.infra-visual {
    will-change: transform, opacity;
}

/* Ensure the visual doesn't start too large */
.infra-visual {
    transform: scale(0.95);
}

.monitor-reveal,
.monitor-card,
.monitor-visual {
    visibility: hidden;
    will-change: transform, opacity;
}

.final-reveal {
    visibility: hidden;
    will-change: transform, opacity;
}

.final-trust-card {
    /* Subtle breathing animation for the background light */
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}