.page {
  --header-control-size: clamp(58px, 14.5vw, 64px);
}

.home-header {
  z-index: 20;
}

.drawer-backdrop {
  background: rgba(0, 0, 0, 0.12);
}

.drawer {
  background:
    linear-gradient(
      180deg,
      rgba(5, 20, 17, 0.50) 0%,
      rgba(3, 15, 13, 0.42) 48%,
      rgba(2, 11, 10, 0.48) 100%
    );
  border-right: 1px solid rgba(128, 238, 203, 0.22);
  box-shadow:
    inset -1px 0 0 rgba(229, 255, 246, 0.03),
    14px 0 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px) saturate(1.12) brightness(0.96);
  -webkit-backdrop-filter: blur(4px) saturate(1.12) brightness(0.96);
}

.drawer-home {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  height: var(--header-control-size);
  max-width: calc(100% - 24px);
  padding: 0 4px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Burger keeps only the tactile scale response. The old luminous pressed asset stays dormant. */
.burger:is(:active, .is-pressed) .burger__asset--default {
  opacity: 1;
}

.burger:is(:active, .is-pressed) .burger__asset--pressed {
  opacity: 0;
}

.drawer-home__mark,
.drawer-home__wordmark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(35, 224, 171, 0.14));
}

.drawer-home__mark {
  width: clamp(34px, 8.5vw, 40px);
  height: auto;
}

.drawer-home__wordmark {
  width: clamp(92px, 24vw, 118px);
  height: auto;
}

.home-brand__mark,
.drawer-home__mark {
  transform-origin: center center;
  will-change: transform, filter;
}

.home-brand__mark.is-sigma-pulsing,
.drawer-home__mark.is-sigma-pulsing {
  animation: sigma-emerald-pulse 1000ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--sigma-pulse-delay, 0ms);
}

@keyframes sigma-emerald-pulse {
  0% {
    transform: scale(1);
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 7px rgba(20, 206, 157, 0.10));
  }

  10% {
    transform: scale(1.045);
    filter:
      brightness(1.55)
      saturate(1.20)
      drop-shadow(0 0 9px rgba(42, 255, 190, 0.56))
      drop-shadow(0 0 20px rgba(18, 232, 166, 0.32));
  }

  24% {
    transform: scale(1.12);
    filter:
      brightness(2.30)
      saturate(1.40)
      drop-shadow(0 0 12px rgba(79, 255, 205, 0.84))
      drop-shadow(0 0 28px rgba(19, 236, 168, 0.50))
      drop-shadow(0 0 48px rgba(10, 180, 129, 0.26));
  }

  46% {
    transform: scale(1.065);
    filter:
      brightness(1.82)
      saturate(1.28)
      drop-shadow(0 0 10px rgba(63, 255, 198, 0.68))
      drop-shadow(0 0 24px rgba(18, 224, 161, 0.36));
  }

  72% {
    transform: scale(1.018);
    filter:
      brightness(1.32)
      saturate(1.12)
      drop-shadow(0 0 8px rgba(43, 235, 177, 0.34))
      drop-shadow(0 0 16px rgba(20, 195, 143, 0.20));
  }

  100% {
    transform: scale(1);
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 7px rgba(20, 206, 157, 0.10));
  }
}

.drawer-home:active {
  transform: scale(0.985);
}

.drawer-home:focus-visible {
  outline: 2px solid rgba(235, 247, 241, 0.88);
  outline-offset: 3px;
  border-radius: 10px;
}

.page.is-drawer-open .home-brand,
.page.is-drawer-open .home-header__rail,
.page.is-drawer-open .home-header__balance {
  opacity: 0;
  visibility: hidden;
}

.page.is-drawer-open .drawer {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-control-size) + 30px);
}

@media (min-width: 720px) {
  .page {
    --header-control-size: 66px;
  }

  .drawer-home {
    left: calc(env(safe-area-inset-left, 0px) + 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand__mark.is-sigma-pulsing,
  .drawer-home__mark.is-sigma-pulsing {
    animation-name: sigma-emerald-pulse-reduced;
    animation-duration: 180ms;
  }

  @keyframes sigma-emerald-pulse-reduced {
    0%, 100% {
      transform: none;
      filter: brightness(1) drop-shadow(0 0 7px rgba(20, 206, 157, 0.10));
    }

    50% {
      transform: none;
      filter:
        brightness(1.55)
        drop-shadow(0 0 10px rgba(74, 255, 203, 0.58));
    }
  }
}