*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(1, 8, 24, 0.9) 0 23rem, rgba(1, 11, 31, 0.74) 36rem, rgba(1, 10, 26, 0.2) 59rem, transparent 78rem),
        linear-gradient(90deg, rgba(1, 8, 24, 0.03) 0%, rgba(2, 24, 64, 0.22) 20%, rgba(1, 8, 24, 0.72) 43%, rgba(1, 8, 24, 0.8) 50%, rgba(1, 8, 24, 0.72) 57%, rgba(2, 24, 64, 0.22) 80%, rgba(1, 8, 24, 0.03) 100%),
        radial-gradient(circle at 6% 18%, rgba(47, 247, 255, 0.36), rgba(18, 109, 255, 0.18) 15rem, transparent 35rem),
        radial-gradient(circle at 94% 20%, rgba(47, 247, 255, 0.35), rgba(18, 109, 255, 0.18) 16rem, transparent 37rem),
        linear-gradient(180deg, rgba(1, 7, 22, 0.14), rgba(1, 11, 31, 0.54)),
        url("../assets/backgrounds/meteosignal-lightning-bg.webp"),
        linear-gradient(140deg, #010716 0%, #02163f 52%, #020c22 100%),
        var(--color-night-900);
    background-attachment: fixed;
    background-position: center, center, center, center, center, center top, center, center;
    background-size: cover, cover, cover, cover, cover, cover, cover, cover;
    color: var(--color-text);
    font-family: var(--font-main);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        radial-gradient(ellipse at 50% 42%, rgba(1, 8, 24, 0.62) 0 23rem, rgba(1, 11, 31, 0.48) 37rem, transparent 60rem),
        linear-gradient(90deg, rgba(47, 247, 255, 0.2), transparent 18%, transparent 82%, rgba(47, 247, 255, 0.2)),
        radial-gradient(circle at 5% 18%, rgba(149, 251, 255, 0.3), transparent 28rem),
        radial-gradient(circle at 95% 18%, rgba(149, 251, 255, 0.28), transparent 29rem),
        repeating-linear-gradient(102deg, transparent 0 5.6rem, rgba(149, 251, 255, 0.032) 5.64rem 5.72rem, transparent 5.82rem 10.8rem),
        linear-gradient(180deg, rgba(1, 8, 24, 0), rgba(1, 11, 31, 0.48));
    background-position: center;
    background-size: cover;
    opacity: 0.72;
    pointer-events: none;
}

body::after {
    position: fixed;
    inset: auto -18vw -42rem auto;
    z-index: -1;
    width: min(112rem, 118vw);
    height: 76rem;
    content: "";
    border: 1px solid rgba(47, 247, 255, 0.16);
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(47, 247, 255, 0.12), rgba(47, 247, 255, 0.05) 34%, transparent 68%),
        radial-gradient(ellipse at 44% 92%, rgba(18, 109, 255, 0.13), transparent 64%),
        conic-gradient(from 210deg at 50% 100%, transparent 0 33deg, rgba(47, 247, 255, 0.08) 34deg 35deg, transparent 36deg 72deg, rgba(36, 162, 255, 0.07) 73deg 74deg, transparent 75deg 360deg),
        linear-gradient(125deg, transparent 0 39%, rgba(149, 251, 255, 0.06) 40%, transparent 41% 54%, rgba(36, 162, 255, 0.05) 55%, transparent 56%),
        repeating-radial-gradient(ellipse at 50% 100%, transparent 0 5.2rem, rgba(149, 251, 255, 0.055) 5.28rem 5.4rem, transparent 5.56rem 10.5rem);
    box-shadow: 0 -2rem 8rem rgba(47, 247, 255, 0.06), inset 0 1.5rem 5rem rgba(47, 247, 255, 0.04);
    opacity: 0.62;
    pointer-events: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    box-shadow: var(--shadow-focus);
}

@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
}

.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 20;
    transform: translateY(-160%);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    color: var(--color-night-900);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-cyan-300);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}