/* ==========================================================================
   Transition Page Styles
   ========================================================================== */

body.page-gate {
    background: #000;
}

/* Hide content section and footer until revealed */
body.page-gate .content-overlay,
body.page-gate .agent-c {
    visibility: hidden;
    pointer-events: none;
}

body.page-gate .site-footer {
    display: none;
}

body.page-gate.content-revealed .content-overlay,
body.page-gate.content-revealed .agent-c {
    visibility: visible;
    pointer-events: auto;
}

body.page-gate.content-revealed .site-footer {
    display: block;
}

/* Hero stays full height - no shrinking transition */
body.page-gate .hero--fullwidth {
    /* Hero remains fixed at 100vh, content scrolls over it */
}

/* Content sections layer above the fixed hero */
body.page-gate .content-overlay,
body.page-gate .agent-c {
    position: relative;
    z-index: 2;
}

body.page-gate .content-overlay .section__inner {
    text-align: center;
    padding-bottom: 100px;
}

body.page-gate .content-overlay .section__title,
body.page-gate .content-overlay .mission-brief,
body.page-gate .content-overlay .btn {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

body.page-gate .content-overlay .mission-brief {
    text-align: left;
}

body.page-gate .content-overlay .btn {
    background: var(--color-white);
    color: var(--color-black);
}

#paintContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

#paintContainer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   Scroll Indicator
   ========================================================================== */
.scroll-indicator {
    position: fixed;
    top: calc(56vw - 4rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    color: rgba(255, 255, 255, 0.7);
    animation: bounce 1.5s linear infinite;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.1s linear;
}

.scroll-indicator svg {
    width: 48px;
    height: 48px;
    display: block;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

@media (max-width: 767px) {
    .scroll-indicator {
        bottom: auto;
        top: calc(134vw - 4rem);
    }
}

/* ==========================================================================
   Fade Overlay
   ========================================================================== */
.fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 2s ease;
}

.fade-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}