/* Focal Point mobile menu (2026-11-11)
   Loaded last on every page that has the .mob-drawer menu.
   The drawer stays in the layout (visibility instead of display:none)
   so it can animate both opening and closing. */
@keyframes fpMenuShift{from{background-position:50% 0%;}to{background-position:50% 100%;}}

.mob-drawer{display:block!important;visibility:hidden;pointer-events:none;transition:visibility 0s linear .5s;}
.mob-drawer.open{visibility:visible;pointer-events:auto;transition:visibility 0s;}

.mob-overlay{background:rgba(6,2,14,.55)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;opacity:0;transition:opacity .4s ease;}
.mob-drawer.open .mob-overlay{opacity:1;}

.mob-panel{width:min(380px,88vw)!important;padding:26px 36px 36px!important;background:#0e0618!important;border-left:none!important;box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(100%)!important;transition:transform .5s cubic-bezier(.22,1,.36,1)!important;overflow-y:auto;}
.mob-drawer.open .mob-panel{transform:translateX(0)!important;}
/* gradient edge, same colors as the outline boxes */
.mob-panel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#5BAAB5,#9F217E,#5BAAB5,#9F217E);background-size:100% 300%;animation:fpMenuShift 6s ease-in-out infinite alternate;}
/* logo at the bottom of the panel */
.mob-panel::after{content:'';display:block;margin-top:auto;padding-top:40px;height:54px;width:130px;background:url(/img/logo-gradient.png) left bottom/contain no-repeat;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);}
.mob-drawer.open .mob-panel::after{opacity:1;transform:none;transition-delay:.35s;}

.mob-close{width:44px;height:44px;border-radius:50%;display:flex!important;align-items:center;justify-content:center;font-size:30px!important;line-height:1!important;color:#fff!important;margin:0 -10px 30px auto!important;padding:0!important;transition:transform .35s cubic-bezier(.22,1,.36,1),background .2s!important;}
.mob-close:hover,.mob-close:focus-visible{background:rgba(255,255,255,.08);transform:rotate(90deg);}
.mob-close:focus{outline:none;}
.mob-close:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}

.mob-link{width:fit-content!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-size:30px!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.15!important;color:#fff!important;padding:9px 0!important;border:none!important;background:none!important;text-decoration:none!important;opacity:0;transform:translateX(28px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)!important;}
.mob-drawer.open .mob-link{opacity:1;transform:none;}
.mob-drawer.open .mob-link:nth-of-type(1){transition-delay:.08s!important;}
.mob-drawer.open .mob-link:nth-of-type(2){transition-delay:.12s!important;}
.mob-drawer.open .mob-link:nth-of-type(3){transition-delay:.16s!important;}
.mob-drawer.open .mob-link:nth-of-type(4){transition-delay:.20s!important;}
.mob-drawer.open .mob-link:nth-of-type(5){transition-delay:.24s!important;}
.mob-drawer.open .mob-link:nth-of-type(6){transition-delay:.28s!important;}
.mob-drawer.open .mob-link:nth-of-type(7){transition-delay:.32s!important;}
.mob-drawer.open .mob-link:nth-of-type(8){transition-delay:.36s!important;}
.mob-drawer.open .mob-link:nth-of-type(9){transition-delay:.40s!important;}

/* current page and hover get the site gradient */
.mob-link.active,.mob-link:hover,.mob-link:focus-visible{background:linear-gradient(90deg,#6CC6D1 0%,#B98AC9 45%,#D63CA8 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;}
.mob-link:focus-visible{outline:2px solid var(--yellow,#EACC28);outline-offset:4px;border-radius:4px;}

.mob-cta{width:fit-content;margin-top:28px!important;background:var(--yellow,#EACC28)!important;color:#1a1018!important;border-radius:99px;padding:14px 28px!important;font-size:15px!important;font-weight:700!important;}

@media(prefers-reduced-motion:reduce){
  .mob-drawer,.mob-overlay,.mob-panel,.mob-link,.mob-close,.mob-panel::after{transition:none!important;}
  .mob-panel::before{animation:none;}
}
