/**
 * Yuneify Website - Spiral Container Styles
 */

#spiral-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spiral-element {
    position: absolute;
    pointer-events: none;
    /* Cross-browser transform-origin */
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    /* Performance: Force GPU layer with fallbacks */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

/* Cross-browser keyframes */
@-webkit-keyframes rotateSpiral {
    from { -webkit-transform: translate(-50%, -50%) rotate(0deg) translateZ(0); }
    to { -webkit-transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

@-moz-keyframes rotateSpiral {
    from { -moz-transform: translate(-50%, -50%) rotate(0deg) translateZ(0); }
    to { -moz-transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

/* Removed deprecated @-ms-keyframes - IE11 and below are no longer supported */

@keyframes rotateSpiral {
    from { transform: translate(-50%, -50%) rotate(0deg) translateZ(0); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

/* Spiral flow animations with vendor prefixes */
@-webkit-keyframes spiralFlow {
    0% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: -300; }
}

@-moz-keyframes spiralFlow {
    0% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: -300; }
}

@keyframes spiralFlow {
    0% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: -300; }
}

@-webkit-keyframes spiralFlowDynamic {
    0% { stroke-dashoffset: var(--animation-range, 200px); }
    100% { stroke-dashoffset: calc(var(--animation-range, 200px) * -1); }
}

@-moz-keyframes spiralFlowDynamic {
    0% { stroke-dashoffset: var(--animation-range, 200px); }
    100% { stroke-dashoffset: calc(var(--animation-range, 200px) * -1); }
}

@keyframes spiralFlowDynamic {
    0% { stroke-dashoffset: var(--animation-range, 200px); }
    100% { stroke-dashoffset: calc(var(--animation-range, 200px) * -1); }
}

@-webkit-keyframes spiralFlowInward {
    0% { stroke-dashoffset: -120; }
    100% { stroke-dashoffset: 120; }
}

@-moz-keyframes spiralFlowInward {
    0% { stroke-dashoffset: -120; }
    100% { stroke-dashoffset: 120; }
}

@keyframes spiralFlowInward {
    0% { stroke-dashoffset: -120; }
    100% { stroke-dashoffset: 120; }
}

/* Responsive Design with enhanced mobile support */
@media (max-width: 768px) {
    .spiral-element {
        width: 57.5% !important; /* 50% + 15% = 57.5% */
        height: 57.5% !important; /* 50% + 15% = 57.5% */
        /* Ensure proper centering on mobile - DON'T override transform for animations */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        /* Removed transform override to let animations work */
    }
    
    /* Performance: Reduce animation complexity on mobile */
    .spiral-rotate {
        animation-duration: 25s;
    }
    
    /* Ensure spiral container is properly centered */
    .spiral-container, #background-spirals {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .spiral-element {
        width: 46% !important; /* 40% + 15% = 46% */
        height: 46% !important; /* 40% + 15% = 46% */
        /* Ensure proper centering on small mobile screens - DON'T override transform */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        /* Removed transform override to let animations work */
    }
    
    /* Performance: Further optimize for small screens */
    .spiral-rotate {
        animation-duration: 30s;
    }
    
    /* Ensure spiral container is properly centered */
    .spiral-container, #background-spirals {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Performance optimizations for very low-end devices */
@media screen and (max-width: 480px) and (max-height: 800px) {
    .spiral-container {
        /* Reduce quality slightly on very small screens but maintain centering */
        -webkit-transform: translateZ(0) scale(0.92); /* 0.8 + 15% = 0.92 */
        -moz-transform: translateZ(0) scale(0.92); /* 0.8 + 15% = 0.92 */
        transform: translateZ(0) scale(0.92); /* 0.8 + 15% = 0.92 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .spiral-element {
        /* Override scaling for individual elements to maintain proper centering */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        /* Removed transform override - let animations handle transforms */
        width: 40.25% !important; /* 35% + 15% = 40.25% */
        height: 40.25% !important; /* 35% + 15% = 40.25% */
    }
}

/* Legacy browser support - Removed IE-specific styles as IE is no longer supported */

/* Firefox-specific optimizations */
@supports (-moz-appearance: none) {
    .spiral-element svg {
        /* Firefox: Use geometric precision for smooth lines */
        shape-rendering: geometricPrecision;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
    }
}

/* Safari-specific optimizations */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance:none) {
        .spiral-element {
            /* Safari hardware acceleration */
            -webkit-transform: translateZ(0);
            -webkit-perspective: 1000px;
        }
    }
}

/* Accessibility - Respect user preferences with fallbacks */
@media (prefers-reduced-motion: reduce) {
    .spiral-rotate {
        -webkit-animation-duration: 300s;
        -moz-animation-duration: 300s;
        animation-duration: 300s;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    
    .spiral-element svg path {
        -webkit-animation-duration: 20s !important;
        -moz-animation-duration: 20s !important;
        animation-duration: 20s !important;
        -webkit-animation-timing-function: ease-in-out !important;
        -moz-animation-timing-function: ease-in-out !important;
        animation-timing-function: ease-in-out !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high), (prefers-contrast: more) {
    .spiral-element svg path {
        stroke-width: 2px !important;
        opacity: 1 !important;
    }
}

/* Performance: Optimize SVG rendering with cross-browser support */
.spiral-element svg {
    will-change: transform;
    /* Performance: Enable hardware acceleration for SVG */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    /* Quality: Prioritize smooth rendering over speed */
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
    /* Cross-browser SVG optimizations */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Performance: Optimize path rendering */
.spiral-element svg path {
    will-change: stroke-dashoffset;
    /* Performance: Enable hardware acceleration for paths */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    /* Quality: Ensure smooth stroke rendering */
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    /* Cross-browser optimizations */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fallback for older browsers */
.spiral-container {
    /* Fallback positioning */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.spiral-element {
    /* Fallback centering */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -216px; /* Half of 432px */
    margin-left: -216px; /* Half of 432px */
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .spiral-container {
        /* Reduce complexity on tablets */
        opacity: 0.8;
    }
}

@media print {
    .spiral-container {
        display: none;
    }
}

.spiral-rotate {
    /* Cross-browser animation */
    -webkit-animation: rotateSpiral 20s linear infinite;
    -moz-animation: rotateSpiral 20s linear infinite;
    animation: rotateSpiral 20s linear infinite;
    /* Initial centering transform - matches logo positioning */
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    /* Performance optimizations */
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

/* Clean mobile animation handling */
.mobile-layout .spiral-rotate,
.small-mobile-layout .spiral-rotate {
    /* Ensure animations work without conflicts */
    -webkit-animation: rotateSpiral 20s linear infinite;
    -moz-animation: rotateSpiral 20s linear infinite;
    animation: rotateSpiral 20s linear infinite;
    /* Initial centering transform - matches logo positioning */
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
    will-change: transform;
}

/* Sub-page animation styles - Clean implementation */
/* Note: Animation keyframes are now dynamically injected by JavaScript */

/* Responsive adjustments */
@media (max-width: 768px) {
    #background-spirals svg {
        will-change: transform;
        /* Ensure proper centering on mobile - EXACT same as logo */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Performance: Reduce animation complexity on mobile */
    #background-spirals svg path {
        stroke-width: 1px;
        animation-duration: 15s; /* Slower, less intensive */
    }
    
    /* Show all spiral paths on mobile for full effect */
}

@media (max-width: 480px) {
    #background-spirals {
        opacity: 0.6; /* Reduce visual impact */
        /* Ensure proper centering on small mobile screens */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #background-spirals svg {
        max-width: none;
        max-height: none;
        width: 115vw; /* 15% bigger via sizing instead of scale */
        height: 115vh; /* 15% bigger via sizing instead of scale */
        /* Enhanced mobile centering - EXACT same as logo */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* NO scale - just centering */
    }
    
    /* Further reduce animation complexity on small screens */
    #background-spirals svg path {
        stroke-width: 0.8px;
        animation-duration: 20s; /* Even slower for better performance */
    }
    
    /* Show all spiral paths for full visual effect */
}

/* Performance optimization for mobile devices */
@media screen and (max-width: 480px) and (max-height: 800px) {
    #background-spirals {
        /* Optimize for mobile portrait mode */
        transform: none;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    #background-spirals svg {
        /* Mobile-specific positioning - EXACT same as logo */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* NO scale - just centering like logo */
        width: 138vw; /* 120vw + 15% = 138vw for bigger effect */
        height: 138vh; /* 120vh + 15% = 138vh for bigger effect */
        max-width: none;
        max-height: none;
    }
    
    /* Reduce motion for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        #background-spirals svg path {
            animation: none;
        }
        
        #background-spirals svg {
            transform: translate(-50%, -50%) scale(1.15); /* 1.0 + 15% = 1.15 */
        }
    }
    
    /* Battery optimization */
    @media (prefers-reduced-motion: no-preference) {
        #background-spirals svg path {
            animation-play-state: running;
        }
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    #background-spirals path {
        animation-duration: 10s !important;
        animation-timing-function: ease-in-out !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    #background-spirals path {
        stroke-width: 3 !important;
        opacity: 0.8 !important;
    }
}

/* Print styles */
@media print {
    #background-spirals {
        display: none;
    }
}

/* ==========================================
   MOBILE SPIRAL OVERRIDES - HIGH SPECIFICITY
   ========================================== */

/* ==========================================
   ESSENTIAL MOBILE SPIRAL VISIBILITY
   ========================================== */

/* Restore essential mobile spiral rules for visibility */
@media screen and (max-width: 768px) {
    body #background-spirals,
    #background-spirals {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -1 !important;
        pointer-events: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body #background-spirals svg,
    #background-spirals svg {
        width: 100vw !important;
        height: 100vh !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* EXACT same centering as logo */
        z-index: -1 !important;
        opacity: 0.6 !important;
    }
}

@media screen and (max-width: 480px) {
    body #background-spirals svg,
    #background-spirals svg {
        opacity: 0.6 !important;
        transform: translate(-50%, -50%) !important; /* EXACT same centering as logo - NO scale here */
        width: 115vw !important; /* Use size scaling instead of transform scaling */
        height: 115vh !important; /* This achieves the 15% bigger effect */
    }
    
    body #background-spirals svg path,
    #background-spirals svg path {
        stroke: #4A6FFF !important;
        stroke-width: 1px !important;
        opacity: 0.8 !important;
        fill: none !important;
        display: block !important; /* Ensure all paths are visible */
    }
}

/* ==========================================
   MOBILE SPIRAL CENTERING SOLUTION
   ========================================== */

/* Mobile-specific spiral centering */
/* Deprecated - conflicts with clean responsive design - removed */

/* Deprecated - conflicts with clean responsive design - removed */

/* Deprecated helper classes - no longer needed with clean responsive design */

/* Deprecated mobile-spiral-container - replaced by clean responsive classes */

/* Spiral CSS Updated: 2025-07-06 06:32:04 */

/* ==========================================
   MOBILE SPIRAL POSITIONING IMPROVEMENTS
   ========================================== */

/* Deprecated - replaced by class-based responsive design */

/* Removed transform overrides that interfere with spiral animations */

/* ==========================================
   CLEAN RESPONSIVE DESIGN SYSTEM
   ========================================== */

/* Mobile layout class-based responsive design */
.mobile-layout #background-spirals {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: 1 !important; /* Ensure container is visible */
    visibility: visible !important; /* Force visibility */
}

.mobile-layout #background-spirals svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    opacity: 0.6 !important; /* Essential for visibility */
    transform: translate(-50%, -50%) !important; /* EXACT same centering as logo */
    transform-origin: center center !important;
}

/* Ensure spiral elements are properly sized and positioned on mobile */
.mobile-layout .spiral-element {
    width: 80vw !important;
    height: 80vh !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Don't override transform - let animations work */
}

/* Small mobile layout optimizations */
.small-mobile-layout #background-spirals svg {
    /* Don't override transform - let animations work naturally */
    width: 115vw !important; /* Scale via size instead of transform */
    height: 115vh !important;
}

.small-mobile-layout .spiral-element {
    width: 92vw !important; /* 80vw + 15% = 92vw */
    height: 92vh !important; /* 80vh + 15% = 92vh */
}

/* Essential mobile spiral path styling */
.mobile-layout #background-spirals svg path {
    stroke: #4A6FFF !important;
    stroke-width: 1px !important;
    opacity: 0.8 !important;
    fill: none !important;
    transform-origin: center center !important;
    display: block !important; /* Show all spiral paths */
}

.small-mobile-layout #background-spirals svg path {
    stroke-width: 0.8px !important;
    opacity: 0.7 !important;
}

/* Mobile-responsive logo styling */
.mobile-responsive.center-logo {
    width: 450px !important;
    height: 450px !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
}

.mobile-responsive .logo-image {
    width: 100% !important;
    height: auto !important;
    max-width: 450px !important;
    object-fit: contain !important;
}

/* Remove conflicting mobile-spiral-container styles */
.mobile-spiral-container {
    /* Deprecated - functionality moved to .mobile-layout */
}

/* Clean up old mobile-centered classes */
.mobile-centered {
    /* Deprecated - functionality moved to responsive layout classes */
}