@font-face {
    font-family: "Major";
    src: url("/fonts/MajorMonoDisplay-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Doto";
    src: url("/fonts/Doto-VariableFont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Anta";
    src: url("/fonts/Anta-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

body {
    background-color: antiquewhite;
    position: relative;
    min-height: 100vh;
    margin: 0;
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/logo-white.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 500px;
    opacity: 0.5; /* csak a kép lesz áttetsző */
    pointer-events: none; /* ne zavarja a kattintást */
    z-index: -1; /* háttérbe kerül */
}
@media (max-width: 600px) {
    body::before {
        background-size: 300px auto; /* mobilon 300px széles */
    }
}

/* Alapállapot: legyen transition */
.container-fluid,
nav,
.card,
.row {
    opacity: 1;
    transition: opacity 1.2s ease; /* hosszabb fade */
}

/* Induláskor legyen rejtve */
.preload-hidden .container-fluid,
.preload-hidden nav,
.preload-hidden .card,
.preload-hidden .row {
    opacity: 0;
}

/* navbar background */
.navbar-background {
    background: radial-gradient(circle, #496786 0%, #000000 100%);
    /* Vagy egy kicsit kékebb verzió: */
    /* background: radial-gradient(circle, #232d39 0%, #111418 100%); */
}

.hc-logo {
    width: 150px;
    height: auto;
}

.hc-box-shadow {
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.37);
}

.hc-card-header {
    font-family: "Doto", monospace;
    background-color: darkslategrey;
    font-weight: bold;
    color: beige;
}

.hc-utc-time {
    /* font-family: "Major", monospace; */
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: bolder;
    line-height: 1;
}
/* Tablet miatt */
@media (min-width: 768px) and (max-width: 1300px) {
    .hc-utc-time {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
}

.hc-utc-date {
    /* font-family: "Anta", monospace; */
    font-weight: bold;
}

.hc-report {
    /* font-family: "Anta", monospace; */
    font-weight: bold;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    text-transform: uppercase;
}

.hc-callsign {
    /* font-family: "Anta", monospace; */
    font-weight: bold;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    text-transform: uppercase;
}
@media (min-width: 768px) and (max-width: 1300px) {
    .hc-callsign {
        font-size: clamp(2.5rem, 6vw, 6rem);
    }
}

.hc-mid-height {
    height: 200px;
}
@media (max-width: 576px) {
    .hc-mid-height {
        height: 150px;
    }
}

.hc-large-height {
    height: 280px;
}

.hc-input-capital {
    text-transform: uppercase;
}

.hc-cluster-card {
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
}

.hc-cluster-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* fontos! */
}

#cluster-scroll {
    flex: 1;
    overflow-y: auto;
}

.kp-led-bar {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 10px;
}

.kp-led {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background-color: #ccc;
    transition:
        background-color 0.2s,
        box-shadow 0.2s;
    opacity: 0.3;
}

/* Amikor aktív lesz, animáltan “felgyullad” */
.kp-led.active {
    animation: kpLightUp 0.25s forwards;
}

@keyframes kpLightUp {
    0% {
        opacity: 0.3;
        transform: scale(0.7);
    }
    60% {
        opacity: 1;
        transform: scale(1.15);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Színek */
.kp-led.green {
    background-color: lawngreen;
}
.kp-led.orange {
    background-color: orange;
}
.kp-led.red {
    background-color: tomato;
}