/**
 * @file style.css
 * @description Core stylesheet handling custom layout mechanics, pure CSS flags, 
 * and custom scrollbars. Designed to be complementary to Tailwind CSS.
 * @author Miguel Páramos
 */

/* ========================================================
   CUSTOM SCROLLBAR STYLES
======================================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #0ea5e9; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0284c7; }

/* ========================================================
   LINK & LICENSE ANIMATIONS (mparamos.com legacy)
======================================================== */
.credits-license a, .animated-link {
    color: #00ff88;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.credits-license a:hover, .animated-link:hover {
    text-decoration: none;
    transform: scale(1.1);
    font-weight: bold;
    background: linear-gradient(90deg, #0066ff, #66b3ff, #0033cc, #0066ff);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: blueShine 4s linear infinite;
}

@keyframes blueShine {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ========================================================
   PURE CSS FLAGS
======================================================== */
.flag-btn {
    width: 32px; height: 22px;
    border: 2px solid transparent; border-radius: 4px;
    cursor: pointer; padding: 0; outline: none;
    position: relative; overflow: hidden; display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s, box-shadow 0.2s;
}

.flag-btn:hover { transform: scale(1.15); border-color: #666; }

.flag-btn.active {
    border-color: #00ff88; transform: scale(1.15);
    box-shadow: 0 0 10px rgba(0,255,136,0.7); z-index: 2;
}

/* Spanish Flag */
.flag-es { background: linear-gradient(to bottom, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75%); }

/* French Flag */
.flag-fr { background: linear-gradient(to right, #002395 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ed2939 66.6%); }

/* Hybrid EN/US Flag */
.flag-en { background: #fff; }
.flag-en::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background:
        linear-gradient(to right, #3C3B6E 45%, transparent 45%) 0 0 / 100% 50% no-repeat,
        repeating-linear-gradient(to bottom, #B22234 0, #B22234 11.11%, #fff 11.11%, #fff 22.22%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.flag-en::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background:
        linear-gradient(to bottom, transparent 40%, #C8102E 40%, #C8102E 60%, transparent 60%),
        linear-gradient(to right, transparent 43%, #C8102E 43%, #C8102E 57%, transparent 57%),
        linear-gradient(to bottom, transparent 33%, #fff 33%, #fff 67%, transparent 67%),
        linear-gradient(to right, transparent 36%, #fff 36%, #fff 64%, transparent 64%),
        linear-gradient(35deg, transparent 46%, #C8102E 46%, #C8102E 54%, transparent 54%),
        linear-gradient(-35deg, transparent 46%, #C8102E 46%, #C8102E 54%, transparent 54%),
        linear-gradient(35deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        linear-gradient(-35deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        #012169;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}