/* Nubonium site effects: Asmodian gothic (black, antique gold, blood crimson).
   Menu overlay with glass panels, Aether motes, cursor embers, feather bursts, Abyss rift transitions. */
:root{--nb-gold:#e8c872;--nb-gold2:#b08d45;--nb-crim:#c43a43;--nb-blood:#7d1820;--nb-ink:#0a0709;--nb-ivory:#ece2c6;--nb-muted:#a99a86;
  --nb-glass:rgba(20,12,14,.58);--nb-glass-edge:rgba(232,200,114,.28);--nb-spring:cubic-bezier(.34,1.56,.64,1);--nb-out:cubic-bezier(.16,1,.3,1)}

/* ---- ambient canvases ---- */
#nbMotes{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.6;mix-blend-mode:screen}
#nbSparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998}

/* ---- menu button (hamburger that becomes a cross) ---- */
.nb-burger{position:relative;width:42px;height:42px;border:1px solid var(--nb-glass-edge);background:rgba(20,12,14,.6);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .25s var(--nb-out);z-index:1002}
.nb-burger:hover{border-color:var(--nb-crim)}
.nb-burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--nb-gold);transition:transform .45s var(--nb-out),opacity .25s,top .45s var(--nb-out)}
.nb-burger i:nth-child(1){top:14px}.nb-burger i:nth-child(2){top:20px;left:15px}.nb-burger i:nth-child(3){top:26px}
.nb-burger:hover i:nth-child(2){left:11px}
html.nbm-open .nb-burger i:nth-child(1){top:20px;transform:rotate(45deg)}
html.nbm-open .nb-burger i:nth-child(2){opacity:0;transform:scaleX(0)}
html.nbm-open .nb-burger i:nth-child(3){top:20px;transform:rotate(-45deg)}
.nb-burger .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- the overlay ---- */
.nbm{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none;perspective:1200px;overflow:hidden}
html.nbm-open .nbm{visibility:visible;pointer-events:auto}
.nbm-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(125,24,32,.35),rgba(6,4,5,.94) 70%),rgba(6,4,5,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease}
html.nbm-open .nbm-bg{opacity:1}
.nbm-fx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.nbm-fx video,.nbm-fx img{position:absolute;mix-blend-mode:screen;pointer-events:none}
.nbm-circle-wrap{position:absolute;width:min(92vh,92vw);aspect-ratio:1;display:grid;place-items:center;opacity:0;transform:scale(.25) rotate(-120deg);transition:transform 1.1s var(--nb-out),opacity .6s ease;
  -webkit-mask:radial-gradient(circle,#000 40%,transparent 60%);mask:radial-gradient(circle,#000 40%,transparent 60%)}
.nbm-circle-wrap video,.nbm-circle-wrap img{height:100%;width:auto;max-width:none;position:static}
html.nbm-open .nbm-circle-wrap{opacity:.55;transform:scale(1) rotate(0)}
.nbm-circle-spin{width:100%;height:100%;display:grid;place-items:center;animation:nbSpin 90s linear infinite}
.nbm-wings{width:min(120vw,1500px);opacity:0;transform:translateY(-4%) scale(.9);transition:opacity .5s ease .15s,transform 1.4s var(--nb-out) .15s}
html.nbm-open .nbm-wings{opacity:.7;transform:translateY(-4%) scale(1)}
.nbm-flare{position:absolute;width:40vmin;height:40vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,170,120,.55),rgba(196,58,67,.25) 35%,transparent 70%);mix-blend-mode:screen;opacity:0;transform:scale(.2)}
html.nbm-open .nbm-flare{animation:nbFlare 1.1s var(--nb-out) .1s both}
@keyframes nbFlare{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.8)}}
@keyframes nbSpin{to{transform:rotate(360deg)}}

/* glass panels */
.nb-glass{background:var(--nb-glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--nb-glass-edge);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 0 60px rgba(196,58,67,.10);position:relative}
.nb-glass::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(232,200,114,.10),transparent 30%,transparent 70%,rgba(196,58,67,.10))}
.nbm-stage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:1fr auto;gap:22px;padding:96px max(28px,6vw) 40px;align-items:center;transform-style:preserve-3d}
.nbm-panel{opacity:0;transition:transform .8s var(--nb-spring),opacity .4s ease,clip-path .9s var(--nb-out);will-change:transform}
.nbm-nav{grid-row:1/3;align-self:center;padding:34px 38px 30px;transform:translate3d(-120px,60px,0) rotate(-4deg) scale(.9);transition-delay:.18s}
.nbm-prev{padding:16px;transform:translate3d(140px,-50px,0) rotate(5deg) scale(.92);clip-path:polygon(0 0,0 0,0 100%,0 100%);transition-delay:.32s}
.nbm-acct{padding:18px 20px;transform:scale(.55);transition-delay:.46s;align-self:end}
html.nbm-open .nbm-panel{opacity:1;transform:translate3d(0,0,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1)}
html.nbm-open .nbm-prev{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
html:not(.nbm-open) .nbm-panel{transition-delay:0s;transition-duration:.3s}
.nbm-nav small,.nbm-acct small{display:block;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--nb-crim);margin-bottom:10px}
.nbm-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nbm-link{display:block;text-decoration:none;color:var(--nb-ivory);padding:6px 0;font-family:Cinzel,'Trajan Pro',Georgia,serif;font-weight:700;font-size:clamp(30px,4.6vw,62px);line-height:1.05;letter-spacing:.01em}
.nbm-link .nbm-sub{display:block;font:500 13px Inter,system-ui,sans-serif;letter-spacing:.04em;color:var(--nb-muted);margin-top:4px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--nb-out)}
html.nbm-open .nbm-link .nbm-sub{opacity:1;transform:none;transition-delay:calc(.55s + var(--li,0) * .08s)}
.nbm-quick{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 10px}
.nbm-quick a{font:500 13px Inter,system-ui,sans-serif;color:var(--nb-gold);text-decoration:none;border-bottom:1px solid rgba(232,200,114,.3);opacity:0;transition:opacity .4s}
html.nbm-open .nbm-quick a{opacity:1;transition-delay:.8s}
.nbm-quick a:hover{color:#fff;border-color:var(--nb-crim)}

/* split letters that rise in, and roll to gold on hover */
.nb-word{display:inline-flex;overflow:hidden;vertical-align:bottom;position:relative}
.nb-ch{display:inline-block;position:relative;white-space:pre;transform:translateY(110%);transition:transform .7s var(--nb-out)}
.nb-ch::after{content:attr(data-c);position:absolute;left:0;top:100%;color:var(--nb-gold);text-shadow:0 0 18px rgba(196,58,67,.6)}
html.nbm-open .nbm .nb-ch,.nb-rise .nb-ch{transform:translateY(0);transition-delay:calc(.35s + var(--li,0) * .07s + var(--ci,0) * .018s)}
.nb-roll:hover .nb-ch,.nb-roll:focus-visible .nb-ch,.nb-roll.is-on .nb-ch{transform:translateY(-100%)!important;transition-delay:calc(var(--ci,0) * .012s)!important;transition-duration:.45s}

/* preview panel */
.nbm-prev-img{aspect-ratio:16/9;background:#050304 center/cover no-repeat;position:relative;overflow:hidden}
.nbm-prev-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,4,5,.85))}
.nbm-prev-t{padding:14px 6px 4px}
.nbm-prev-t b{display:block;font-family:Cinzel,Georgia,serif;font-size:24px;color:var(--nb-ivory)}
.nbm-prev-t p{margin:4px 0 0;font:400 14px Inter,system-ui,sans-serif;color:var(--nb-muted)}
.nbm-prev-t em{display:block;margin-top:8px;font:500 13px Inter,system-ui,sans-serif;font-style:normal;color:var(--nb-gold)}
.nbm-prev.swap .nbm-prev-img{animation:nbSwap .55s var(--nb-out)}
.nbm-prev.swap .nbm-prev-t{animation:nbSwapT .55s var(--nb-out)}
@keyframes nbSwap{0%{clip-path:inset(0 100% 0 0);transform:translateX(-30px)}100%{clip-path:inset(0);transform:none}}
@keyframes nbSwapT{0%{opacity:0;transform:translateX(24px)}100%{opacity:1;transform:none}}

/* account card */
.nbm-acct b{display:block;font-family:Cinzel,Georgia,serif;font-size:18px;color:var(--nb-ivory)}
.nbm-acct p{margin:4px 0 10px;font:400 13px Inter,system-ui,sans-serif;color:var(--nb-muted)}
.nbm-acct .row{display:flex;gap:8px;flex-wrap:wrap}
.nbm-acct a{display:inline-block;padding:8px 14px;font:600 13px Inter,system-ui,sans-serif;text-decoration:none;border:1px solid var(--nb-glass-edge);color:var(--nb-ivory);transition:border-color .2s,background .2s,transform .2s var(--nb-out)}
.nbm-acct a:hover{border-color:var(--nb-crim);background:rgba(196,58,67,.14);transform:translateY(-1px)}
.nbm-acct a.dc{background:#5865f2;border-color:#5865f2}.nbm-acct a.gg{background:#f1ece2;color:#1d1a16;border-color:#f1ece2}
.nbm-x{position:absolute;top:18px;right:max(24px,4vw);width:46px;height:46px;border:1px solid var(--nb-glass-edge);background:rgba(20,12,14,.6);cursor:pointer;z-index:3;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s .4s,transform .6s var(--nb-spring) .4s,border-color .2s}
html.nbm-open .nbm-x{opacity:1;transform:none}
.nbm-x:hover{border-color:var(--nb-crim)}
.nbm-x i{position:absolute;left:12px;right:12px;top:22px;height:1.5px;background:var(--nb-gold);transform:rotate(45deg)}.nbm-x i+i{transform:rotate(-45deg)}
.nbm-close-hint{position:absolute;right:max(28px,6vw);bottom:18px;font:500 12px Inter,system-ui,sans-serif;color:var(--nb-muted);opacity:0;transition:opacity .4s .9s}
html.nbm-open .nbm-x{position:absolute;top:18px;right:max(24px,4vw);width:46px;height:46px;border:1px solid var(--nb-glass-edge);background:rgba(20,12,14,.6);cursor:pointer;z-index:3;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s .4s,transform .6s var(--nb-spring) .4s,border-color .2s}
html.nbm-open .nbm-x{opacity:1;transform:none}
.nbm-x:hover{border-color:var(--nb-crim)}
.nbm-x i{position:absolute;left:12px;right:12px;top:22px;height:1.5px;background:var(--nb-gold);transform:rotate(45deg)}.nbm-x i+i{transform:rotate(-45deg)}
.nbm-close-hint{opacity:.8}
@media (max-width:860px){.nbm-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:84px 18px 24px;align-content:start;overflow:auto}.nbm-nav{grid-row:auto}.nbm-prev{display:none}}

/* ---- Abyss rift transition ---- */
.nbr{position:fixed;inset:0;z-index:2000;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.nbr-dim{position:absolute;inset:0;background:#050304;opacity:0;transition:opacity .35s ease}
.nbr.on .nbr-dim{opacity:.82}
.nbr video,.nbr img{position:absolute;height:100vh;width:auto;max-width:none;mix-blend-mode:screen;transform:scale(1);transition:transform 1s cubic-bezier(.7,0,.84,0),filter 1s}
.nbr.flood video,.nbr.flood img{transform:scale(7);filter:brightness(1.6) saturate(1.4)}
.nbr-flood{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#ff3b3b 0%,#7d1820 40%,#120507 85%);opacity:0;transition:opacity .45s ease .35s}
.nbr.flood .nbr-flood{opacity:1}
.nbr-in{position:fixed;inset:0;z-index:2000;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ff3b3b 0%,#7d1820 40%,#120507 85%);animation:nbRiftIn .9s var(--nb-out) forwards}
@keyframes nbRiftIn{0%{opacity:1;clip-path:circle(150% at 50% 50%)}100%{opacity:0;clip-path:circle(0% at 50% 50%)}}

/* ---- feather particles ---- */
.nb-feather{position:fixed;width:22px;height:auto;pointer-events:none;z-index:999;filter:drop-shadow(0 0 6px rgba(196,58,67,.6))}

@media (prefers-reduced-motion:reduce){
  .nbm-circle-spin{animation:none}
  .nbm-panel,.nb-ch,.nbm-circle-wrap,.nbm-wings{transition-duration:.01s!important;transition-delay:0s!important}
  html.nbm-open .nbm-flare{animation:none}
  #nbSparks{display:none}
}