/* ADDED SAFETY NET FOR MOBILE: 
   Prevents aggressive CSS transforms from creating horizontal scrollbars */
body {
    overflow-x: clip;
    width: 100%;
    position: relative;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
body {
    background-color: #f9f9f9;
    color: #000000;
    -webkit-font-smoothing: antialiased;
}
.cinematic-shadow {
    box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.04);
}
.anim-trigger {
    opacity: 0;
    will-change: opacity, translate, scale, clip-path, filter;
}
.anim-wipe-dir {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.anim-wipe-dir.is-visible {
    clip-path: inset(0 0 0 0);
}
.anim-navbar {
    translate: 0 -20px;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), translate 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-navbar.is-visible {
    opacity: 1;
    translate: 0 0;
}
.anim-scale-out {
    scale: 1.1;
    filter: blur(4px);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), scale 2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-scale-out.is-visible {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}
.anim-letter-space {
    letter-spacing: 0.5em;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-letter-space.is-visible {
    opacity: 1;
    letter-spacing: 0.2em;
}
.anim-scale-entrance {
    scale: 0.9;
    translate: 0 40px;
    transform-origin: left bottom;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), translate 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anim-scale-entrance.is-visible {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    filter: blur(0px);
}
.anim-drift-right {
    translate: -30px 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), translate 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-drift-right.is-visible {
    opacity: 1;
    translate: 0 0;
}
.anim-split-line {
    clip-path: inset(100% 0 0 0);
    translate: 0 30px;
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), translate 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anim-split-line.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    translate: 0 0;
}
.anim-fade-drift {
    translate: 0 20px;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), translate 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-fade-drift.is-visible {
    opacity: 1;
    translate: 0 0;
}
.anim-skew-reveal {
    translate: 0 50px;
    rotate: -2deg;
    transform-origin: left top;
    transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), translate 1s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anim-skew-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
}
.anim-zoom-overflow {
    scale: 1.3;
    transition: scale 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-wipe-dir.is-visible .anim-zoom-overflow {
    scale: 1;
}
.staggered-1 { transition-delay: 0.1s; }
.staggered-2 { transition-delay: 0.2s; }
.staggered-3 { transition-delay: 0.3s; }
.staggered-4 { transition-delay: 0.4s; }
.staggered-5 { transition-delay: 0.5s; }
.staggered-6 { transition-delay: 0.6s; }
.staggered-7 { transition-delay: 0.7s; }
.staggered-8 { transition-delay: 0.8s; }
.anim-wipe-dir.staggered-1 .anim-zoom-overflow { transition-delay: 0.1s; }
.anim-wipe-dir.staggered-2 .anim-zoom-overflow { transition-delay: 0.2s; }

@keyframes slow-loop-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}
.anim-loop-zoom {
    will-change: transform;
    animation: slow-loop-zoom 35s ease-in-out infinite alternate;
}

.anim-slide-from-left {
    opacity: 0;
    translate: -80px 0;
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), translate 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-slide-from-left.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* MEDIA QUERY FOR MOBILE SPECIFIC ANIMATION TWEAKS */
@media (max-width: 768px) {
    .anim-scale-entrance {
        translate: 0 20px; /* Reduced vertical jump for smaller screens */
    }
    .anim-slide-from-left {
        translate: -40px 0; /* Reduced horizontal slide-in for narrower viewports */
    }
    
    /* Fix horizontal text overflow on mobile */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    p, h1, h2, h3, h4, h5, h6, span, a, div {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        /* Ensure rigid fixed-width text elements can wrap */
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Mobile Menu Open State */
    #mobile-menu.is-active {
        transform: translateX(0);
    }
    #mobile-menu.is-active .mobile-menu-link {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Lock body scroll when menu open */
    body.menu-open {
        overflow: hidden !important;
    }
}