:root {
    --s: 100px;
    /* width of the hexagon */
    --g: 10px;
    /* uniform gap between hexagons */
    --h: calc(var(--s) * 1.1547);
    /* height = s * 2/sqrt(3) */
    --hex-bg: linear-gradient(135deg, #FFB800 0%, #E68A00 100%);
    --bg-color: #818181;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.honeycomb-container {
    padding: 40px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Grid is sized & positioned entirely by JS */
.honeycomb-grid {
    position: relative;
    perspective: 1200px;
}

/* ─── Staggered entrance animation ─── */
@keyframes hexEnter {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateZ(30deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.08) rotateZ(-3deg);
    }

    80% {
        transform: scale(0.97) rotateZ(1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateZ(0deg);
    }
}

/* ─── Hexagon cell ─── */
.hexagon-cell {
    position: absolute;
    width: var(--s);
    height: var(--h);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* entrance animation — "backwards" applies 0% keyframe before start,
       then reverts to normal state after, so hover transforms are not blocked */
    animation: hexEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.hexagon-cell:hover {
    transform: rotateY(180deg) scale(1.05);
    z-index: 10;
}

/* ─── Activated Halo Effect ─── */
@keyframes haloPulse {
    0% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 50px rgba(255, 255, 220, 1));
    }

    100% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.6));
    }
}

.hexagon-cell.activated {
    animation: haloPulse 2s infinite ease-in-out !important;
    z-index: 5;
}

.hexagon-cell.activated .hexagon-content {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
}

/* ─── Hexagon front face ─── */
.hexagon-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--hex-bg);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: box-shadow 0.4s ease;
}

/* ─── Hexagon back face ─── */
.hexagon-cell::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #cc7a00 0%, #a36200 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

/* ─── Hexagon back face with text content ─── */
.hexagon-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #cc7a00 0%, #a36200 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 1;
}

.hexagon-back .hex-label {
    opacity: 0;
    transition: opacity 0.3s ease 0.25s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle 3D Depth Shadow */
.hexagon-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
    transform: translateY(4px) translateX(2px);
    transition: transform 0.5s ease, opacity 0.4s ease;
}

.hexagon-cell:hover::before {
    opacity: 0;
}

/* ─── Hex labels ─── */
a.hexagon-cell {
    text-decoration: none;
    color: inherit;
}

.hex-label {
    font-size: calc(var(--s) * 0.35);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Counter-rotate label so text stays readable on flip */
.hexagon-cell:hover .hex-label {
    transform: rotateY(-180deg);
}

/* ─── Weather cell specifics ─── */

/* Remove the generic ::after back face — .hexagon-back handles it */
.weather-cell::after {
    display: none;
}

/* Smooth front-icon fade-out during flip */
.weather-cell .hexagon-content .hex-label {
    transition: opacity 0.3s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hide front icon on hover — don't counter-rotate */
.weather-cell:hover .hexagon-content .hex-label {
    opacity: 0;
    transform: none;
}

/* Scale + tilt 3D on flip (no filter — it breaks preserve-3d!) */
.weather-cell:hover {
    transform: rotateX(5deg) rotateY(180deg) scale(1.08);
}

/* Reveal back text on hover — override generic counter-rotation */
.weather-cell:hover .hexagon-back .hex-label {
    transform: none;
    opacity: 1;
}

.weather-back {
    font-size: calc(var(--s) * 0.18) !important;
}

/* Mobile tap-toggle support */
.weather-cell.flipped {
    transform: rotateX(5deg) rotateY(180deg) scale(1.08);
}

.weather-cell.flipped .hexagon-content .hex-label {
    opacity: 0;
}

.weather-cell.flipped .hexagon-back .hex-label {
    transform: none;
    opacity: 1;
}

/* ─── Tooltip (infobulle) ─── */
.hex-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 100;
}

.hexagon-cell:hover .hex-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ─── Global cursor-following tooltip ─── */
.cursor-tooltip {
    position: fixed;
    background: #fff;
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

.cursor-tooltip.visible {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — shrink hexagons on smaller screens
   JS recalculates positions when CSS vars change
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --s: 80px;
    }
}

@media (max-width: 500px) {
    :root {
        --s: 65px;
        --g: 7px;
    }

    .honeycomb-container {
        padding: 20px 10px;
    }
}

@media (max-width: 360px) {
    :root {
        --s: 55px;
        --g: 5px;
    }
}