/* 
 * Final Animator - Frontend CSS
 */

.fa-container {
    position: relative;
    /* Force full viewport width ignoring any theme containers */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0;
    left: 0;
    overflow-x: hidden;
}

.fa-sticky-wrapper {
    position: relative;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.fa-canvas {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    pointer-events: none;
    background-color: #000;
    /* Hardware acceleration */
    transform: translateZ(0); 
    will-change: transform;
}

.fa-overlays-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.fa-overlay {
    position: absolute;
    /* Base positioning handled via JS */
    left: 0;
    right: 0;
    box-sizing: border-box;
    transform: translateY(-50%);
    will-change: opacity, transform;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0; /* Hidden by default */
    text-align: center;
}

/* Animations */
.fa-overlay.is-visible {
    opacity: 1;
}

/* Type: Slide Up */
.fa-anim-slide {
    transform: translateY(calc(-50% + 40px));
}
.fa-anim-slide.is-visible {
    transform: translateY(-50%);
}

/* Type: Scale Up */
.fa-anim-scale {
    transform: translateY(-50%) scale(0.85);
}
.fa-anim-scale.is-visible {
    transform: translateY(-50%) scale(1);
}

/* Base fade just relies on the global opacity change */