/**
 * GSAP Animations & Parallax CSS - FIXED VERSION
 * Includes animations, parallax effects, and fixes for overlapping sections
 * 
 * @package rprocess-child
 * @version 2.1 - Fixed Parallax Initial Gap
 */

/* ==========================================
   SMOOTH TRANSITIONS & BASE STYLES
   ========================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Ensure GSAP animations work properly */
[data-aos],
[class*="elementor-"] {
    will-change: transform, opacity;
    -webkit-will-change: transform, opacity;
}

/* ==========================================
   FIX HIDDEN CONTENT - Ensure Visibility
   ========================================== */

/* Ensure all Elementor sections are visible by default */
.elementor-section,
.elementor-container,
.e-con {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
}

/* Ensure content is visible */
.elementor-section > .elementor-container,
.elementor-section > .e-con-inner,
.elementor-container > .e-con-inner,
.e-con > .e-con-inner {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 1;
}

/* Ensure widgets are visible */
.elementor-widget {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure headings, text, buttons, and images are visible */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button,
.elementor-widget-image img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================
   FIX OVERLAPPING SECTIONS
   ========================================== */

/* Prevent sections from overlapping */
.elementor-section {
    position: relative;
    z-index: auto;
    overflow: visible;
}

/* Ensure proper stacking order */
.elementor-section + .elementor-section {
    position: relative;
    z-index: auto;
}

/* Ensure containers don't overlap */
.elementor-container,
.e-con {
    position: relative;
    z-index: auto;
    overflow: hidden;
}

/* Fix for Elementor flex containers */
.e-con.e-flex,
.e-con.e-grid {
    position: relative;
    z-index: auto;
}

/* ==========================================
   PARALLAX BACKGROUND STYLES - FIXED
   ========================================== */

/* Parallax Wrapper */
.elementor-parallax-wrapper {
    position: absolute;
    top: -40px !important;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate3d(0px, 0px, 0px) !important;
    -webkit-transform: translate3d(0px, 0px, 0px) !important;
}

/* Parallax Background Layer */
.elementor-parallax-bg-layer {
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    -webkit-will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    transition: transform 0.1s ease-out;
    -webkit-transition: -webkit-transform 0.1s ease-out;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure parent has position relative */
.elementor-section[data-parallax="true"],
.elementor-container[data-parallax="true"],
.e-con[data-parallax="true"],
.elementor-section.elementor-parallax-bg,
.elementor-container.elementor-parallax-bg,
.e-con.elementor-parallax-bg {
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================
   FIX PARALLAX INITIAL GAP - CRITICAL FIX
   ========================================== */

/* Reset all parallax motion effects transforms */
.elementor-motion-effects-element,
.elementor-motion-effects-container,
.elementor-motion-effects-layer,
[data-settings*="motion_fx"] {
    transform: translate3d(0px, 0px, 0px) !important;
    -webkit-transform: translate3d(0px, 0px, 0px) !important;
    margin-top: 0 !important;
    top: 0 !important;
}

/* Fix for Elementor's built-in parallax */
.elementor-section.elementor-section-height-full {
    margin-top: 0 !important;
}

/* Remove any inherited transforms from background overlays */
.elementor-background-overlay {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Fix gap at top for sections with parallax */
.elementor-section[data-parallax="true"],
.elementor-section.elementor-parallax-bg,
.elementor-section .elementor-parallax-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure first section with parallax has no top gap */
.elementor-section:first-child[data-parallax="true"],
.elementor-section:first-child.elementor-parallax-bg,
.elementor-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for sections that have parallax wrapper (cross-browser compatible) */
.elementor-section .elementor-parallax-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Remove top spacing from main content area */
#main .elementor-section:first-child,
.site-content .elementor-section:first-child,
.elementor-location-content .elementor-section:first-child,
body .elementor-section:first-child {
    margin-top: 0 !important;
}

/* Ensure motion effects parent doesn't create gap */
.elementor-motion-effects-parent {
    overflow: visible !important;
    margin-top: 0 !important;
}

/* Ensure content stays above parallax */
.elementor-section[data-parallax="true"] > .elementor-container,
.elementor-section[data-parallax="true"] > .e-con-inner,
.elementor-container[data-parallax="true"] > .e-con-inner,
.e-con[data-parallax="true"] > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Reset z-index for normal sections */
.elementor-section:not([data-parallax="true"]):not(.elementor-parallax-bg) {
    z-index: auto;
}

/* Smooth transition after parallax reset */
.elementor-motion-effects-element {
    transition: transform 0.1s ease-out;
    -webkit-transition: -webkit-transform 0.1s ease-out;
}

/* ==========================================
   GSAP ANIMATION INITIAL STATES
   ========================================== */

/* Initial states for GSAP animations - only hide if they have the GSAP class */
.gsap-fade-in,
.gsap-slide-left,
.gsap-slide-right,
.gsap-scale-in {
    opacity: 0;
}

/* CRITICAL FIX: Fallback animation if GSAP fails to load */
.gsap-fade-in,
.gsap-slide-left,
.gsap-slide-right,
.gsap-scale-in {
    animation: gsap-fallback-reveal 0.6s ease-out 3s forwards;
    -webkit-animation: gsap-fallback-reveal 0.6s ease-out 3s forwards;
}

@keyframes gsap-fallback-reveal {
    to { 
        opacity: 1 !important; 
        transform: none !important;
        -webkit-transform: none !important;
        visibility: visible !important;
    }
}

@-webkit-keyframes gsap-fallback-reveal {
    to { 
        opacity: 1 !important; 
        -webkit-transform: none !important;
        visibility: visible !important;
    }
}

/* Override GSAP initial states - ensure visibility for non-animated elements */
.elementor-section:not([data-gsap-animated]),
.elementor-container:not([data-gsap-animated]),
.e-con:not([data-gsap-animated]) {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}

/* DISABLE ANIMATIONS IN ADMIN/EDITOR MODE */
.wp-admin section,
.wp-admin .section,
.elementor-editor-active section,
.elementor-editor-active .section,
.elementor-editor-preview section,
.elementor-editor-preview .section,
body.elementor-editor-active section,
body.elementor-editor-active .section,
[data-gsap-animated] {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}

/* ==========================================
   HOVER EFFECTS - Enhanced Interactivity
   ========================================== */

/* Image zoom on hover - DISABLED */
.elementor-widget-image img,
.elementor-image img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Button hover effects */
.elementor-button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    -webkit-transition: width 0.6s ease, height 0.6s ease;
}

.elementor-button:hover::before {
    width: 300px;
    height: 300px;
}

.elementor-button:hover {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   ICON BOX HOVER EFFECT - ZOOM + PULSE
   ========================================== */
/* Icon box hover effect */
.elementor-widget-icon-box {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-widget-icon-box:hover {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
}

/* Icon zoom + subtle pulse */
.elementor-icon {
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
}

.elementor-widget-icon-box:hover .elementor-icon {
    animation: zoomPulse 1.5s ease-in-out infinite;
    -webkit-animation: zoomPulse 1.5s ease-in-out infinite;
}

@keyframes zoomPulse {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
}

@-webkit-keyframes zoomPulse {
    0%, 100% {
        -webkit-transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
}

/* ==========================================
   CARD ANIMATIONS
   ========================================== */

/* Card lift and shadow - Image box hover animations DISABLED */
.elementor-widget-image-box {
    position: relative;
}

.elementor-widget-image-box::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    filter: blur(15px);
    -webkit-filter: blur(15px);
    opacity: 0;
}

/* ==========================================
   HEADING ANIMATIONS
   ========================================== */

.elementor-heading-title {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

/* ==========================================
   TESTIMONIAL EFFECTS
   ========================================== */

.elementor-testimonial {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-testimonial:hover {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   COUNTER ANIMATIONS
   ========================================== */

.elementor-counter-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* ==========================================
   BLOG POST CARDS
   ========================================== */

.elementor-post {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.elementor-post:hover {
    transform: translateY(-12px) scale(1.02);
    -webkit-transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   SECTION BACKGROUNDS
   ========================================== */

.elementor-section {
    position: relative;
}

.elementor-background-overlay {
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
}

/* ==========================================
   CERTIFICATION BADGES - DISABLED
   ========================================== */

.elementor-widget-image img[alt*="ISO"],
.elementor-widget-image img[alt*="Certified"],
.elementor-widget-image img[alt*="HIPAA"],
.elementor-widget-image img[alt*="TISAX"] {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

/* ==========================================
   DIVIDER EFFECTS
   ========================================== */

.elementor-divider-separator {
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.elementor-divider:hover .elementor-divider-separator {
    transform: scaleX(1.1);
    -webkit-transform: scaleX(1.1);
}

/* ==========================================
   LINK EFFECTS
   ========================================== */

a {
    position: relative;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* GPU acceleration for transforms */
.elementor-widget,
.elementor-section,
.elementor-column,
img {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Prevent layout shift during animations */
* {
    box-sizing: border-box;
}

/* ==========================================
   LOADING STATES
   ========================================== */

/* Fade in on page load */
body {
    animation: fadeInPage 0.6s ease-in;
    -webkit-animation: fadeInPage 0.6s ease-in;
}

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

@-webkit-keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        -webkit-animation-duration: 0.01ms !important;
        -webkit-transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================
   MOBILE OPTIMIZATIONS
   ========================================== */

@media screen and (max-width: 768px) {
    /* Ensure mobile sections are visible */
    .elementor-section,
    .elementor-container,
    .e-con {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Reduce hover effects on mobile */
    .elementor-widget:hover,
    .elementor-widget-icon-box:hover,
    .elementor-widget-image-box:hover {
        transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
    }
    
    /* Disable parallax on mobile */
    .elementor-parallax-wrapper {
        display: none;
    }
    
    .elementor-section[data-parallax="true"],
    .elementor-container[data-parallax="true"],
    .e-con[data-parallax="true"] {
        background-image: inherit !important;
    }
    
    .elementor-background-overlay {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* Fix mobile parallax gap */
    .elementor-motion-effects-element {
        transform: translate3d(0px, 0px, 0px) !important;
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
    }
}

/* ==========================================
   CUSTOM ANIMATIONS
   ========================================== */

/* Pulse animation for CTA buttons */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@-webkit-keyframes pulse {
    0%, 100% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.05);
    }
}

.elementor-button.pulse-animation {
    animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
}

/* Floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@-webkit-keyframes float {
    0%, 100% {
        -webkit-transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
    -webkit-animation: float 3s ease-in-out infinite;
}

/* Shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
    -webkit-animation: shimmer 3s infinite;
}

/* ==========================================
   FOOTER ANIMATIONS
   ========================================== */

footer {
    position: relative;
}

footer .elementor-widget {
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
}

footer .elementor-widget:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

/* ==========================================
   CUSTOM UTILITY CLASSES
   ========================================== */

.animate-on-hover {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.animate-on-hover:hover {
    transform: translateY(-10px) scale(1.05);
    -webkit-transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.fade-in {
    animation: fadeIn 1s ease-in;
    -webkit-animation: fadeIn 1s ease-in;
}

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

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

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
    -webkit-animation: slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes slideInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
    -webkit-animation: slideInRight 0.8s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes slideInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(50px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}