/* === Security & Compliance Page Styles V6 (Corrected Animation Logic) === */

#security-page.page-canvas {
    background-color: #f0f0f0 !important;
}

.security-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    color: #333333;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

.security-wrapper .page-header {
    text-align: center;
    z-index: 100;
    position: absolute;
    top: 5vh;
    width: 100%;
    padding: 0 2rem;
}

.security-wrapper .page-header p {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    max-width: 600px;
    margin: 0.5rem auto 0;
}

.shield-stack-container {
    flex-grow: 0;
    width: 100%;
    height: 100vh;
    perspective: 4500px;
    position: relative;
}

.shield-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    max-width: 1000px;
    height: 75vh;
    max-height: 750px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8% 15% 17% 15%;
}

/* Set background images */
#shield-layer-1, #shield-layer-2, #shield-layer-3, #shield-layer-4, #shield-layer-5 {
    background-image: url('images/svg/shield_base_wide.svg');
}

/* DEFAULT STATE: Each layer is in its final, stacked position. */
#shield-layer-1 { transform: translate(calc(-50% - 40px), calc(-43% - 20px)) translateZ(0px); }
#shield-layer-2 { transform: translate(calc(-50% - 20px), calc(-43% - 10px)) translateZ(-40px); }
#shield-layer-3 { transform: translate(-50%, -43%) translateZ(-80px); }
#shield-layer-4 { transform: translate(calc(-50% + 20px), calc(-43% + 10px)) translateZ(-120px); }
#shield-layer-5 { transform: translate(calc(-50% + 40px), calc(-43% + 20px)) translateZ(-160px); }

/* INTRO STATE: When the wrapper has this class, all layers are forced to their "peeled" position. */
.intro-start .shield-layer {
    opacity: 0;
    transform: translate(-50%, -150%) translateZ(250px) rotateX(70deg) !important;
}

/* SCROLL STATE: The .peeled class also forces a layer to the "peeled" position. */
.shield-layer.peeled {
    opacity: 0 !important;
    pointer-events: none;
    transform: translate(-50%, -150%) translateZ(250px) rotateX(70deg) !important;
}

/* Staggered delays for the intro animation (when .intro-start is removed) */
#shield-layer-5 { transition-delay: 0s; }
#shield-layer-4 { transition-delay: 150ms; }
#shield-layer-3 { transition-delay: 300ms; }
#shield-layer-2 { transition-delay: 450ms; }
#shield-layer-1 { transition-delay: 600ms; }

.shield-layer.active {
    opacity: 1;
    z-index: 10;
}
.shield-layer:not(.active) {
    opacity: 0.5;
    pointer-events: none;
}

.shield-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s 0.4s ease, transform 0.5s 0.4s ease;
    width: 100%;
}

.shield-layer.active .shield-content {
    opacity: 1;
    transform: translateY(0);
}

.shield-content h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: #BF0A3D;
    margin-bottom: 1.5rem;
}

.shield-content li {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #FFFFFF;
}

.security-wrapper .scroll-indicator {
    position: absolute;
    bottom: 1vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s 1.5s ease;
}
.intro-complete .scroll-indicator {
    opacity: 1;
}