/**
 * Premium Luxury Saree Boutique Home Page Animation CSS
 * Transparent fixed canvas overlay — purely decorative, zero interaction blocking.
 *
 * SAFETY ARCHITECTURE:
 * - z-index: 1 → sits BEHIND all interactive content (headers, menus, modals, popups)
 * - pointer-events: none → invisible to all mouse/touch/click events
 * - touch-action: none → explicitly tells mobile browsers to ignore touch on this layer
 * - contain: strict → browser will never recalculate layout for page due to canvas changes
 * - Desktop ONLY: hidden on mobile via media query to prevent any mobile menu conflicts
 */

/* Wrapper container — isolates the canvas from the rest of the DOM tree */
#nym-luxury-animation-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    touch-action: none !important;
    z-index: 9 !important; /* Above backgrounds and product cards, behind header menus & popups */
    contain: none !important;
    isolation: isolate !important;
}

/* The actual canvas element */
.nym-luxury-animation-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;

    /* CRITICAL: completely invisible to ALL user interactions */
    pointer-events: none !important;
    touch-action: none !important;

    /* Safe z-index — behind headers, menus, modals, popups, overlays, everything */
    z-index: 9 !important;

    display: block !important;
    mix-blend-mode: normal !important;

    /* CSS Containment — prevent Size containment to avoid collapses in nested zero-dim wrappers */
    contain: none !important;
    isolation: isolate !important;

    /* Hardware acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}


/* Mobile responsive styles — keeps the canvas visible and non-blocking on all mobile screens */
@media (max-width: 768px) {
    #nym-luxury-animation-wrap,
    .nym-luxury-animation-canvas {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        touch-action: none !important;
    }
}

/* Hide during printing */
@media print {
    #nym-luxury-animation-wrap,
    .nym-luxury-animation-canvas {
        display: none !important;
    }
}