/* Parallax Effects for Jooonlabs Website */

/* General Parallax Settings */
.parallax-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure proper stacking context */
}

/* Fixed Background Rings - Central Element */
.fixed-ring-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Reduced z-index to be behind the content */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.fixed-ring-container svg {
    width: 100%;
    height: 100%;
    max-width: 1200px; /* Match container max-width */
    max-height: 1200px; /* Keep it square */
    will-change: transform; /* Optimize for animations */
    overflow: visible;
}

/* Progressive Ring Styles */
.progressive-ring {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(213, 185, 128, 0.3)); /* Add subtle glow */
    transform-origin: 500px 500px; /* Explicitly set to SVG coordinates */
    will-change: transform, opacity;
    z-index: 2; /* Higher z-index to ensure rings are in front of center elements */
}

/* Center dot styles */
.center-dot, .center-bg {
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(213, 185, 128, 0.5)); /* Stronger glow for center */
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 1; /* Lower z-index to ensure center elements are behind rings */
}

/* Ensure sections have proper spacing */
section.parallax-container {
    position: relative;
    padding: 80px 0;
    transition: all 0.5s ease;
    min-height: auto; /* Changed from 80vh to auto to prevent extra space */
    z-index: 10; /* Ensure sections are above the rings */
}

/* First section should be full height */
section.parallax-container:first-of-type {
    min-height: 100vh;
}

/* Smooth section transitions */
section.parallax-container:not(:first-child) {
    margin-top: -1px; /* Prevent gaps between sections */
}

/* Content positioning */
.container {
    position: relative;
    z-index: 15; /* Increased z-index to ensure content is above the rings */
}

/* Ensure hero content is always visible */
#hero .container {
    position: relative;
    z-index: 15; /* Higher than the parallax background and rings */
}

.hero-content {
    opacity: 1 !important; /* Force visibility */
    transform: translateY(0) !important; /* Prevent any transform issues */
}

/* ScrollTrigger markers styling */
.gsap-marker-scroller-start,
.gsap-marker-scroller-end,
.gsap-marker-start,
.gsap-marker-end {
    z-index: 9999 !important;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .parallax-container,
    .fixed-ring-container,
    .fixed-ring-container svg,
    .progressive-ring,
    .center-dot,
    .center-bg {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}