/* WASIAT4D2 wasiat4d2-lp-jjk-stable-2.0.1 — stable, low-cost Jujutsu-themed interactions.
   Keep page/body position untouched. Animations use transform/opacity only. */
:root {
  --jjk-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --jjk-motion-fast: 180ms;
  --jjk-ice: #88cfff;
  --jjk-amber: #ead48b;
}

/* Eliminate the legacy offcanvas menu conflict without changing desktop nav. */
@media (max-width: 1199px) {
  .navbar-no-shadow .nav-menu-wrapper.jjk-navigation {
    display: none !important;
  }
}

/* Overlay is a sibling of the header, not a descendant of Webflow's sticky nav. */
.jjk-drawer-backdrop {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 1798;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(1, 7, 18, .67);
  touch-action: none;
  transition: opacity 210ms ease, visibility 0s linear 210ms;
}
.jjk-drawer-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 210ms ease, visibility 0s linear 0s;
}
.jjk-mobile-drawer {
  --jjk-drawer-gutter: clamp(18px, 5vw, 26px);
  --jjk-drawer-surface: #071c31;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1800;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(129, 194, 243, .42);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  isolation: isolate;
  color: #f5f9ff;
  background: var(--jjk-drawer-surface);
  box-shadow: -16px 0 48px rgba(0, 5, 15, .56);
  transform: translate3d(105%, 0, 0);
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: transform 255ms var(--jjk-motion-ease), visibility 0s linear 255ms;
  will-change: auto;
}
/* No top highlight: header and panel use exactly the same surface color. */
.jjk-mobile-drawer::before { content: none; display: none; }
.jjk-mobile-drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  will-change: transform;
  transition: transform 255ms var(--jjk-motion-ease), visibility 0s linear 0s;
}
.jjk-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  flex: 0 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--jjk-drawer-gutter) 13px;
  border-bottom: 1px solid rgba(175, 212, 240, .18);
  background: var(--jjk-drawer-surface);
}
.jjk-mobile-drawer__logo { display: block; max-width: min(169px, 65%); width: 169px; height: auto; object-fit: contain; }
.jjk-mobile-drawer__close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(170, 214, 244, .33);
  border-radius: 9px;
  padding: 0;
  background: rgba(154, 205, 247, .065);
  color: #e8f5ff;
  cursor: pointer;
  transition: background-color var(--jjk-motion-fast), border-color var(--jjk-motion-fast), color var(--jjk-motion-fast);
}
.jjk-mobile-drawer__close:hover,
.jjk-mobile-drawer__close:focus-visible {
  background: rgba(119, 181, 236, .17);
  border-color: var(--jjk-ice);
  color: #fff;
}
.jjk-mobile-drawer__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 190, 239, .44) transparent;
  padding: clamp(20px, 4.5vh, 35px) var(--jjk-drawer-gutter) calc(26px + env(safe-area-inset-bottom, 0px));
}
.jjk-mobile-drawer__eyebrow {
  color: #9fb8cf;
  font: 800 10px/1.5 'Noto Sans', sans-serif;
  letter-spacing: .19em;
  margin: 0 0 17px;
}
.jjk-mobile-drawer__eyebrow span { color: var(--jjk-amber); padding-inline: 5px; }
.jjk-mobile-drawer__links { display: flex; flex-direction: column; margin: 0; padding: 0; }
.jjk-mobile-drawer__links a {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0,1fr) 20px;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 9px 11px;
  color: #edf6ff;
  background: transparent;
  border-bottom: 1px solid rgba(168, 204, 235, .14);
  border-left: 2px solid transparent;
  border-radius: 3px;
  font: 700 clamp(14px, 4vw, 16px)/1.35 'Noto Sans', sans-serif;
  text-decoration: none;
  transition: border-color var(--jjk-motion-fast), color var(--jjk-motion-fast), background-color var(--jjk-motion-fast);
}

.jjk-mobile-drawer__arrow { color: #c4dfed; justify-self: end; font-size: 17px; line-height: 1; }
.jjk-mobile-drawer__links a:hover,
.jjk-mobile-drawer__links a:focus-visible,
.jjk-mobile-drawer__links a.is-current {
  color: #fff;
  border-left-color: var(--jjk-amber);
  background: rgba(80, 151, 207, .13);
}
.jjk-mobile-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: clamp(22px, 4.5vh, 38px) 0 0;
  padding: 13px 17px;
  border-radius: 7px;
  border: 1px solid #f3df9f;
  color: #0a1b2d;
  background: #e5d08b;
  text-decoration: none;
  font: 800 13px/1.4 'Noto Sans', sans-serif;
  letter-spacing: .03em;
  transition: background-color var(--jjk-motion-fast), border-color var(--jjk-motion-fast);
}
.jjk-mobile-drawer__cta:hover, .jjk-mobile-drawer__cta:focus-visible { background: #f6e3aa; border-color: #f9e8b7; }
.jjk-mobile-drawer__cta span { font-size: 19px; }
.jjk-mobile-drawer__foot {
  margin: 24px 0 0;
  color: #a4bfd1;
  font: 600 10.5px/1.7 'Noto Sans', sans-serif;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (max-width: 359px) {
  .jjk-mobile-drawer { width: calc(100vw - 20px); max-width: calc(100vw - 20px); --jjk-drawer-gutter: 16px; }
  .jjk-mobile-drawer__head { min-height: 68px; }
  .jjk-mobile-drawer__logo { width: 148px; }
  .jjk-mobile-drawer__links a { min-height: 51px; padding: 7px 10px; font-size: 13px; gap: 9px; }
  .jjk-mobile-drawer__eyebrow { margin-bottom: 9px; }
}
@media (max-height: 480px) and (max-width: 1199px) {
  .jjk-mobile-drawer__head { padding-top: calc(7px + env(safe-area-inset-top, 0px)); padding-bottom: 7px; min-height: 57px; }
  .jjk-mobile-drawer__content { padding-top: 12px; }
  .jjk-mobile-drawer__links a { min-height: 43px; padding-block: 6px; }
  .jjk-mobile-drawer__cta { margin-top: 15px; }
}
@media (min-width: 1200px) {
  .jjk-mobile-drawer, .jjk-drawer-backdrop { display: none !important; }
}

/* The underlying page never switches to position:fixed or gets a transform.
   We enhance controls rather than continuously animating the whole page. */
.navbar-no-shadow { border-bottom-color: rgba(115,188,245,.25) !important; }
.navbar-no-shadow::after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, rgba(73,174,247,.42) 40%, rgba(233,210,138,.52) 72%, transparent 95%);
}
.buy-tickets.nav {
  transition: background-color var(--jjk-motion-fast) ease, border-color var(--jjk-motion-fast) ease, box-shadow var(--jjk-motion-fast) ease !important;
}
.buy-tickets.nav:hover, .buy-tickets.nav:focus-visible {
  box-shadow: 0 0 0 1px rgba(237,216,150,.28), 0 5px 17px rgba(0,17,37,.24);
}
.jjk-service-row, .jjk-highlight, .jjk-faq-item {
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.jjk-service-row:hover, .jjk-service-row:focus-within,
.jjk-highlight:hover, .jjk-highlight:focus-within {
  border-color: rgba(119,202,251,.5) !important;
  box-shadow: inset 2px 0 0 rgba(237,211,139,.62);
}
.jjk-faq-item:hover, .jjk-faq-item:focus-within { border-color: rgba(118,199,248,.48); }
.jjk-faq-toggle .accordion-header { transition: color 170ms ease; }
.jjk-faq-toggle:hover .accordion-header, .jjk-faq-toggle:focus-visible .accordion-header { color: #c4e9ff; }
.jjk-hero-secondary { transition: color 160ms ease; text-underline-offset: 4px; }
.jjk-hero-secondary:hover, .jjk-hero-secondary:focus-visible { color: #edd58c; }
.footer .footer-link { transition: color 150ms ease; }
.footer .footer-link:hover, .footer .footer-link:focus-visible { color: #e9d58e; }
/* Keep keyboard feedback clearly visible on midnight blue. */
.jjk-mobile-drawer :focus-visible, .jjk-nav-toggle:focus-visible { outline: 2px solid #f0dd9d !important; outline-offset: 3px !important; }

@media (hover: none) {
  .jjk-service-row:hover, .jjk-highlight:hover { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jjk-mobile-drawer, .jjk-drawer-backdrop, .jjk-mobile-drawer *,
  .buy-tickets.nav, .jjk-service-row, .jjk-highlight, .jjk-faq-item,
  .jjk-hero-secondary, .footer .footer-link { animation: none !important; transition: none !important; }
}

/* Brief, non-looping FAQ disclosure animation. No transforms on text. */
@keyframes jjk-faq-appear { from { opacity: .12; } to { opacity: 1; } }
.jjk-faq-item.is-expanded .jjk-faq-answer:not([hidden]) {
  animation: jjk-faq-appear 175ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .jjk-faq-item.is-expanded .jjk-faq-answer:not([hidden]) { animation: none !important; }
}