@font-face {
    font-family: "Stix";
    src: url("assets/fonts/STIXTwo.woff2");
}
@font-face {
    font-family: "Commissioner";
    src: url("assets/fonts/Commissioner.ttf");
}

@property --x {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 5%;
}

@property --y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 5%;
}

/* @keyframes bgCircles {
    0% {
        --x: calc(5% * 1.334 + 5% * 5% * 0.5325 + 0.235);
        --y: calc(95% * 1.334 + 95% * 95% * 0.5325 + 0.235);
    }
    20% {
        --x: calc(20% * 1.334 + 20% * 20% * 0.5325 + 0.235);
        --y: 80%;
    }
    40% {
        --x: calc(40% * 1.334 + 40% * 40% * 0.5325 + 0.235);
        --y: 60%;
    }
    60% {
        --x: 60%;
        --y: 40%;
    }
    80% {
        --x: 80%;
        --y: 20%;
    }
    100% {
        --x: 95%;
        --y: 95%;
    }
} */

/* Register custom properties for positions */
@property --pos-1 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-2 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-3 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-4 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-5 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-6 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-7 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-8 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-9 {
    syntax: "<percentage>+";
    inherits: false;
}
@property --pos-10 {
    syntax: "<percentage>+";
    inherits: false;
}

/* Animation keyframes for each gradient */
@keyframes move1 {
  0% {
    --pos-1: 50% 50%; /* Center start */
    --pos-2: 70% 30%;
  }
  8.33% {
    --pos-1: 30% 30%; /* Curve entry */
  }
  16.67% {
    --pos-1: 10% 30%; /* Approach top-left */
  }
  25% {
    --pos-1: -10% 50%; /* Top-left descent */
  }
  33.33% {
    --pos-1: 10% 70%;
  }
  41.67% {
    --pos-1: 30% 70%; /* Vertical drop */
  }
  50% {
    --pos-1: 50% 50%; /* Bottom-left approach */
  }
  58.33% {
    --pos-1: 70% 30%; /* Center return */
  }
  66.67% {
    --pos-1: 90% 30%; /* Center pass */
  }
  75% {
    --pos-1: 110% 50%; /* Bottom-right approach */
  }
  83.33% {
    --pos-1: 90% 70%; /* Top-right ascent */
  }
  91.67% {
    --pos-1: 70% 70%; /* Center end */
  }
  100% {
    --pos-1: 50% 50%;
  }
}

@keyframes move2 {
    0% {
        --pos-2: 10%;
    }
    100% {
        --pos-2: 90%;
    }
}

@keyframes move3 {
    0% {
        --pos-3: 20%;
    }
    100% {
        --pos-3: 80%;
    }
}

@keyframes move4 {
    0% {
        --pos-4: 30%;
    }
    100% {
        --pos-4: 70%;
    }
}

@keyframes move5 {
    0% {
        --pos-5: 40%;
    }
    100% {
        --pos-5: 60%;
    }
}

@keyframes move6 {
    0% {
        --pos-6: 60%;
    }
    100% {
        --pos-6: 40%;
    }
}

@keyframes move7 {
    0% {
        --pos-7: 70%;
    }
    100% {
        --pos-7: 30%;
    }
}

@keyframes move8 {
    0% {
        --pos-8: 80%;
    }
    100% {
        --pos-8: 20%;
    }
}

@keyframes move9 {
    0% {
        --pos-9: 90%;
    }
    100% {
        --pos-9: 10%;
    }
}

@keyframes move10 {
    0% {
        --pos-10: 0%;
    }
    100% {
        --pos-10: 100%;
    }
}

html {
    --x0: calc(var(--x) * 1.334 + var(--x) * var(--x) * 0.5325 + 0.235);
    --floor: calc(var(--x0) - 0.5);
    --xy: calc(var(--x0) - var(--floor));

    background-image:
        radial-gradient(circle at var(--pos-1), rgba(255, 107, 107, 0.5) 0%, transparent 40%),
        radial-gradient(circle, #4ecdc4 0%, transparent 20%);
        /* radial-gradient(
            circle at var(--pos-3) var(--pos-3),
            #45b7d1 0%,
            transparent 20%
        ),
        radial-gradient(circle at 70% var(--pos-4), #96ceb4 0%, transparent 20%),
        radial-gradient(circle at 20% var(--pos-6), #ff9999 0%, transparent 20%),
        radial-gradient(circle at var(--pos-5) 80%, #ffeead 0%, transparent 20%),
        radial-gradient(circle at var(--pos-7) 60%, #d4a5a5 0%, transparent 20%),
        radial-gradient(circle at 90% var(--pos-8), #79b9c6 0%, transparent 20%),
        radial-gradient(circle at var(--pos-9) 10%, #c94c4c 0%, transparent 20%),
        radial-gradient(circle at 40% var(--pos-10), #034f84 0%, transparent 20%); */
    background-color: #0c0c0c;
    /* background-position:
            10% 50%,
            10% 30%; */
    background-origin: border-box;
    animation:
        30s cubic-bezier(0.4, 0.3, 0.6, 0.7) infinite move1,
        15s cubic-bezier(0.4, 0.2, 0.6, 0.8) infinite move2,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move3,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move4,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move5,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move6,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move7,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move8,
        15s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move9,
        18s cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate move10;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Commissioner", sans-serif;
    font-variation-settings:
        "wght" 300,
        "FLAR" 100,
        "VOLM" 100;
    font-size: 20px;
    line-height: 28px;
    color: #111;
}
nav ul {
    display: flex;
    list-style: none;
    justify-content: flex-end;
    gap: 1rem;

    img {
        height: 2rem;
    }
}
h1 {
    font-size: 2.5rem;
    font-family: "Stix", sans-serif;
    font-variation-settings: "wght" 700;
}
p {
    max-width: 70ch;
    margin: 0 0 1.25rem 0;

    a {
        color: #d29bff;
    }
}
footer {
    font-size: 14px;
    opacity: 0.8;
    margin: 1rem 0 0.5rem 0;
}
@media (prefers-color-scheme: dark) {
    body {
        color: #f3f3f3;
    }
    nav ul img:not([src*="bluesky"]) {
        filter: invert(1);
    }
}
@media (max-width: 768px) {
    body {
        font-size: 22px;
        line-height: 28px;
        padding: 0 0.5rem;
    }
}