.header input {
    display: none;
}

.header .grid>* {
    position: relative;
    left: -25%;
}

.header label {
    display: block;
    cursor: pointer;
    position: absolute;
    width: 10vw;
    height: 10vw;
    max-width: 150px;
    max-height: 150px;
    transform: translateY(-50%);
    overflow: hidden;
}
@media ( max-width: 600px ) {
    .header label {
        width: 20vw;
        height: 20vw;
    }
}
@media (min-aspect-ratio: 1/1) {
    .header label {
        width: 10vh;
        height: 10vh;
    }
}

.header .menu--1 label,
.header .menu--2 label {
    bottom: 0;
}

.header .menu--3 label,
.header .menu--4 label {
    top: 0;
}

.header .menu--1 label,
.header .menu--3 label {
    right: 0;
}

.header .menu--2 label,
.header .menu--4 label {
    left: 0;
    top:50%;
}

.header path {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    --length: 24;
    --offset: -38;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
    transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.header circle {
    fill: #fff3;
    opacity: 0;
}

.header label:hover circle {
    opacity: 1;
}

.header .cross input:checked+svg .line--1,
.header .cross input:checked+svg .line--3 {
    --length: 22.627416998;
}

.header .cross input:checked+svg .line--2 {
    --length: 0;
}

.header .back input:checked+svg .line--1,
.header .back input:checked+svg .line--3 {
    --length: 8.602325267;
}

.header .menu--1 {
    background-color: #3f77e9;
}

.header .menu--1 .line--1,
.header .menu--1 .line--3 {
    --total-length: 126.64183044433594;
}

.header .menu--1 .line--2 {
    --total-length: 70;
}

.header .menu--1 input:checked+svg .line--1,
.header .menu--1 input:checked+svg .line--3 {
    --offset: -94.1149185097;
}

.header .menu--1 input:checked+svg .line--2 {
    --offset: -50;
}

.header .menu--2 {
    height: 100%;
}

.header .menu--2 .line--1,
.header .menu--2 .line--3 {
    --total-length: 111.22813415527344;
    --offset: -50.22813415527344;
}

.header .menu--2 .line--2 {
    --total-length: 99;
}

.header .menu--2 input:checked+svg path {
    transform: translateX(30px);
}

.header .menu--2 input:checked+svg .line--1,
.header .menu--2 input:checked+svg .line--3 {
    --offset: -16.9705627485;
}

.header .menu--2 input:checked+svg .line--2 {
    --offset: -20;
}

.header .menu--3 {
    background-color: #00aef6;
}

.header .menu--3 .line--1,
.header .menu--3 .line--3 {
    --total-length: 126.38166809082031;
}

.header .menu--3 .line--2 {
    --total-length: 80;
}

.header .menu--3 input:checked+svg .line--1,
.header .menu--3 input:checked+svg .line--3 {
    --offset: -109.1770175568;
}

.header .menu--4 {
    background-color: #18bee5;
}

.header .menu--4 .line--1,
.header .menu--4 .line--3 {
    --total-length: 103.35061645507812;
    --offset: -42.35061645507812;
}

.header .menu--4 .line--2 {
    --total-length: 99;
}

.header .menu--4 input:checked+svg path {
    transform: translateX(31px);
}

.header .menu--4 input:checked+svg .line--1,
.header .menu--4 input:checked+svg .line--3 {
    --offset: -8.602325267;
}

.header .menu--4 input:checked+svg .line--2 {
    --offset: -7;
}

.header .debug {
    display: none;
}

.header .line--debug {
    opacity: 0;
    stroke-dasharray: none;
}

@media screen and (min-width: 800px) {
    .header .debug {
        opacity: 0.8;
        display: block;
        position: absolute;
        z-index: 1;
        font-family: sans-serif;
        transform: rotate(-45deg);
        transform-origin: 0% 100%;
        background: #000;
        color: #fff;
        width: 150px;
        height: 100px;
        line-height: 150px;
        text-align: center;
        user-select: none;
    }
    .header .debug:hover {
        opacity: 1;
    }
    .header .debug.active {
        background: #fff;
        color: #000;
    }

    .header .debug.active+.grid path.line--debug {
        opacity: .2;
    }
}