:root {
    --bg-color: #050b15;
    --hex-dark: #121822;
    /* Fallback */
    /* Return to darker mood */
    --hex-border: rgba(255, 255, 255, 0.1);
    /* Tightened layout spacing for cluster effect */
    --hex-w: 28vmin;
    /* Increased from 22vmin */
    --hex-h: 30vmin;
    /* Increased from 24vmin */
    --gap-x: 28.5vmin;
    /* Increased from 22.5vmin */
    /* Increased for small gap (beshi nah) */
    --gap-y: 24vmin;
    /* Increased from 19vmin */
    /* Increased for small vertical gap */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at center, #1a2a44 0%, #050b15 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: white;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered Hexagon Grid */
.hexagon-grid {
    position: relative;
    width: 100vmin;
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* Behind loop */
}

.hexagon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hex-w);
    height: var(--hex-h);
    /* 3D Surface: Linear Gradient + Inner Shadow via Box-Shadow won't work with clip-path, so we use background */
    background: linear-gradient(135deg, #2a3b55 0%, #121822 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    /* Fake border using inset box-shadow won't work on clip-path elements directly, 
       but we can use a drop-shadow filter on the parent or this element for depth */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));

    /* Center each hexagon on its own origin first */
    transform: translate(-50%, -50%);
}

.hexagon:hover {
    filter: brightness(1.6);
    z-index: 20;
}

/* Specific Positions (Center relative 3-2-3 Grid) */
/* Using translate(-50%, -50%) to center and then adding offsets */

.hex-1 {
    transform: translate(calc(-50% - var(--gap-x)), calc(-50% - var(--gap-y)));
}

.hex-2 {
    transform: translate(-50%, calc(-50% - var(--gap-y)));
}

.hex-3 {
    transform: translate(calc(-50% + var(--gap-x)), calc(-50% - var(--gap-y)));
}

.hex-4 {
    transform: translate(calc(-50% - 1.5 * var(--gap-x)), -50%);
}

.hex-5 {
    transform: translate(calc(-50% + 1.5 * var(--gap-x)), -50%);
}

.hex-6 {
    transform: translate(calc(-50% - var(--gap-x)), calc(-50% + var(--gap-y)));
}

.hex-7 {
    transform: translate(-50%, calc(-50% + var(--gap-y)));
}

.hex-8 {
    transform: translate(calc(-50% + var(--gap-x)), calc(-50% + var(--gap-y)));
}

/* Adding Hover Scaling separately to not override grid translation */
.hexagon:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.hex-1:hover {
    transform: translate(calc(-50% - var(--gap-x)), calc(-50% - var(--gap-y))) scale(1.1);
}

.hex-2:hover {
    transform: translate(-50%, calc(-50% - var(--gap-y))) scale(1.1);
}

.hex-3:hover {
    transform: translate(calc(-50% + var(--gap-x)), calc(-50% - var(--gap-y))) scale(1.1);
}

.hex-4:hover {
    transform: translate(calc(-50% - 1.5 * var(--gap-x)), -50%) scale(1.1);
}

.hex-5:hover {
    transform: translate(calc(-50% + 1.5 * var(--gap-x)), -50%) scale(1.1);
}

.hex-6:hover {
    transform: translate(calc(-50% - var(--gap-x)), calc(-50% + var(--gap-y))) scale(1.1);
}

.hex-7:hover {
    transform: translate(-50%, calc(-50% + var(--gap-y))) scale(1.1);
}

.hex-8:hover {
    transform: translate(calc(-50% + var(--gap-x)), calc(-50% + var(--gap-y))) scale(1.1);
}

/* Center Logo Container */
.logo-container {
    position: absolute;
    z-index: 30;
    pointer-events: none;
}

.logo-container .hexagon {
    width: calc(var(--hex-w) * 1.5);
    height: calc(var(--hex-h) * 1.5);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Icon Styling */
.hex-icon {
    width: 60%;
    height: 60%;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 1vmin rgba(255, 255, 255, 0.2));
}

.hexagon:hover .hex-icon {
    transform: scale(1.2);
}

.tc-text {
    font-weight: 900;
    font-size: 3.5vmin;
    background: linear-gradient(135deg, #21d4fd 0%, #b721ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 1vmin rgba(183, 33, 255, 0.4));
}

.azure-icon {
    color: #0078d4;
}

.gitlab-icon {
    color: #fca121;
}

.sync-icon {
    color: #40c4ff;
}

.circle-icon {
    color: #a0a0a0;
    /* Grey icon as per image */
}

.helm-icon {
    color: #ffffff;
    filter: drop-shadow(0 0 0.8vmin rgba(255, 255, 255, 0.4));
}

.rocket-icon {
    color: #40c4ff;
    filter: drop-shadow(0 0 0.8vmin rgba(64, 196, 255, 0.4));
}

.infinity-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vmin;
    /* Increased for better visibility */
    height: 40vmin;
    /* Increased for better visibility */
    z-index: 100;
    /* Ensure loop is ALWAYS ON TOP of hexagons (even hovered ones) */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Allow clicks to pass through to hexagons */
}

.infinity-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The rail (track) - hidden */
.rail {
    display: none;
}

/* Continuous Infinity Path - Segments */
.infinity-segment {
    fill: none;
    stroke-width: 24;
    /* Slimmer look */
    stroke-linecap: butt;
    /* Straight gaps */
    stroke-dasharray: 0.124 0.876;
    /* Precise Segment Length */
    stroke-dashoffset: 0;
    animation: loopMove 24s linear infinite;
}

/* Hidden Paths used only to anchor markers */
.marker-anchor {
    fill: none;
    stroke: none;
    pointer-events: none;
}

/* Staggered Delays for 8 Segments.... */
.seg-1 {
    animation-delay: -24s;
}

.seg-2 {
    animation-delay: -21s;
}

.seg-3 {
    animation-delay: -18s;
}

.seg-4 {
    animation-delay: -15s;
}

.seg-5 {
    animation-delay: -12s;
}

.seg-6 {
    animation-delay: -9s;
}

.seg-7 {
    animation-delay: -6s;
}

.seg-8 {
    animation-delay: -3s;
}

@keyframes loopMove {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    :root {
        --hex-w: 22vmin;
        --hex-h: 25vmin;
        --gap-x: 24vmin;
        --gap-y: 20vmin;
    }

    .infinity-container {
        width: 45vmin;
        height: 23vmin;
    }
}