header .brand .brand-mark-wrap {
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
}

.logo-secret-overlay {
  --splash-x: 50vw;
  --splash-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.logo-secret-wash {
  position: absolute;
  inset: 0;
  background: #0b49cc;
  opacity: 0;
  animation: logo-secret-wash 1050ms ease-in forwards;
}

.logo-secret-core {
  position: absolute;
  left: var(--splash-x);
  top: var(--splash-y);
  width: 14vmax;
  height: 14vmax;
  border-radius: 48% 52% 43% 57%;
  background: radial-gradient(circle at 35% 36%, #bceeff 0%, #52aeff 34%, #1767ed 71%, #07369a 100%);
  box-shadow: 0 0 90px 30px #158aff88;
  transform: translate(-50%, -50%) scale(.02);
  animation: logo-secret-core 1000ms cubic-bezier(.16, .77, .26, 1) forwards;
}

.logo-secret-drop {
  position: absolute;
  left: var(--splash-x);
  top: var(--splash-y);
  width: var(--size);
  height: var(--size);
  border-radius: 48% 52% 64% 36% / 58% 43% 57% 42%;
  background: linear-gradient(145deg, #b9eaff, #328cff 58%, #0f51cc);
  box-shadow: 0 0 18px #53a8ff88;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  animation: logo-secret-drop 840ms cubic-bezier(.15, .72, .25, 1) var(--delay) forwards;
}

.logo-secret-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  color: #fff;
  font: 700 clamp(14px, 2vw, 22px)/1.3 "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-align: center;
  text-shadow: 0 2px 16px #062357;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -30%);
  animation: logo-secret-label 420ms ease 610ms forwards;
}

@keyframes logo-secret-core {
  0% { transform: translate(-50%, -50%) scale(.02) rotate(0); }
  35% { transform: translate(-50%, -50%) scale(1.3) rotate(12deg); }
  100% { transform: translate(-50%, -50%) scale(24) rotate(28deg); }
}

@keyframes logo-secret-drop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  12% { opacity: 1; }
  100% { opacity: .85; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.55); }
}

@keyframes logo-secret-wash {
  0%, 55% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes logo-secret-label {
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-secret-core, .logo-secret-drop, .logo-secret-label { animation: none; }
  .logo-secret-wash { animation: none; opacity: 1; }
}