/**
 * @file style.css
 * @description Main stylesheet for mparamos.com landing page.
 * Contains custom fonts, video background styling, interactive resource buttons,
 * footer animations, and pure CSS auto-generated flags.
 * Framework Note: Tailwind CSS is used alongside this file (via tailwind-output.css).
 * @author Miguel Páramos
 */

/* =========================================
   1. RESET & CUSTOM TYPOGRAPHY
   ========================================= */

/* Basic CSS Reset to ensure consistent rendering across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Custom font registration: FlorenceSans (Regular) */
@font-face {
    font-family: 'FlorenceSans';
    src: url('../font/sfflorencesans.ttf') format('truetype');
    font-weight: normal;
}

/* Custom font registration: FlorenceSans (Bold) */
@font-face {
    font-family: 'FlorenceSans';
    src: url('../font/sfflorencesansblack.ttf') format('truetype');
    font-weight: bold;
}

/* =========================================
   2. BACKGROUND VIDEO
   ========================================= */

/* Fixed container locking the video to the viewport background */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    background-color: #000; /* Fallback color if video fails to load */
}

/* Ensure the video scales properly to cover the entire screen */
#bg-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0.8; /* Slightly darkened to improve text readability */
}

/* =========================================
   3. INTERACTIVE COMPONENTS (RESOURCE BUTTONS)
   ========================================= */

/* Glassmorphism styling for the educational resource buttons */
.resource-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 165, 233, 0.1); /* Transparent Sky Blue */
    border: 1px solid rgba(14, 165, 233, 0.4);
    color: #e2e8f0; /* Slate 200 */
    text-decoration: none;
    border-radius: 0.5rem;
    font-family: sans-serif;
    font-weight: bold;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px); /* Glass effect */
}

/* Hover state: enhanced glow, solid border, and slight upward movement */
.resource-btn:hover {
    background: rgba(14, 165, 233, 0.3);
    border-color: rgba(14, 165, 233, 0.8);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    transform: translateY(-2px);
}

/* =========================================
   4. FOOTER LINK ANIMATIONS
   ========================================= */

/* Base styling for the license link in the footer */
.credits-license a {
    color: #00ff88;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover state: scale up and apply continuous flowing gradient animation */
.credits-license a:hover {
    text-decoration: none;
    transform: scale(1.15);
    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: blueGlow 4s linear infinite;
}

/* Keyframes for the flowing text gradient (left to right) */
@keyframes blueGlow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* =========================================
   5. PURE CSS FLAGS (INTERNATIONALIZATION)
   ========================================= */

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

/* Hover state: slight scale up and generic border focus */
.flag-btn:hover {
    transform: scale(1.15);
    border-color: #666;
}

/* Active state: neon green border, strong glow, and elevated z-index */
.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: Vertical linear gradient */
.flag-es {
    background: linear-gradient(to bottom, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75%);
}

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

/* Hybrid English/US Flag: Base white background */
.flag-en {
    background: #fff;
}

/* Hybrid English/US Flag (Top-Left): US Flag approximation using repeating gradients */
.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%); /* Diagonal cut */
}

/* Hybrid English/US Flag (Bottom-Right): UK Flag approximation via overlapping angled gradients */
.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%); /* Diagonal cut */
}

/* Diagonal separator line between US and UK sections */
.flag-en-separator {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top left, transparent 47%, #222 47%, #222 53%, transparent 53%);
    z-index: 10;
    pointer-events: none; /* Prevent interference with clicks */
}