/* * GS-Layout Core Visuals 
 * The "Expensive" Feel
 */

:root {
    /* These will be overridden by the PHP Injector, but good to have defaults */
    --gs-motion-speed: 0.8s;
    --gs-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --gs-motion-dist: 30px;
}

/* 1. The Starting State (Hidden & Pushed Down) */
.gs-reveal-hidden {
    opacity: 0;
    transform: translateY(var(--gs-motion-dist)) scale(0.98); /* Subtle scale for depth */
    transition: 
        opacity var(--gs-motion-speed) var(--gs-motion-ease),
        transform var(--gs-motion-speed) var(--gs-motion-ease);
    will-change: opacity, transform; /* Mobile Optimization */
}

/* 2. The Active State (Visible & In Place) */
.gs-reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 3. Safety Switch: If JS fails, show everything */
html.no-js .gs-reveal-hidden {
    opacity: 1;
    transform: none;
}