@font-face {

    font-family: 'Road Rage';

    src: url('/assets/fonts/RoadRage-Regular.ttf')
    format('truetype');

    font-display: swap;

}

/* =========================
   VARIABLES
========================= */

:root{
    --header-height:72px;
}

/* =========================
   RESET
========================= */

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/* =========================
   BODY
========================= */

body {

    opacity:1;
    transition:opacity .5s ease;

}

/* ACTIVÉ PAR JS */

body.loaded {

    opacity:1;

}

/* TRANSITION ENTRE PAGES */

body.fade-out {

    opacity:0;

}

/* =========================
   TYPOGRAPHIE
========================= */

h1 {

    font-family:'Road Rage',sans-serif;

    letter-spacing:3px;

}

/* =========================
   HERO
========================= */

.hero-offset {

    padding-top:var(--header-height);

}

/* =========================
   NAVIGATION
========================= */

.nav-link {

    position:relative;

    color:#e2e8f0;

    transition:
        color .3s ease;

}

.nav-link:hover {

    color:#60a5fa;

}

.nav-link::after {

    content:'';

    position:absolute;

    left:0;
    bottom:-6px;

    width:0%;

    height:2px;

    background:#60a5fa;

    transition:width .3s ease;

}

.nav-link:hover::after {

    width:100%;

}

/* =========================
   MENU MOBILE
========================= */

.mobile-link {

    color:#e2e8f0;

    font-size:1.05rem;

    transition:
        color .3s ease,
        transform .3s ease;

}

.mobile-link:hover {

    color:#60a5fa;

    transform:translateX(6px);

}

/* =========================
   FOOTER
========================= */

.footer-link {

    transition:color .3s ease;

}

.footer-link:hover {

    color:#60a5fa;

}

.social-link {

    transition:
        transform .3s ease,
        opacity .3s ease;

}

.social-link:hover {

    transform:scale(1.15);

    opacity:.85;

}

/* =========================
   OPERATION ALERT
========================= */

@keyframes opPulse {

    0% {

        transform:scale(1);

        text-shadow:
            0 0 0 rgba(239,68,68,0);

    }

    50% {

        transform:scale(1.08);

        text-shadow:
            0 0 8px rgba(239,68,68,.9),
            0 0 16px rgba(239,68,68,.7),
            0 0 28px rgba(239,68,68,.5);

    }

    100% {

        transform:scale(1);

        text-shadow:
            0 0 0 rgba(239,68,68,0);

    }

}

@keyframes radarPing {

    0% {

        transform:
            translate(-50%,-50%)
            scale(.5);

        opacity:1;

    }

    100% {

        transform:
            translate(-50%,-50%)
            scale(2.4);

        opacity:0;

    }

}

@keyframes liveBlink {

    0%,100% {

        opacity:1;

    }

    50% {

        opacity:.4;

    }

}

.operation-live {

    position:relative;

    color:#f87171 !important;

    font-weight:bold;

    animation:
        opPulse 1.8s infinite;

}

/* POINT ROUGE */

.operation-live::before {

    content:"";

    position:absolute;

    width:8px;
    height:8px;

    background:#ef4444;

    border-radius:999px;

    left:-14px;
    top:50%;

    transform:translateY(-50%);

    box-shadow:
        0 0 10px rgba(239,68,68,.8),
        0 0 18px rgba(239,68,68,.6);

}

/* BADGE */

.operation-live::after {

    content:"OP ACTIVE";

    position:absolute;

    top:-14px;
    right:-72px;

    background:
        linear-gradient(
            to right,
            #dc2626,
            #991b1b
        );

    color:white;

    font-size:.58rem;

    font-weight:bold;

    padding:3px 8px;

    border-radius:999px;

    letter-spacing:.5px;

    box-shadow:
        0 0 12px rgba(239,68,68,.6);

    animation:
        liveBlink 1.2s infinite;

}

/* RADAR */

.radar {

    position:absolute;

    width:8px;
    height:8px;

    left:-10px;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:999px;

    border:2px solid rgba(239,68,68,.5);

    animation:
        radarPing 1.8s infinite;

}