.menu-toggle, .menu-close, .chat-header .chat-close, .film-modal > button {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px; min-width: 46px;
  padding: 0; border: 1px solid transparent; border-radius: 50%;
  background: linear-gradient(135deg, #253947, #0e1d2b) padding-box,
    linear-gradient(135deg, #ebd39c, #86929d 45%, #d7e0e7 60%, #b99455) border-box;
  box-shadow: inset 0 1px #ffffff12, 0 4px 18px #0002;
  overflow: hidden; cursor: pointer;
  transition: transform .65s var(--ease), box-shadow .75s;
}
.menu-toggle { display: none; align-content: center; gap: 6px; }
.menu-toggle span { width: 17px; height: 1px; background: #eddbb5; transition: transform .6s var(--ease); }
.menu-toggle:hover span:first-child { transform: translateX(2px); }
.menu-toggle:hover span:last-child { transform: translateX(-2px); }
.menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-toggle::after, .menu-close::after, .chat-close::after, .film-modal > button::after,
.section-nav a::after, .film-open::after, .nav-contact::before, .motion-toggle::after {
  content: ''; position: absolute; inset: -100% -45%;
  background: linear-gradient(112deg, transparent 38%, #d8b76b25 46%, #edf3f65c 50%, #c7a26a20 55%, transparent 63%);
  pointer-events: none; transform: translateX(-95%);
  animation: bt-metal-pass 9s ease-in-out infinite;
}
.menu-toggle:hover, .menu-close:hover, .chat-header .chat-close:hover, .film-modal > button:hover {
  box-shadow: 0 0 0 5px #c6a66a09, 0 0 24px #d7c6a12b;
  transform: translateY(-2px);
}
.menu-close, .chat-header .chat-close, .film-modal > button { font-size: 0; }
.close-glyph { position: relative; display: block; width: 18px; height: 18px; transition: transform .7s var(--ease); }
.close-glyph::before, .close-glyph::after {
  content: ''; position: absolute; top: 8px; left: 0; width: 18px; height: 1.5px;
  border-radius: 2px; background: linear-gradient(90deg, #edcf8b, #f3f5f5, #d7b46a);
}
.close-glyph::before { transform: rotate(45deg); }
.close-glyph::after { transform: rotate(-45deg); }
button:hover > .close-glyph { transform: rotate(90deg); }
.film-modal > button { position: absolute; right: 4px; top: -54px; }
.mobile-menu {
  background: radial-gradient(ellipse at 100% 0, #d3b66b17, transparent 55%),
    radial-gradient(ellipse at 0 100%, #c1d2df10, transparent 50%), #0b1926f7;
}
.menu-head { margin-bottom: 20px; }
.menu-head > span { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; color: #dec590; }
.menu-head > span::before {
  content: ''; width: 40px; height: 40px; border-radius: 50%;
  background: #f4f2ec url('assets/logo-bt-3d.png') center / 85% no-repeat;
  box-shadow: 0 0 0 4px #c6a66a09;
}
.mobile-menu nav { width: min(100%, 580px); margin: 0 auto; gap: 10px; padding-bottom: 24px; }
.mobile-menu nav a {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 68px; padding: 17px 18px; gap: 16px;
  border: 1px solid #c6a66a26; border-radius: 16px;
  background: linear-gradient(115deg, #ffffff06, #ffffff02);
  box-shadow: inset 0 1px #ffffff05;
  font-size: clamp(19px, 5.5vw, 28px); letter-spacing: -.035em;
  transition: border-color .65s, background .8s, color .7s, box-shadow .8s;
}
.mobile-menu nav a::after {
  content: ''; position: absolute; inset: -80% -30%; z-index: -1;
  background: linear-gradient(110deg, transparent 40%, #d2ad6a12 46%, #dde8f21a 51%, transparent 60%);
  animation: bt-metal-pass 11s ease-in-out 1.5s infinite; pointer-events: none;
}
.mobile-menu nav a:nth-child(2)::after { animation-delay: 1.8s; }
.mobile-menu nav a:nth-child(3)::after { animation-delay: 2.1s; }
.mobile-menu nav a:nth-child(4)::after { animation-delay: 2.4s; }
.mobile-menu nav a:nth-child(5)::after { animation-delay: 2.7s; }
.mobile-menu nav small { width: 25px; font-size: 8px; color: #c3af83; }
.mobile-menu nav b {
  display: grid; place-items: center; flex: 0 0 32px; height: 32px;
  border: 1px solid #d3bb8635; border-radius: 50%; font-size: 17px;
  color: #e1cb9b; background: #c6a66a09; transition: transform .7s var(--ease);
}
.mobile-menu nav a:hover, .mobile-menu nav a.active {
  color: #f6e5c1; border-color: #dcc18a70;
  background: linear-gradient(115deg, #c6a66a12, #dae7ef08);
  box-shadow: inset 0 1px #eadbc316, 0 4px 22px #0001;
}
.mobile-menu nav a:hover b { transform: rotate(45deg); }
.mobile-menu > p { text-align: center; color: #b4a88c; font-size: 7px; letter-spacing: .19em; }
.section-nav a, .film-open, .nav-contact, .motion-toggle { position: relative; overflow: hidden; }
.section-nav a:nth-child(2)::after { animation-delay: .25s; }
.section-nav a:nth-child(3)::after { animation-delay: .5s; }
.section-nav a:nth-child(4)::after { animation-delay: .75s; }
.film-open, .motion-toggle, .nav-contact { border-radius: 30px; }
.button.gold::after {
  background: linear-gradient(110deg, transparent 38%, #e4bf7925 46%, #e9f0f438 51%, #d8b36718 55%, transparent 63%);
}
.section-passage {
  position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 15%, #c6a66a1a 43%, #e4edf41a 51%, transparent 78%), #06111a;
}
main section[tabindex='-1']:focus { outline: none; }
@keyframes bt-metal-pass {
  0%, 54% { transform: translateX(-95%); opacity: 0; }
  60% { opacity: 1; }
  83%, 100% { transform: translateX(95%); opacity: 0; }
}
@media (max-width: 700px) {
  .menu-toggle { display: grid; }
  .mobile-menu { padding: 26px 7% 23px; }
}
@media (max-height: 650px) {
  .mobile-menu { padding-top: 16px; padding-bottom: 14px; }
  .menu-head { margin-bottom: 10px; }
  .mobile-menu nav { gap: 7px; padding-bottom: 12px; }
  .mobile-menu nav a { min-height: 52px; padding-top: 11px; padding-bottom: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle::after, .menu-close::after, .chat-close::after, .film-modal > button::after,
  .section-nav a::after, .film-open::after, .nav-contact::before, .motion-toggle::after,
  .mobile-menu nav a::after { animation: none; opacity: 0; }
  button:hover > .close-glyph { transform: none; }
}