#checkbox {
    display: none;
}

.toggle {
    position: relative;
    width: 28px;
    /* уменьшено */
    height: calc(4px * 3 + 8px * 2);
    /* чуть ниже, более компактно */
    cursor: pointer;
    display: block;
    margin-left: 1rem;
    /* прижато к левому краю */
}

.bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    /* тоньше линии */
    border-radius: 2px;
    background: #7b52b9;
    transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
}


/* Анимация */

.bar--top {
    bottom: calc(50% + 8px + 3px / 2);
    transition-property: bottom, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}

.bar--middle {
    top: calc(50% - 3px / 2);
    transition-property: opacity;
    transition-delay: calc(0s + 0.35s);
}

.bar--bottom {
    top: calc(50% + 8px + 3px / 2);
    transition-property: top, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}


/* Checked */

#checkbox:checked+.toggle .bar--top {
    bottom: calc(50% - 3px / 2);
    transform: rotate(135deg);
    transition-delay: 0s, calc(0s + 0.35s);
}

#checkbox:checked+.toggle .bar--middle {
    opacity: 0;
    transition-duration: 0s;
    transition-delay: calc(0s + 0.35s);
}

#checkbox:checked+.toggle .bar--bottom {
    top: calc(50% - 3px / 2);
    transform: rotate(225deg);
    transition-delay: 0s, calc(0s + 0.35s);
}

/* Размытие для контента */
.blur-content {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}

/* Размытие для header (не через backdrop, а просто как контент) */
.blur-header {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}


/* Video header */

.hero-video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}