@property --r { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.hexagon-upright { --r: 0.25; --a: 30deg; }
.hexagon-flat { --r: 0.25; --a: 0deg; }

.hexagon {
    width: 280px;
    aspect-ratio: 1;
    --_a: (30deg*var(--r));
    --_r: (50%*cos(30deg)/cos((30deg*(1 - var(--r)))));
    /* cursor: pointer; */
    transition: --r .2s,--a .2s;
    
    /* Hexagon path with rounded corners */
    clip-path: 
        shape(from calc(50% + var(--_r)*cos(var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(var(--a))) 
            calc(50% + 50%*sin(var(--a))), 
        line to calc(50% + var(--_r)*cos(60deg + var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(60deg + var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(60deg + var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(60deg + var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(60deg + var(--a))) 
            calc(50% + 50%*sin(60deg + var(--a))), 
        line to calc(50% + var(--_r)*cos(120deg + var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(120deg + var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(120deg + var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(120deg + var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(120deg + var(--a))) 
            calc(50% + 50%*sin(120deg + var(--a))), 
        line to calc(50% + var(--_r)*cos(180deg + var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(180deg + var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(180deg + var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(180deg + var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(180deg + var(--a))) 
            calc(50% + 50%*sin(180deg + var(--a))), 
        line to calc(50% + var(--_r)*cos(240deg + var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(240deg + var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(240deg + var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(240deg + var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(240deg + var(--a))) 
            calc(50% + 50%*sin(240deg + var(--a))), 
        line to calc(50% + var(--_r)*cos(300deg + var(--a) - var(--_a))) 
                calc(50% + var(--_r)*sin(300deg + var(--a) - var(--_a))), 
        curve to calc(50% + var(--_r)*cos(300deg + var(--a) + var(--_a))) 
                calc(50% + var(--_r)*sin(300deg + var(--a) + var(--_a))) 
        with calc(50% + 50%*cos(300deg + var(--a))) 
            calc(50% + 50%*sin(300deg + var(--a))));
}

.hexagon-rotate:hover { --r: .4; --a: 0deg; }
/* .hexagon-rotate + .hexagon-rotate:hover { --a: 60deg; } */

/* .hexagon-float{
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25%      { transform: translateY(-4px) translateX(4px); }
  50%      { transform: translateY(-8px) translateX(0px); }
  75%      { transform: translateY(-4px) translateX(-4px); }
} */