/* 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 ---- */
/* motes sit behind content: body is its own stacking context and the canvas is at z-index -1 */
body.nb-motes{isolation:isolate}
#nbMotes{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.7}
#nbSparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998}

/* ---- site header: full width, logo pinned far left, tools far right ---- */
.sitehead .sh-in{max-width:none!important;margin:0!important;padding:0 clamp(14px,2vw,32px)!important}
.sitehead .sh-tools{margin-left:auto}

/* ---- 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,box-shadow .3s;z-index:1002}
.nb-burger:hover,.nb-burger:focus-visible{border-color:var(--nb-crim);box-shadow:0 0 0 1px rgba(196,58,67,.35),0 0 18px rgba(196,58,67,.45),inset 0 0 12px rgba(196,58,67,.25)}
.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),left .3s 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;overflow:hidden}
html.nbm-open .nbm{visibility:visible;pointer-events:auto}
.nbm-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(125,24,32,.30),rgba(6,4,5,.95) 72%),rgba(6,4,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease}
html.nbm-open .nbm-bg{opacity:1}

/* hero: wings with the casting circle as a halo behind them, centered and sized to the screen height */
/* the whole effects layer is screen-blended onto the dark backdrop, so black in the videos disappears (no boxes) */
.nbm-fx{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;mix-blend-mode:screen}
.nbm-par{position:relative;width:100%;height:100%;display:grid;place-items:center;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .9s var(--nb-out)}
.nbm-hero{position:relative;width:min(135vh,100vw);aspect-ratio:16/9}
.nbm-fx video,.nbm-fx img{pointer-events:none;display:block}
.nbm-circle-wrap{position:absolute;left:50%;top:42%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;opacity:0;transform:scale(.3) rotate(-120deg);transition:transform 1.1s var(--nb-out),opacity .6s ease;
  translate:calc(var(--px,0px) * .6) calc(var(--py,0px) * .6)}
html.nbm-open .nbm-circle-wrap{opacity:.55;transform:none}
.nbm-circle-spin{width:100%;height:100%;animation:nbSpin 120s linear infinite}
.nbm-circle-spin video,.nbm-circle-spin img{width:100%;height:100%;object-fit:contain}
.nbm-wings-wrap{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;transform:scale(.92);transition:opacity .5s ease .15s,transform 1.4s var(--nb-out) .15s}
html.nbm-open .nbm-wings-wrap{opacity:.95;transform:none;animation:nbBreathe 7s ease-in-out 2s infinite alternate}
.nbm-wings-wrap video,.nbm-wings-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.nbm-wings-idle{opacity:0}
.nbm.idle .nbm-wings-idle{opacity:1}
.nbm.idle video.nbm-wings{opacity:0}
@keyframes nbBreathe{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.025) translateY(-.6%)}}
.nbm-flare{position:absolute;width:40vmin;height:40vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,170,120,.5),rgba(196,58,67,.22) 35%,transparent 70%);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))}

/* panels frame the hero from the sides; content stays at normal width on very wide screens */
.nbm-stage{position:absolute;inset:0;margin:0 auto;max-width:1680px;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr) minmax(260px,360px);grid-template-rows:1fr 1fr;column-gap:24px;row-gap:16px;padding:84px clamp(18px,3vw,48px) 36px}
.nbm-panel{opacity:0;transition:transform .8s var(--nb-spring),opacity .4s ease,clip-path .9s var(--nb-out)}
.nbm-panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(232,200,114,.10),rgba(196,58,67,.05) 40%,transparent 70%)}
.nbm-panel:hover::after{opacity:1}
.nbm-nav{grid-column:1;grid-row:1/3;align-self:center;max-height:calc(100vh - 130px);overflow:auto;padding:30px 32px 24px;transform:translate3d(-80px,0,0);transition-delay:.18s}
.nbm-prev{grid-column:3;grid-row:1;align-self:end;padding:14px;transform:translate3d(80px,0,0);clip-path:inset(0 100% 0 0);transition-delay:.32s}
.nbm-acct{grid-column:3;grid-row:2;align-self:start;padding:18px 20px;transform:translate3d(80px,0,0);transition-delay:.46s}
html.nbm-open .nbm-panel{opacity:1;transform:none}
html.nbm-open .nbm-prev{clip-path:inset(0)}
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:6px}
.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(24px,2.1vw,36px);line-height:1.1;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,.nbm-foot 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,html.nbm-open .nbm-foot a{opacity:1;transition-delay:.8s}
.nbm-quick a:hover,.nbm-foot a:hover{color:#fff;border-color:var(--nb-crim)}
.nbm-foot{margin-top:22px;padding-top:12px;border-top:1px solid rgba(232,200,114,.12);display:flex;gap:16px}
.nbm-foot a{color:var(--nb-muted);font-size:12px}

/* 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)}
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}
/* hide the rolled-away letter so its descender (g, y) can't peek in at the top */
.nb-roll .nb-ch{transition-property:transform,color}.nb-roll:hover .nb-ch,.nb-roll:focus-visible .nb-ch,.nb-roll.is-on .nb-ch{color:transparent}
.nb-ch::after{text-shadow:none}

/* 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:22px;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}
.nbm-acct a:hover{border-color:var(--nb-crim);background:rgba(196,58,67,.14)}
.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:clamp(18px,3vw,48px);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,box-shadow .3s}
html.nbm-open .nbm-x{opacity:1;transform:none}
.nbm-x:hover{border-color:var(--nb-crim);box-shadow:0 0 18px rgba(196,58,67,.45)}
.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:clamp(18px,3vw,48px);bottom:14px;font:500 12px Inter,system-ui,sans-serif;color:var(--nb-muted);opacity:0;transition:opacity .4s .9s}
html.nbm-open .nbm-close-hint{opacity:.8}
/* laptops: narrower side panels */
@media (max-width:1280px){.nbm-stage{grid-template-columns:minmax(280px,360px) minmax(0,1fr) minmax(240px,300px)}}
/* small screens: one column over the hero, no preview */
@media (max-width:900px){.nbm-stage{grid-template-columns:1fr;grid-template-rows:auto auto;padding:80px 16px 24px;align-content:start;overflow:auto}
  .nbm-nav,.nbm-acct{grid-column:1;grid-row:auto;max-height:none;align-self:start}.nbm-prev{display:none}.nbm-link{font-size:30px}}

/* ---- 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-wrap,.nbm-par{transition-duration:.01s!important;transition-delay:0s!important}
  html.nbm-open .nbm-wings-wrap{animation:none}
  html.nbm-open .nbm-flare{animation:none}
  #nbSparks{display:none}
}

/* ---- emblem in the header, short name on narrow screens ---- */
.sh-logo .sh-emb{height:28px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(232,180,80,.18))}
.sh-name .nb-short{display:none}
@media (max-width:600px){.sh-name .nb-full{display:none}.sh-name .nb-short{display:inline}}
.nbm-emb{display:block;width:150px;height:auto;margin:-6px 0 8px -6px;filter:drop-shadow(0 0 14px rgba(232,180,80,.18))}

/* ---- custom pointer: gold arrow, quill over anything clickable (mouse only) ---- */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2 L3 21 L8.2 16.4 L12 24.6 L15.4 23 L11.7 15 L18.6 15 Z' fill='%23140d0e' stroke='%23e8c872' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.2 7.2 L7.2 9.6 L5.2 12 Z' fill='%23c43a43'/%3E%3C/svg%3E") 3 2,auto}
  a,button,select,summary,label[for],[role=button],[role=tab],[data-gslot],[data-rift],.pt-prev,.nb-burger,.nbm-x,.gitem,.sh-btn,.btn,.linkbtn{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M2.5 2.5 L7 5 C14 6 22 12 26 25 C19 20 12 17 6.5 9 Z' fill='%23140d0e' stroke='%23e8c872' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2.5 2.5 L9 12' stroke='%23c43a43' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 9.5 L13 9 M13 12.5 L16.5 12.2 M16 15.8 L19.6 15.8' stroke='%23e8c872' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 2 2,pointer!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea{cursor:text!important}
}