/* Explain: Styles for the hexagonal tile background effect with wavy movement. */
.hex-backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: clamp(0.75rem, 3vw, 2.5rem);
    padding: clamp(0.75rem, 3vw, 2.5rem);
    place-items: center;
    align-content: space-evenly;
    overflow: hidden;
    pointer-events: none;
    perspective: 1400px;
    perspective-origin: 50% 42%;
}

@media (min-width: 640px) {
    .hex-backdrop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hex-backdrop {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hex-tile {
    position: relative;
    width: min(100%, 15rem);
    aspect-ratio: 1 / 1.1547;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0)
        rotateX(var(--hex-rx, 44deg))
        rotateY(var(--hex-ry, -20deg))
        rotateZ(var(--hex-rz, 0deg));
    animation: hex-float var(--hex-duration, 20s) ease-in-out infinite;
}

/* staggered offsets turn the loop into a travelling wave across the grid */
.hex-tile:nth-child(4n + bly1) {
    animation-delay: 0s;
}

.hex-tile:nth-child(4n + 2) {
    animation-delay: -2.4s;
}

.hex-tile:nth-child(4n + 3) {
    animation-delay: -4.8s;
}

.hex-tile:nth-child(4n + 4) {
    animation-delay: -7.2s;
}

/* extruded solid body behind the glossy face -> real 3D thickness */
.hex-tile::before,
.hex-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* back plate, offset far in Z so the tile shows visible thickness */
.hex-tile::before {
    transform: translateZ(-64px);
    background:
        linear-gradient(160deg, #202b39 0%, #05070a 54%, #101822 100%);
}

/* glossy black face with specular gloss + blue rim light */
.hex-tile::after {
    transform: translateZ(0);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.10) 22%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(200deg, rgba(30, 136, 229, 0.34) 0%, rgba(30, 136, 229, 0) 52%),
        linear-gradient(180deg, #39485a 0%, #0c1219 56%, #1c2734 100%);
    box-shadow:
        inset 0 0 0 1px rgba(150, 195, 255, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.58),
        inset 0 0 64px rgba(0, 0, 0, 0.55);
}

@keyframes hex-float {
    0% {
        transform: translate3d(0, -1.2rem, 0)
            rotateX(var(--hex-rx, 44deg))
            rotateY(var(--hex-ry, -20deg))
            rotateZ(calc(var(--hex-rz, 0deg) - 4deg));
    }
    25% {
        transform: translate3d(1.1rem, 0, 0)
            rotateX(calc(var(--hex-rx, 44deg) + 5deg))
            rotateY(calc(var(--hex-ry, -20deg) + 7deg))
            rotateZ(calc(var(--hex-rz, 0deg) + 5deg));
    }
    50% {
        transform: translate3d(0, 1.2rem, 0)
            rotateX(var(--hex-rx, 44deg))
            rotateY(var(--hex-ry, -20deg))
            rotateZ(calc(var(--hex-rz, 0deg) - 4deg));
    }
    75% {
        transform: translate3d(-1.1rem, 0, 0)
            rotateX(calc(var(--hex-rx, 44deg) - 5deg))
            rotateY(calc(var(--hex-ry, -20deg) - 7deg))
            rotateZ(calc(var(--hex-rz, 0deg) + 5deg));
    }
    100% {
        transform: translate3d(0, -1.2rem, 0)
            rotateX(var(--hex-rx, 44deg))
            rotateY(var(--hex-ry, -20deg))
            rotateZ(calc(var(--hex-rz, 0deg) - 4deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hex-tile {
        animation: none;
    }
}