/* Force Widget Independence */
.elementor-widget-cinematic_text_637620f7 {
    /* Critical for breaking out of standard layout flow if needed */
    position: relative; 
}

/* Fullscreen Wrapper */
.ct-fullscreen-wrapper-637620f7 {
    /* Base container must relative so layers can position inside it */
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    /* Ensure no margins/paddings from theme interfere */
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent;
    pointer-events: auto; /* Allow interaction normally */
}

/* Editor Override - Show within container while editing */
.elementor-editor-active .ct-fullscreen-wrapper-637620f7 {
    min-height: 500px; /* Sensible default for editing */
}

/* Universal Layer Rules */
.ct-title-layer-637620f7,
.ct-subtitle-layer-637620f7,
.ct-button-layer-637620f7 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    /* Default centering */
    align-items: center; 
    justify-content: center;
    pointer-events: none; /* Let clicks pass through empty areas */
}

/* Layer 1: Title Typography */
.ct-title-637620f7 {
    margin: 0;
    padding: 0;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff; /* Fallback */
    text-align: center;
    position: relative;
    z-index: 2;
    pointer-events: auto; /* Re-enable clicks */
    
    /* Independent Offset Variables */
    --ct-title-x: 0px;
    --ct-title-y: 0px;
    transform: translate(var(--ct-title-x), var(--ct-title-y));
}

/* Layer 2: Subtitle Typography */
.ct-subtitle-637620f7 {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ccc; /* Fallback */
    text-align: center;
    position: relative;
    z-index: 2;
    pointer-events: auto; /* Re-enable clicks */
    
    /* Independent Offset Variables */
    --ct-sub-x: 0px;
    --ct-sub-y: 0px;
    transform: translate(var(--ct-sub-x), var(--ct-sub-y));
}

/* Layer 3: Interactive Button */
.ct-button-637620f7 {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.4s ease;
    z-index: 3;
    pointer-events: auto; /* Re-enable clicks */
    
    /* Independent Offset Variables */
    --ct-btn-x: 0px;
    --ct-btn-y: 0px;
    transform: translate(var(--ct-btn-x), var(--ct-btn-y));
}

.ct-button-637620f7::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ct-button-637620f7:hover::after {
    width: 100%;
}

/* Animation System */
.ct-animate-637620f7 {
    --ct-bg-duration: 1s;
    --ct-title-delay: 0.5s;
    --ct-sub-delay: 0.8s;
    --ct-btn-delay: 1.2s;
    
    /* Background Fade */
    animation: ctFadeInBg-637620f7 var(--ct-bg-duration) ease-out forwards;
}

/* Initial Hidden State for Animated Elements */
.ct-animate-637620f7 .ct-title-637620f7,
.ct-animate-637620f7 .ct-subtitle-637620f7,
.ct-animate-637620f7 .ct-button-637620f7 {
    opacity: 0; /* Ensures elements are hidden before animation starts */
}

/* Prevent pointer events on hidden elements before animation completes */
.ct-animate-637620f7 .ct-title-637620f7 {
    animation: ctCinematicTitleReveal-637620f7 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ct-title-delay) forwards;
}

.ct-animate-637620f7 .ct-subtitle-637620f7 {
    animation: ctCinematicSubReveal-637620f7 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ct-sub-delay) forwards;
}

.ct-animate-637620f7 .ct-button-637620f7 {
    animation: ctCinematicButtonReveal-637620f7 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--ct-btn-delay) forwards;
    pointer-events: none; /* Disable interaction until animation finishes (managed via keyframes if possible, or assume safety due to opacity 0) */
}

@keyframes ctFadeInBg-637620f7 {
    0% { background-color: transparent; }
}

@keyframes ctCinematicTitleReveal-637620f7 {
    0% {
        opacity: 0;
        transform: translate(var(--ct-title-x), calc(var(--ct-title-y) + 20px)) scale(0.98);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translate(var(--ct-title-x), var(--ct-title-y)) scale(1);
        filter: blur(0);
    }
}

@keyframes ctCinematicSubReveal-637620f7 {
    0% {
        opacity: 0;
        transform: translate(var(--ct-sub-x), calc(var(--ct-sub-y) + 20px)) scale(0.98);
        filter: blur(4px);
    }
    100% {
        opacity: 0.8; /* Reverting to default subtitle opacity */
        transform: translate(var(--ct-sub-x), var(--ct-sub-y)) scale(1);
        filter: blur(0);
    }
}

@keyframes ctCinematicButtonReveal-637620f7 {
    0% {
        opacity: 0;
        transform: translate(var(--ct-btn-x), calc(var(--ct-btn-y) + 15px));
        pointer-events: none;
    }
    100% {
        opacity: 1; /* Ensure this respects Elementor settings via inline styles if necessary, but default 1 here is safe as base */
        transform: translate(var(--ct-btn-x), var(--ct-btn-y));
        pointer-events: auto;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ct-title-637620f7 { font-size: 3.5rem; }
    .ct-subtitle-637620f7 { font-size: 1rem; }
}

@media (max-width: 480px) {
    .ct-title-637620f7 { font-size: 2.5rem; }
    .ct-subtitle-637620f7 { font-size: 0.9rem; }
}
