/* Custom styles for Art Deco geometric elements that are tricky with just Tailwind */
.art-deco-border {
    position: relative;
    border: 2px solid #FF6500;
    padding: 1rem;
}
.art-deco-border::before {
    content: '';
    position: absolute;
    top: 6px; bottom: 6px; left: 6px; right: 6px;
    border: 1px solid rgba(255, 101, 0, 0.5);
    pointer-events: none;
}

.art-deco-corners {
    position: relative;
}
.art-deco-corners::before, .art-deco-corners::after {
    content: '';
    position: absolute;
    width: 15px; height: 15px;
    border-top: 3px solid #FF6500;
    transition: all 0.3s ease;
}
.art-deco-corners::before { top: 0; left: 0; border-left: 3px solid #FF6500; }
.art-deco-corners::after { top: 0; right: 0; border-right: 3px solid #FF6500; }

.art-deco-corners-bottom::before, .art-deco-corners-bottom::after {
    content: '';
    position: absolute;
    width: 15px; height: 15px;
    border-bottom: 3px solid #FF6500;
}
.art-deco-corners-bottom::before { bottom: 0; left: 0; border-left: 3px solid #FF6500; }
.art-deco-corners-bottom::after { bottom: 0; right: 0; border-right: 3px solid #FF6500; }

/* Interactive Mecha Eye glowing effect on hover */
.mecha-container:hover .mecha-eye {
    opacity: 1;
    box-shadow: 0 0 20px 5px #FF6500, 0 0 40px 10px #FF6500 inset;
    background-color: #FF6500;
    transform: scale(1.1);
}
.mecha-eye {
    transition: all 0.3s ease;
    opacity: 0.3;
}