:root {
    --clr-slate-dark: #121315;
    --clr-wood-amber: #c48b52;
    --transition-smooth: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body.interactive-wall-page {
    background-color: var(--clr-slate-dark);
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
}

/* Globally hide scrollbar UI for the entire page across all browsers */
body.interactive-wall-page::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none;
}
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Loading State Transitions --- */
body.is-loading {
    background-color: var(--clr-slate-dark);
}

/* Hide everything except the central logo while loading */
body.is-loading .wall-bg,
body.is-loading .wall-bg-img,
body.is-loading .wall-overlay,
body.is-loading .placard:not(.logo) {
    opacity: 0;
    pointer-events: none;
}

/* Use the glowing, no-shadow image during the loading pulse */
body.is-loading .logo .img-shadow {
    opacity: 0;
}
body.is-loading .logo .img-noshadow {
    opacity: 1;
}

/* Pulse the central logo during load */
body.is-loading .logo {
    animation: splashPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Ensure smooth fade-in for background elements */
.wall-bg, .wall-bg-img, .wall-overlay, .placard {
    transition: opacity 1s ease-out, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Splash Screen Loading overlay */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--clr-slate-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-logo {
    width: 180px;
    height: auto;
    animation: splashPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes splashPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
        -webkit-filter: drop-shadow(0 0 10px rgba(196, 139, 82, 0.4));
        filter: drop-shadow(0 0 10px rgba(196, 139, 82, 0.4));
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
        -webkit-filter: drop-shadow(0 0 20px rgba(255, 200, 120, 0.8));
        filter: drop-shadow(0 0 20px rgba(255, 200, 120, 0.8));
    }
    100% {
        transform: scale(0.95);
        opacity: 0.7;
        -webkit-filter: drop-shadow(0 0 10px rgba(196, 139, 82, 0.4));
        filter: drop-shadow(0 0 10px rgba(196, 139, 82, 0.4));
    }
}

.interactive-wall {
    position: relative;
    width: 100%;
    /* Exact mathematical height to perfectly map the original 1425px image to 100vh 
       (3047 / 1425 * 100vh = 213.8245vh) */
    height: 213.82vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #000000;
    overflow: hidden;
}

/* The CSS background div is fully replaced by the <img> element.
   Kept in HTML for backwards compatibility but hidden. */
.wall-bg {
    display: none;
}

/* GPU-composited background image that survives scale() transforms.
   CSS background-image gets rasterized at the wrong resolution by Chrome
   when the parent has a large-scale transform. An <img> element gets its
   own GPU texture layer that composites correctly during animation. */
.wall-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    /* Force own GPU compositing layer so it survives
       parent's scale() transform without rasterization glitches */
    will-change: transform;
}

/* Subtle darkening overlay to make placards pop */
.wall-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center top, rgba(18, 19, 21, 0.2) 0%, rgba(18, 19, 21, 0.7) 40%, rgba(18, 19, 21, 0.95) 100%);
    pointer-events: none;
    z-index: 5;
}

.interactive-wall-top {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10;
}

.interactive-wall-bottom {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 4rem 5%;
}

.church-info-container {
    width: 100%;
    max-width: 1000px;
    background: transparent;
    padding: 3rem;
    color: white;
    text-align: center;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.church-info-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--clr-wood-amber);
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

.church-info-container p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* The Grid Layout for Placards - Scaled identically to the background */
.placard-grid {
    position: relative;
    width: 100vw;
    height: calc(100vw * 1424 / 3173);
    max-height: 95vh; 
    max-width: calc(95vh * 3173 / 1424);
    z-index: 10;
    margin-top: 0;
}

/* Base Placard Styling */
.placard {
    position: absolute;
    display: block;
    border-radius: 50%;
    transition: var(--transition-smooth);
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none;
    outline: none;
}

.placard img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.img-shadow {
    opacity: 1;
}

.img-noshadow {
    opacity: 0;
    filter: drop-shadow(0 0 0px rgba(255, 200, 120, 0)) 
            drop-shadow(0 0 0px rgba(196, 139, 82, 0)) 
            drop-shadow(0 0px 0px rgba(0,0,0,0)) 
            brightness(1);
    transition: filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.img-single {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    -webkit-filter: drop-shadow(0 25px 20px rgba(0, 0, 0, 0.85));
    filter: drop-shadow(0 25px 20px rgba(0, 0, 0, 0.85));
    transition: filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.img-single-flat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    -webkit-filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.6));
    transition: filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* Hover Effects */
.placard {
    position: absolute;
    display: block;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none;
    outline: none;
}

.placard:hover {
    transform: scale(1.05) translateY(-5px);
    z-index: 50;
}

.placard:hover .img-shadow {
    opacity: 0;
}

.placard:hover .img-noshadow {
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(255, 200, 120, 0.6)) 
            drop-shadow(0 0 30px rgba(196, 139, 82, 0.4)) 
            drop-shadow(0 15px 30px rgba(0,0,0,0.8)) 
            brightness(1.15);
}

.placard:hover .img-single {
    filter: drop-shadow(0 0 15px rgba(255, 200, 120, 0.6)) 
            drop-shadow(0 0 30px rgba(196, 139, 82, 0.4)) 
            drop-shadow(0 15px 30px rgba(0,0,0,0.8)) 
            brightness(1.15);
}

.placard:hover .img-single-flat {
    filter: drop-shadow(0 0 15px rgba(255, 200, 120, 0.6)) 
            drop-shadow(0 0 30px rgba(196, 139, 82, 0.4)) 
            drop-shadow(0 15px 30px rgba(0,0,0,0.8)) 
            brightness(1.15);
}

/* --- Cinematic Dive Animation State --- */
body.is-diving {
    overflow: hidden !important;
}

.interactive-wall {
    will-change: transform;
}

body.is-diving .interactive-wall {
    transition: transform 2s cubic-bezier(0.7, 0, 1, 0.5) !important;
}

.placard.is-diving-target .img-noshadow {
    opacity: 1 !important;
    filter: drop-shadow(0 0 300px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 0px rgba(196, 139, 82, 0)) 
            drop-shadow(0 0px 0px rgba(0,0,0,0)) 
            brightness(50) !important;
    transition: filter 2s cubic-bezier(0.7, 0, 1, 0.5), opacity 0.5s ease-out !important;
}
.placard.is-diving-target .img-shadow {
    opacity: 0 !important;
    transition: opacity 0.5s ease-out !important;
}

/* --- Cinematic Reverse Animation State --- */
body.is-reversing {
    overflow: hidden !important;
}

/* CSS @keyframes animation for the reverse zoom.
   Chrome's compositor can fully pre-plan @keyframes (unlike JS transitions)
   and manages GPU rasterization correctly during the animation.
   Dynamic values come from CSS custom properties set by JS. */
@keyframes reverseZoomOut {
    from {
        transform: translate(var(--reverse-tx), var(--reverse-ty)) scale(var(--reverse-scale));
    }
    to {
        transform: translate(0px, 0px) scale(1);
    }
}

body.is-reversing .interactive-wall {
    transform-origin: var(--reverse-ox) var(--reverse-oy);
    animation: reverseZoomOut 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) both !important;
}

.placard.is-reversing-target .img-noshadow {
    opacity: 1 !important;
    transition: filter 1.8s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.5s ease-in !important;
}

body.is-reversing-init {
    background-color: var(--clr-slate-dark) !important;
}
body.is-reversing-init #splash-screen {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
body.is-reversing-init .wall-bg,
body.is-reversing-init .wall-bg-img,
body.is-reversing-init .wall-overlay,
body.is-reversing-init .placard:not(.logo) {
    opacity: 1 !important;
}

/* The white flash curtain */
#white-void {
    position: fixed;
    inset: 0;
    background-color: #ffffff;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in;
}

#white-void.active {
    opacity: 1;
}

/* --- Specific Positioning (Desktop) --- */
.logo {
    width: 23.32%;
    height: 50.91%;
    top: 9.41%;
    left: 39.84%;
    border-radius: 50%;
    box-shadow: none;
}
.logo:hover {
    transform: scale(1.03) translateY(-5px);
}

.word {
    width: 14.15%;
    height: 33.57%;
    top: -0.07%;
    left: 4.03%;
    border-radius: 50%;
    box-shadow: none;
}

.connect {
    width: 17.59%;
    height: 30.90%;
    top: 30.97%;
    left: 14.69%;
    border-radius: 50%;
    box-shadow: none;
}

.give {
    width: 18.56%;
    height: 34.76%;
    top: 4.35%;
    left: 79.42%;
    border-radius: 8px;
    box-shadow: none;
}

.mission {
    width: 18.50%;
    height: 44.24%;
    top: 21.84%;
    left: 64.29%;
    border-radius: 0; 
    box-shadow: none;
}

/* =====================================================
   MOBILE RESPONSIVE  (max-width: 900px)
   
   STRATEGY: On mobile (portrait phone), we want the 
   placards to be big and fill most of the viewport. But 
   the background image has a nearly-square aspect ratio
   (3175x3047), so at 100vw wide, the wall zone is only 
   ~45vw tall — too short on a portrait phone.
   
   SOLUTION: We make the background wider than the 
   viewport (220vw) and center it. This effectively 
   "zooms in" on the wall zone. Now the wall zone becomes
   220vw * 0.4486 = ~98.7vw tall — almost the full screen
   width. The placards scale proportionally within this 
   zoomed view.
   
   Both background and placard grid scale from the SAME 
   multiplier of vw. If you resize the window width, 
   everything scales together. If you resize the window 
   height, NOTHING changes — both background and placards 
   ignore height entirely.
   ===================================================== */
@media (max-width: 900px) {
    html, body.interactive-wall-page {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }
    
    .interactive-wall {
        position: relative;
        /* Let content determine height instead of a fixed value.
           The <img> is absolutely positioned so doesn't contribute
           to height — min-height ensures the image area is visible. */
        height: auto;
        min-height: 270vw;
        width: 100vw;
        padding: 0;
        align-items: flex-start;
        overflow: hidden;
        background-color: var(--clr-slate-dark);
        /* No background-image here on mobile — we use <img> instead
           for proper GPU compositing during transform animations */
        will-change: transform;
    }

    .interactive-wall-top {
        height: auto;
        min-height: 0;
        padding: 0;
    }

    /* Push the Welcome text just below the desk/tools shelf. */
    .interactive-wall-bottom {
        margin-top: 42vw;
        min-height: auto;
        padding-bottom: 2rem;
    }

    /* Hide CSS-background div on mobile — replaced by <img> for GPU */
    .wall-bg {
        display: none;
    }

    /* On mobile, override the img sizing to be 280vw wide
       (zoomed view of just the wall portion) */
    .wall-bg-img {
        inset: auto;
        width: 280vw;
        height: auto;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        object-fit: unset;
    }
    
    /* The placard grid: we DON'T need it to cover the full wall zone.
       We just need it to cover the area where placards actually sit,
       which is the top ~60% of the wall zone.
       60% of 125vw = 75vw. This gives placards good size without
       reaching into the tool zone. */
    .placard-grid {
        display: block;
        position: relative;
        width: 100vw;
        max-width: none;
        height: 75vw;
        max-height: none;
        margin: 0 auto;
        background-image: none;
        overflow: visible;
    }

    .placard {
        position: absolute !important;
        margin: 0 !important;
    }

    .word {
        width: 25% !important;
        height: 35% !important;
        top: 2% !important;
        left: 5% !important;
        transform: none !important;
    }

    .give {
        width: 23% !important;
        height: 35% !important;
        top: 2% !important;
        right: 5% !important;
        left: auto !important;
        transform: none !important;
    }

    .logo-center { 
        width: 45% !important;
        height: 55% !important;
        top: 45% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 1;
        box-shadow: none;
    }
    
    .connect {
        width: 25% !important;
        height: 35% !important;
        bottom: 5% !important;
        left: 5% !important;
        top: auto !important;
        transform: none !important;
    }
    
    .mission {
        width: 24% !important;
        height: 42% !important;
        bottom: 2% !important;
        right: 5% !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    
    .word, .give, .connect, .mission {
        z-index: 5;
    }

    .modal {
        width: 95%;
        padding: 2rem 1.5rem;
        height: 85vh;
        max-height: 600px;
    }
    .modal h2 {
        font-size: 2rem;
    }
    .modal-close-btn {
        top: 15px;
        right: 15px;
    }
}

/* --- Cinematic Zoom Effect --- */
.placard-grid {
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.8s ease;
    will-change: transform;
}

.interactive-wall.zoomed .placard-grid {
    opacity: 0.2;
}
.interactive-wall.zoomed .wall-overlay {
    background: radial-gradient(circle at center, rgba(18, 19, 21, 0.6) 0%, rgba(18, 19, 21, 0.95) 100%);
}

/* --- Modals --- */
.modal-container {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.modal {
    position: relative;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    background: rgba(18, 19, 21, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(196, 139, 82, 0.3);
    border-radius: 20px;
    padding: 3rem;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
    pointer-events: none;
    display: none;
}

.modal.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: block;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    color: var(--clr-wood-amber);
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.modal-close-btn:hover {
    transform: scale(1.1);
}

.modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--clr-wood-amber);
    margin-bottom: 1.5rem;
}

.modal p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 2.5rem;
    background-color: var(--clr-wood-amber);
    color: var(--clr-slate-dark);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition-smooth);
    border: 2px solid var(--clr-wood-amber);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--clr-wood-amber);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(196, 139, 82, 0.2);
}