/* 
 * Loading Animation Styles
 * Full-screen loading animation with centered text and count animation
 * Enhanced for GSAP SplitText compatibility and jelly effects
 */


/* Main loading screen container */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    box-sizing: border-box;
    overflow: hidden;
    will-change: opacity, visibility;
    pointer-events: auto;
}


/* When loading is complete */

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Container for bottom left elements */

.loading-bottom-left-container {
    position: absolute;
    bottom: clamp(20px, 5vh, 40px);
    left: clamp(20px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
    will-change: opacity, transform;
    transform: translateZ(0);
}


/* Studio name container - original centered style */

.loading-title {
    position: relative;
    font-size: clamp(1.5rem, 8vw, 5rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.2;
    perspective: 1000px;
    overflow: visible;
    transform-origin: center center;
    transform: translateZ(0);
    will-change: transform, scale;
}


/* Studio name container - when positioned at bottom left */

.loading-title-bottom {
    font-size: clamp(1rem, 4vw, 2rem);
    text-align: left;
    margin-bottom: 10px;
    transform-origin: left center;
}


/* Styles for SplitText characters */

.loading-title .char {
    display: inline-block;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: center bottom;
    filter: blur(0px);
    transition: filter 0.2s ease;
}


/* Optional divider line */

.loading-divider {
    width: clamp(120px, 40vw, 280px);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 30px 0;
    will-change: transform, opacity;
    transform-origin: center center;
    transform: translateZ(0);
}


/* Divider line when positioned at bottom left */

.loading-divider-bottom {
    width: 100%;
    margin: 8px 0 12px 0;
    transform-origin: left center;
}


/* Counter container */

.loading-counter {
    position: relative;
    font-family: monospace;
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    will-change: transform, opacity;
    pointer-events: none;
    transform-origin: left center;
    transform: translateZ(0);
}


/* Progress bar container */

.loading-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}


/* Progress bar indicator */

.loading-progress-bar {
    height: 100%;
    width: 0;
    background-color: #fff;
    transition: width 0.1s linear;
    will-change: width;
    transform: translateZ(0);
}


/* Adding shine effect to the progress bar for smooth feel */

.loading-progress-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shineEffect 2s infinite linear;
    pointer-events: none;
}


/* Styles for page content during loading transition */

.content-entering-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.content-entering-animation.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* Class for elements that should appear with staggered timing */

.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity, transform;
}


/* Base styles for different stagger delays (these are used as fallbacks if GSAP is not available) */

.stagger-delay-1 {
    transition-delay: 0.05s;
}

.stagger-delay-2 {
    transition-delay: 0.1s;
}

.stagger-delay-3 {
    transition-delay: 0.15s;
}

.stagger-delay-4 {
    transition-delay: 0.2s;
}

.stagger-delay-5 {
    transition-delay: 0.25s;
}

.stagger-delay-6 {
    transition-delay: 0.3s;
}

.stagger-delay-7 {
    transition-delay: 0.35s;
}

.stagger-delay-8 {
    transition-delay: 0.4s;
}


/* Additional stagger groups based on vertical position */

.stagger-group-1 {
    transition-delay: 0.1s;
}

.stagger-group-2 {
    transition-delay: 0.25s;
}

.stagger-group-3 {
    transition-delay: 0.4s;
}

.stagger-group-4 {
    transition-delay: 0.55s;
}

.stagger-group-5 {
    transition-delay: 0.7s;
}


/* Combined stagger delays for more granular control */

.stagger-group-1.stagger-delay-1 {
    transition-delay: 0.1s;
}

.stagger-group-1.stagger-delay-2 {
    transition-delay: 0.15s;
}

.stagger-group-1.stagger-delay-3 {
    transition-delay: 0.2s;
}

.stagger-group-1.stagger-delay-4 {
    transition-delay: 0.25s;
}

.stagger-group-2.stagger-delay-1 {
    transition-delay: 0.25s;
}

.stagger-group-2.stagger-delay-2 {
    transition-delay: 0.3s;
}

.stagger-group-2.stagger-delay-3 {
    transition-delay: 0.35s;
}

.stagger-group-2.stagger-delay-4 {
    transition-delay: 0.4s;
}

.stagger-group-3.stagger-delay-1 {
    transition-delay: 0.4s;
}

.stagger-group-3.stagger-delay-2 {
    transition-delay: 0.45s;
}

.stagger-group-3.stagger-delay-3 {
    transition-delay: 0.5s;
}

.stagger-group-3.stagger-delay-4 {
    transition-delay: 0.55s;
}

.stagger-group-4.stagger-delay-1 {
    transition-delay: 0.55s;
}

.stagger-group-4.stagger-delay-2 {
    transition-delay: 0.6s;
}

.stagger-group-4.stagger-delay-3 {
    transition-delay: 0.65s;
}

.stagger-group-4.stagger-delay-4 {
    transition-delay: 0.7s;
}

.stagger-group-5.stagger-delay-1 {
    transition-delay: 0.7s;
}

.stagger-group-5.stagger-delay-2 {
    transition-delay: 0.75s;
}

.stagger-group-5.stagger-delay-3 {
    transition-delay: 0.8s;
}

.stagger-group-5.stagger-delay-4 {
    transition-delay: 0.85s;
}


/* Additional priority-based stagger delays */

.stagger-priority-1 {
    transition-delay: calc(var(--base-delay, 0s) + 0s);
}

.stagger-priority-2 {
    transition-delay: calc(var(--base-delay, 0s) + 0.1s);
}

.stagger-priority-3 {
    transition-delay: calc(var(--base-delay, 0s) + 0.2s);
}


/* Combined stagger delays for more granular control */

.stagger-group-1.stagger-priority-1 {
    transition-delay: 0.1s;
}

.stagger-group-1.stagger-priority-2 {
    transition-delay: 0.2s;
}

.stagger-group-2.stagger-priority-1 {
    transition-delay: 0.25s;
}

.stagger-group-2.stagger-priority-2 {
    transition-delay: 0.35s;
}

.stagger-group-3.stagger-priority-1 {
    transition-delay: 0.4s;
}

.stagger-group-3.stagger-priority-2 {
    transition-delay: 0.5s;
}

.stagger-group-4.stagger-priority-1 {
    transition-delay: 0.55s;
}

.stagger-group-4.stagger-priority-2 {
    transition-delay: 0.65s;
}

.stagger-group-5.stagger-priority-1 {
    transition-delay: 0.7s;
}

.stagger-group-5.stagger-priority-2 {
    transition-delay: 0.8s;
}


/* Ensure content visibility after animations complete - safety measure */

body:not(.loading) .cinematic-filmmaker-profile,
body:not(.loading) .cinematic-filmmaker-container,
body:not(.loading) .cinematic-filmmaker-headshot-wrapper,
body:not(.loading) .cinematic-filmmaker-info-wrapper,
body:not(.loading) .cinematic-filmmaker-bio,
body:not(.loading) .cinematic-filmmaker-video-wrapper,
body:not(.loading) .cinematic-filmmaker-video-container,
body:not(.loading) .cinematic-filmmaker-video-embed,
body:not(.loading) .cinematic-work-showcase,
body:not(.loading) .cinematic-work-showcase-wrapper,
body:not(.loading) .cinematic-work-grid,
body:not(.loading) .cinematic-work-item,
body:not(.loading) .cinematic-logo-carousel,
body:not(.loading) .cinematic-testimonial-carousel,
body:not(.loading) .cinematic-faq-accordion,
body:not(.loading) .cinematic-services,
body:not(.loading) .cinematic-services-items,
body:not(.loading) .cinematic-services-header,
body:not(.loading) .cinematic-flexible-content,
body:not(.loading) .cinematic-fc-video,
body:not(.loading) .cinematic-more-work,
body:not(.loading) .elementor,
body:not(.loading) .elementor-section,
body:not(.loading) .elementor-column,
body:not(.loading) .elementor-widget,
body:not(.loading) .elementor-video,
body:not(.loading) .elementor-video-container,
body:not(.loading) footer,
body:not(.loading) header {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* Specific rules for iframes and video elements */

body:not(.loading) iframe,
body:not(.loading) video,
body:not(.loading) .cinematic-filmmaker-video-embed iframe,
body:not(.loading) .cinematic-fc-video iframe,
body:not(.loading) [class*="video"] iframe,
body:not(.loading) .elementor-video iframe {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    position: relative !important;
    z-index: 1 !important;
}


/* Additional fix for any remaining hidden elements */

body:not(.loading) [class*="cinematic-"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* Override any elementor hidden elements after loading completes */

body:not(.loading) .elementor-element {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Ensure display property is also taken care of */

body:not(.loading) .content-entering-animation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* Jelly effect keyframes - fallback if GSAP not used */

@keyframes jellyEffect {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.05);
    }
    30% {
        transform: scale(0.97);
    }
    45% {
        transform: scale(1.03);
    }
    60% {
        transform: scale(0.99);
    }
    75% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shineEffect {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* Animations - used as fallbacks if GSAP isn't applied */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes expandWidth {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


/* Responsive adjustments */

@media (max-width: 767px) {
    .loading-title {
        font-size: clamp(1.25rem, 7vw, 2.5rem);
    }
    .loading-counter {
        font-size: clamp(0.75rem, 3.5vw, 1rem);
    }
    .loading-title-bottom {
        font-size: clamp(0.875rem, 3.5vw, 1.5rem);
    }
    .loading-divider-bottom {
        margin: 5px 0 8px 0;
    }
}


/* For really small screens */

@media (max-width: 360px) {
    .loading-title {
        font-size: 1.25rem;
    }
}


/* Ensure it works with reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
    .loading-title,
    .loading-divider,
    .loading-counter {
        animation-duration: 0.1s;
    }
    .loading-title .char {
        transition-duration: 0.1s !important;
    }
    .loading-progress-bar:after {
        animation: none;
    }
    .stagger-item {
        transition-duration: 0.1s;
    }
}