body.home::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../images/hex_border.svg") no-repeat 50% 50% / cover;
    z-index: -1;
    pointer-events: none;
    background-size: 50%;
}

/* ============================================
   ROTATING CONTAINER & SVG
   ============================================ */

:root {
    /* Animation Variables */
    --orbit-speed: 20s;
    --orbit-radius: 185px;
    --turtle-rotation: 90deg;
    --turtle-size: 80px;
    --inner-pulse-max: 1.1;
    --inner-pulse-min: 1.09;
    --outer-pulse-max: 1;
    --outer-pulse-min: 1.01;
}

.rotating-container {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    position: relative;
}

.rotating-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: rotate 20s linear infinite;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.content {
    position: relative;
    z-index: 10;
    padding: 20px;
    border-radius: 10px;
}

/* ============================================
   SVG ANIMATIONS
   ============================================ */

#inner-square {
    transform-origin: center;
    transform-box: fill-box;
    animation: pulse-inner 2s ease-in-out infinite;
}

#outer-circle {
    transform-origin: center;
    transform-box: fill-box;
    animation: pulse-outer 2s ease-in-out infinite;
}

@keyframes pulse-inner {
    0%, 100% {
        transform: scale(var(--inner-pulse-max));
    }
    50% {
        transform: scale(var(--inner-pulse-min));
    }
}

@keyframes pulse-outer {
    0%, 100% {
        transform: scale(var(--outer-pulse-max));
    }
    50% {
        transform: scale(var(--outer-pulse-min));
    }
}

/* ============================================
   TURTLE ORBIT ANIMATIONS
   ============================================ */

.turtle {
    position: absolute;
    width: var(--turtle-size);
    height: var(--turtle-size);
    left: 50%;
    top: 50%;
    margin-left: calc(var(--turtle-size) / -2);
    margin-top: calc(var(--turtle-size) / -2);
}

.turtle-1 {
    animation: orbit-1 var(--orbit-speed) linear infinite;
}

.turtle-2 {
    animation: orbit-2 var(--orbit-speed) linear infinite;
}

.turtle-3 {
    animation: orbit-3 var(--orbit-speed) linear infinite;
}

@keyframes orbit-1 {
    from {
        transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
    to {
        transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
}

@keyframes orbit-2 {
    from {
        transform: rotate(120deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
    to {
        transform: rotate(480deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
}

@keyframes orbit-3 {
    from {
        transform: rotate(240deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
    to {
        transform: rotate(600deg) translateX(var(--orbit-radius)) rotate(var(--turtle-rotation));
    }
}