/* === Easter Egg: APTX 4869 Styles === */

@keyframes poison-pulse {
    0%, to { transform: scale(1); filter: sepia(0) hue-rotate(0) blur(0) }
    10% { transform: scale(1.01) translate(1px,1px); filter: sepia(1) hue-rotate(-50deg) blur(2px) contrast(1.2) }
    20% { transform: scale(.99) translate(-1px,-1px); filter: sepia(1) hue-rotate(-50deg) blur(4px) contrast(1.5) }
    30% { transform: scale(1.02) translate(-2px,2px); filter: sepia(1) hue-rotate(-50deg) blur(6px) contrast(2) }
    40% { transform: scale(.98) translate(2px,-2px); filter: sepia(1) hue-rotate(-50deg) blur(3px) contrast(1.5) }
    50% { transform: scale(1.01); filter: sepia(1) hue-rotate(-50deg) blur(10px) contrast(2) }
}

body.aptx-child-mode {
    transition: transform 8s cubic-bezier(.68,-.55,.27,1.55) !important;
    isolation: isolate;
    transform: scale(.6) !important;
    pointer-events: auto !important;
    cursor: auto !important;
    transform-origin: center top;
    border: 15px solid #111;
    border-radius: 30px;
    box-shadow: 0 0 100px rgba(0,0,0,.9);
    margin: 20px auto;
    height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    background-color: #1e1132;
    width: 90%;
}

body.aptx-child-mode .modal,
body.aptx-child-mode .overlay {
    perspective: none !important;
    transform-style: flat !important;
    transform-origin: center !important;
}

body.aptx-child-mode .modal { position: fixed !important; }

body.aptx-child-mode .overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 2147483646 !important;
}

body.aptx-child-mode.modal-open { overflow: hidden !important; }

body.aptx-child-mode #navbar {
    position: absolute !important;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
}

body.aptx-child-mode #mobile-nav,
body.aptx-child-mode #theme-toggle-btn,
body.aptx-child-mode .fixed-cart-button {
    position: absolute !important;
    width: 100%;
    top: auto;
    left: 0;
    right: 0;
}

@media (max-width: 768px) {
    body.aptx-child-mode {
        transform: scale(.85) !important;
        transform-origin: center center;
        border: 5px solid #000;
        border-radius: 15px;
        height: 98vh;
        margin-top: 1vh;
    }
    body.aptx-child-mode .modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%) scale(1.66) !important;
        z-index: 2147483647 !important;
        transform-style: flat !important;
        transform-origin: center !important;
        width: 90% !important;
        max-width: 600px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
}

body.aptx-poisoned {
    animation: poison-pulse 4s ease-in-out infinite;
    overflow: hidden;
    pointer-events: none;
}

#aptx-overlay {
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: #000;
    z-index: 2147483647;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3.5s cubic-bezier(.4,0,.2,1);
    transform: translate3d(0,0,0);
}

#aptx-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
    font-family: "Courier New", monospace;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    z-index: 200001;
    display: none;
    text-shadow: 0 0 20px #000, 0 0 10px red;
    background: rgba(0,0,0,.8);
    padding: 20px;
    border: 2px solid red;
}

body.aptx-poisoned {
    animation: poison-pulse 4s ease-in-out infinite;
    overflow: hidden;
    pointer-events: none
}

body.aptx-child-mode {
    transform-origin: center top;
    border: 15px solid #111;
    border-radius: 30px;
    box-shadow: 0 0 100px rgba(0,0,0,.9);
    margin: 20px auto;
    height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    background-color: #1e1132;
    width: 90%
}

    body.aptx-child-mode #navbar {
        top: 0
    }

#aptx-overlay {
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: #000;
    z-index: 2147483647;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3.5s cubic-bezier(.4,0,.2,1);
    transform: translate3d(0,0,0)
}

#aptx-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
    font-family: "Courier New",monospace;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    z-index: 200001;
    display: none;
    text-shadow: 0 0 20px #000,0 0 10px red;
    background: rgba(0,0,0,.8);
    padding: 20px;
    border: 2px solid red
}

body.aptx-child-mode {
    transition: transform 8s cubic-bezier(.68,-.55,.27,1.55) !important
}

@media (max-width:768px) {
    body.aptx-child-mode .modal {
        transform: translate(-50%,-50%) scale(1.176) !important
    }
}

body.aptx-child-mode .modal, body.aptx-child-mode .overlay {
    perspective: none !important;
    transform-style: flat !important;
    transform-origin: center !important
}

body.aptx-child-mode .modal {
    position: fixed !important
}

body.aptx-child-mode .overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 2147483646 !important
}

@media (max-width:768px) {
    body.aptx-child-mode {
        transform: scale(.85) !important;
        transform-origin: center center
    }

        body.aptx-child-mode .modal {
            transform: translate(-50%,-50%) scale(1.176) !important
        }
}

body.aptx-child-mode.modal-open {
    overflow: hidden !important
}

body.aptx-child-mode {
    isolation: isolate;
    transform: scale(.6) !important;
    transition: transform 1.5s ease-in-out;
    pointer-events: auto !important;
    cursor: auto !important
}

@media (max-width:768px) {
    body.aptx-child-mode {
        transform: scale(.85) !important;
        transform-origin: center center;
        border: 5px solid #000;
        border-radius: 15px;
        height: 98vh;
        margin-top: 1vh
    }

        body.aptx-child-mode .modal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%,-50%) scale(1.66) !important;
            z-index: 2147483647 !important;
            transform-style: flat !important;
            transform-origin: center !important;
            width: 90% !important;
            max-width: 600px !important;
            max-height: 85vh !important;
            overflow-y: auto !important
        }
}

body.aptx-child-mode #navbar {
    position: absolute !important;
    width: 100%;
    left: 0;
    right: 0
}

body.aptx-child-mode #mobile-nav, body.aptx-child-mode #theme-toggle-btn, body.aptx-child-mode .fixed-cart-button {
    position: absolute !important;
    width: 100%;
    top: auto;
    left: 0;
    right: 0
}

@keyframes poison-pulse {
    0%,to {
        transform: scale(1);
        filter: sepia(0) hue-rotate(0) blur(0)
    }

    10% {
        transform: scale(1.01) translate(1px,1px);
        filter: sepia(1) hue-rotate(-50deg) blur(2px) contrast(1.2)
    }

    20% {
        transform: scale(.99) translate(-1px,-1px);
        filter: sepia(1) hue-rotate(-50deg) blur(4px) contrast(1.5)
    }

    30% {
        transform: scale(1.02) translate(-2px,2px);
        filter: sepia(1) hue-rotate(-50deg) blur(6px) contrast(2)
    }

    40% {
        transform: scale(.98) translate(2px,-2px);
        filter: sepia(1) hue-rotate(-50deg) blur(3px) contrast(1.5)
    }

    50% {
        transform: scale(1.01);
        filter: sepia(1) hue-rotate(-50deg) blur(10px) contrast(2)
    }
}

@keyframes blackout {
    0% {
        opacity: .3
    }

    to {
        opacity: .9
    }
}

@keyframes soft-smooth-shake {
    0%,to {
        transform: translateY(-5px) rotate(0deg)
    }

    25% {
        transform: translateY(-5px) rotate(.5deg)
    }

    75% {
        transform: translateY(-5px) rotate(-.5deg)
    }
}

@keyframes distinct-white-glow {
    0%,to {
        filter: drop-shadow(0 0 8px rgba(255,255,255,.6));
        transform: scale(1.08)
    }

    50% {
        filter: drop-shadow(0 0 20px #fff);
        transform: scale(1.12)
    }
}

@keyframes glow-move {
    0% {
background-position: 200% center
    }

    to {
        background-position: -200%center
    }
}