/* Animated Halftone Dot Background */
.halftone-bg {
    background-image: radial-gradient(#1e293b 2.5px, transparent 2.5px);
    background-size: 32px 32px;
    opacity: 0.08;
    animation: pan-halftone 20s linear infinite;
}

@keyframes pan-halftone {
    0% { background-position: 0px 0px; }
    100% { background-position: 64px 64px; }
}

/* Giant Pop-Art Text Outline */
.text-pop {
    text-shadow: 
        4px 4px 0 #1e293b,
        -1.5px -1.5px 0 #1e293b,  
        1.5px -1.5px 0 #1e293b,
        -1.5px 1.5px 0 #1e293b,
        1.5px 1.5px 0 #1e293b,
        8px 8px 0px rgba(0,0,0,0.25);
}

/* Sticker Card Effect */
.sticker-card {
    background: #ffffff;
    border: 4px solid #1e293b;
    border-radius: 24px;
    box-shadow: 
        0 0 0 8px #ffffff,
        12px 12px 0px 8px #1e293b;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 10;
}

.sticker-card:hover {
    transform: scale(1.03) translateY(-8px) rotate(0deg) !important;
    box-shadow: 
        0 0 0 8px #ffffff,
        18px 18px 0px 8px #1e293b !important;
    z-index: 20;
}

/* Action Buttons */
.btn-pop {
    background: #01CDFE;
    color: #1e293b;
    border: 4px solid #1e293b;
    border-radius: 999px;
    font-family: 'Paytone One', sans-serif;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #1e293b;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-pop:hover {
    background: #FF71CE;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1e293b;
}

.btn-pop:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0 #1e293b;
}

.btn-pop:focus {
    outline: 3px solid #05ffa1;
    outline-offset: 2px;
}

/* Colored Textured Tape Strips */
.tape {
    position: absolute;
    height: 36px;
    width: 130px;
    border: 3px solid #1e293b;
    z-index: 15;
    mix-blend-mode: normal;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.1) 4px,
        rgba(0, 0, 0, 0.1) 8px
    );
    box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

.tape-pink { background-color: #FF71CE; }
.tape-cyan { background-color: #01CDFE; }
.tape-mint { background-color: #05ffa1; }

/* Floating Animations */
@keyframes float-async-1 {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes float-async-2 {
    0%, 100% { transform: translateY(0px) rotate(2deg); }
    50% { transform: translateY(10px) rotate(-1deg); }
}

.anim-float-1 { animation: float-async-1 3s ease-in-out infinite; }
.anim-float-2 { animation: float-async-2 4s ease-in-out infinite; }

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.anim-spin { animation: spin-slow 12s linear infinite; }

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .anim-float-1,
    .anim-float-2,
    .anim-spin,
    .halftone-bg {
        animation: none;
    }

    .sticker-card,
    .btn-pop {
        transition: none;
    }
}