/* special pages only. the wikis purple and red get binned, tokens redefined on body.special so
   every wiki component comes along without me restyling them one at a time */

body.special{
  --bg:#000000;
  --bg-2:#0b0b0b;
  --panel:#161616;
  --panel-2:#1f1f1f;
  --line:rgba(255,255,255,.10);
  --text:#e8e8e8;
  --muted:#8a8a8a;
  --white:#ffffff;
  /* accent goes monochrome too so no red survives from the wiki chrome */
  --red:#ffffff;
  --red-2:#cfcfcf;
  background:#000;
}
body.special .wiki-header{background:rgba(0,0,0,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);}
body.special .wiki-brand img{filter:none;}
body.special .wiki-brand .wb-text > span:first-child{letter-spacing:2px;text-transform:uppercase;
  font-size:1.05rem;}
/* Official means endorsed by Hapless. next to Oriox or Chud it reads like a claim about them,
   off on every special page */
body.special .wiki-official{display:none;}
body.special .btn-red{background:#fff;color:#000;border-color:#fff;}
body.special .btn-red:hover{background:#d8d8d8;border-color:#d8d8d8;}
/* log in sits on --red, white here, and its text was white too. hover went white again. dark
   like each themes btn-red. case #248 */
body.special .wa-login,body.special .wa-login:hover{color:#000;}
body.special .wiki-foot{background:none;border-top:1px solid rgba(255,255,255,.08);}
body.special a{color:#fff;}

/* ---- the page loading screen. the main sites elementor loader, same numbers, black. my logo on
   mine, the little fella on deathbyeggs. hardcoded, it paints before any theme. case #226, #238 */
.pg-load{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:#000;
  cursor:wait;user-select:none;-webkit-user-select:none;opacity:1;visibility:visible;
  transition:opacity .3s ease,visibility .3s ease;}
.pg-load-mark{width:110px;max-width:110px;height:auto;display:block;transform:scale(.75);opacity:0;
  transition:opacity .1s ease .37s,transform .15s cubic-bezier(1,2,0,1.25) .37s;}
.pg-load.in .pg-load-mark{transform:scale(1.1);opacity:1;}
.pg-load.out{opacity:0;visibility:hidden;cursor:auto;pointer-events:none;
  transition-delay:.37s,.37s;}
.pg-load.out .pg-load-mark{transform:scale(.75);opacity:0;
  transition:opacity .3s ease 0s,transform .25s cubic-bezier(1,2,0,1.25) .1s;}
@media (prefers-reduced-motion:reduce){
  .pg-load-mark,.pg-load.out .pg-load-mark{transition:none;transform:none;}
  .pg-load.in .pg-load-mark{opacity:1;}
}

/* ---- the stage ----------------------------------------------------------------------------
   avatar drops in, first word lands, second word lands. all off 2 classes on .sp-stage so
   the script only has to know when its over */
/* 2 rows sized to fit so me and the button centre together. bottom aligning it dumped me
   165px under the text. case #226 */
.sp-stage{position:relative;min-height:calc(100vh - 84px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,540px);
  grid-template-rows:auto auto;
  grid-template-areas:"text figure" "text acts";
  gap:18px 40px;align-items:center;align-content:center;
  max-width:min(1500px,94vw);margin:0 auto;padding:20px 26px 60px;}
.sp-text{grid-area:text;}
.sp-figure{grid-area:figure;}
.sp-acts{grid-area:acts;justify-content:center;margin-top:0;}
@media (max-width:900px){
  .sp-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"figure" "text" "acts";
    gap:20px;min-height:0;padding-top:36px;}
  .sp-acts{justify-content:flex-start;margin-top:0;}
}

/* the words */
.sp-name{font-family:"Gin",sans-serif;font-weight:400;line-height:.86;margin:0 0 18px;
  font-size:clamp(3.4rem,11vw,8rem);letter-spacing:2px;}
.sp-name span{display:block;color:#fff;}
.sp-name .two{color:#7d7d7d;}
.sp-role{font-size:.82rem;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;
  color:#8a8a8a;margin:0 0 22px;}
.sp-lead{color:#cfcfcf;font-size:1.28rem;line-height:1.6;max-width:600px;margin:0 0 16px;}
.sp-body{color:#8a8a8a;font-size:1.14rem;line-height:1.7;max-width:600px;margin:0 0 12px;}
.sp-acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.sp-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 24px;
  font-size:1rem;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.22);
  color:#fff;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.sp-btn:hover{background:#fff;color:#000;border-color:#fff;text-decoration:none;}
/* body.special a turns every link white and beats a lone class. without the extra weight
   this is white on white and the label just vanishes. case #221 */
body.special .sp-btn--solid{background:#fff;color:#000;border-color:#fff;}
body.special .sp-btn--solid:hover{background:#cfcfcf;border-color:#cfcfcf;color:#000;}

/* holds the models footprint so it swaps in instead of shoving the page about */
.sp-figure{position:relative;justify-self:center;width:100%;max-width:460px;aspect-ratio:3/4;}
/* no spinner in here anymore, .pg-load does the waiting. this line is just for when
   nothing was ever gonna load. case #223, case #226 */
.sp-avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sp-avatar .sp-avatar-off{display:none;}
.sp-avatar[data-avatar="failed"] .sp-avatar-off,
.sp-avatar[data-avatar="nowebgl"] .sp-avatar-off{display:block;}

/* box goes too. 400px of nothing with one grey line in it is the placeholder card again
   in a hat. case #226 */
.sp-figure.no-avatar{display:none;}

.sp-avatar-off{color:#4a4a4a;font-size:.68rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;text-align:center;margin:0;align-self:center;}

/* pan-y so a thumb going down the page over me still scrolls it. the drag only reads sideways.
   case #248 */
.sp-avatar canvas{cursor:grab;touch-action:pan-y;}
.sp-avatar canvas:active{cursor:grabbing;}

/* the shadow it lands on */
.sp-figure:after{content:"";position:absolute;left:14%;right:14%;bottom:2%;height:26px;
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.16),transparent 70%);
  opacity:0;}

/* ---- the arrival --------------------------------------------------------------------------
   only while .is-running. .is-done is where it all settles so intro off still looks right */
.sp-stage.is-running .sp-figure{animation:sp-drop 1.5s cubic-bezier(.2,.85,.25,1) both;}
.sp-stage.is-running .sp-figure:after{animation:sp-shadow 1.5s cubic-bezier(.2,.85,.25,1) both;}
.sp-stage.is-running .sp-name .one{animation:sp-word .7s cubic-bezier(.2,.9,.25,1) 1.45s both;}
.sp-stage.is-running .sp-name .two{animation:sp-word .7s cubic-bezier(.2,.9,.25,1) 1.75s both;}
.sp-stage.is-running .sp-role,
.sp-stage.is-running .sp-lead,
.sp-stage.is-running .sp-body,
.sp-stage.is-running .sp-acts{animation:sp-rise .6s ease both;}
.sp-stage.is-running .sp-role{animation-delay:2.2s;}
.sp-stage.is-running .sp-lead{animation-delay:2.35s;}
.sp-stage.is-running .sp-body{animation-delay:2.5s;}
.sp-stage.is-running .sp-acts{animation-delay:2.65s;}

.sp-stage.is-done .sp-figure:after{opacity:1;}
.sp-stage.is-skipped *{animation:none !important;}

/* comes down turning, overshoots a bit, settles */
@keyframes sp-drop{
  0%{transform:translateY(-115%) rotate(-220deg) scale(.82);opacity:0;}
  55%{opacity:1;}
  78%{transform:translateY(2%) rotate(6deg) scale(1.02);}
  100%{transform:translateY(0) rotate(0) scale(1);opacity:1;}
}
@keyframes sp-shadow{
  0%,45%{opacity:0;transform:scaleX(.4);}
  100%{opacity:1;transform:scaleX(1);}
}
/* words come in wide and pull together, reads as arriving not fading */
@keyframes sp-word{
  0%{opacity:0;letter-spacing:26px;transform:translateY(14px);filter:blur(6px);}
  100%{opacity:1;letter-spacing:2px;transform:translateY(0);filter:blur(0);}
}
@keyframes sp-rise{
  0%{opacity:0;transform:translateY(12px);}
  100%{opacity:1;transform:translateY(0);}
}

/* quiet hint the intro can be skipped */
.sp-skip{position:absolute;right:26px;bottom:22px;font-size:.68rem;letter-spacing:1.4px;
  text-transform:uppercase;color:#4a4a4a;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.sp-stage.is-running .sp-skip{opacity:1;}

/* below the fold, wiki components so it all stays consistent */
.sp-more{max-width:min(1500px,94vw);margin:0 auto;padding:0 26px 80px;}
.sp-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.sp-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.sp-card b{display:block;color:#fff;font-size:1rem;margin-bottom:5px;}
.sp-card span{color:#8a8a8a;font-size:.9rem;line-height:1.55;}

/* ---- per person themes. base is black and white, a person is a short block on top. anything
   past flat colour gets asked for, like the blue under deathbyegg, never guessed ---- */

/* scrollbar follows the accent. scrollbar-color is firefox only, chrome bins the slim one when it
   sees it. no space before :: or the page bar itself never gets it. case #247 */
@supports not selector(::-webkit-scrollbar){html.special{scrollbar-color:rgba(255,255,255,.4) transparent;}}
html.special::-webkit-scrollbar-thumb,html.special ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32);
  border:3px solid transparent;background-clip:padding-box;}
html.special::-webkit-scrollbar-thumb:hover,html.special ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55);
  border:3px solid transparent;background-clip:padding-box;}

/* decodeunicode, green and red */
body.special--decodeunicode{
  --bg:#06120c;
  --bg-2:#0b1c13;
  --panel:#12281b;
  --panel-2:#1a3826;
  --red:#3ddc84;
  --red-2:#ff4d4d;
  background:#06120c;
}
@supports not selector(::-webkit-scrollbar){html.special--decodeunicode{scrollbar-color:rgba(61,220,132,.5) transparent;}}
html.special--decodeunicode::-webkit-scrollbar-thumb,html.special--decodeunicode ::-webkit-scrollbar-thumb{background:rgba(61,220,132,.45);
  border:3px solid transparent;background-clip:padding-box;}
html.special--decodeunicode::-webkit-scrollbar-thumb:hover,html.special--decodeunicode ::-webkit-scrollbar-thumb:hover{background:rgba(255,77,77,.75);
  border:3px solid transparent;background-clip:padding-box;}
body.special--decodeunicode .btn-red{background:#3ddc84;border-color:#3ddc84;color:#03210f;}
body.special--decodeunicode .wa-login,body.special--decodeunicode .wa-login:hover{color:#03210f;}

/* enderbirds, purple and blue */
body.special--enderbirds{
  --bg:#0b0718;
  --bg-2:#130d26;
  --panel:#1c1338;
  --panel-2:#271a4d;
  --red:#a259ff;
  --red-2:#4d9dff;
  background:#0b0718;
}
@supports not selector(::-webkit-scrollbar){html.special--enderbirds{scrollbar-color:rgba(162,89,255,.5) transparent;}}
html.special--enderbirds::-webkit-scrollbar-thumb,html.special--enderbirds ::-webkit-scrollbar-thumb{background:rgba(162,89,255,.45);
  border:3px solid transparent;background-clip:padding-box;}
html.special--enderbirds::-webkit-scrollbar-thumb:hover,html.special--enderbirds ::-webkit-scrollbar-thumb:hover{background:rgba(77,157,255,.75);
  border:3px solid transparent;background-clip:padding-box;}
body.special--enderbirds .btn-red{background:#a259ff;border-color:#a259ff;color:#12042b;}
body.special--enderbirds .wa-login,body.special--enderbirds .wa-login:hover{color:#12042b;}

/* deathbyegg, black with blue running under it. the glow comes up off the bottom, fixed so it
   stays put while the page scrolls over it. case #246 */
body.special--deathbyegg{
  --bg:#000000;
  --bg-2:#04060d;
  --panel:#0a1022;
  --panel-2:#101a36;
  --red:#3d7bff;
  --red-2:#8fb4ff;
  background:radial-gradient(120% 55% at 50% 115%,rgba(38,86,230,.34),rgba(38,86,230,.08) 45%,transparent 70%) fixed,#000;
}
@supports not selector(::-webkit-scrollbar){html.special--deathbyegg{scrollbar-color:rgba(61,123,255,.85) transparent;}}
html.special--deathbyegg::-webkit-scrollbar-thumb,html.special--deathbyegg ::-webkit-scrollbar-thumb{background:rgba(61,123,255,.8);
  border:3px solid transparent;background-clip:padding-box;}
html.special--deathbyegg::-webkit-scrollbar-thumb:hover,html.special--deathbyegg ::-webkit-scrollbar-thumb:hover{background:rgba(143,180,255,.75);
  border:3px solid transparent;background-clip:padding-box;}
body.special--deathbyegg .btn-red{background:#3d7bff;border-color:#3d7bff;color:#020714;}
body.special--deathbyegg .wa-login,body.special--deathbyegg .wa-login:hover{color:#020714;}
body.special--deathbyegg .wiki-header{border-bottom-color:rgba(61,123,255,.22);}

/* an empty page. header footer colour and nothing else, the middle is up to whoever owns it */
.sp-blank{min-height:calc(100vh - 190px);}

/* prose sections. wider than the hero cos these are paragraphs to actually read */
.sp-sect{max-width:820px;margin:0 0 60px;}
.sp-h2{font-family:"Gin",sans-serif;font-weight:400;letter-spacing:.5px;
  font-size:clamp(1.85rem,3.6vw,2.6rem);color:#fff;margin:0 0 20px;}
.sp-p{color:#9a9a9a;font-size:1.18rem;line-height:1.75;margin:0 0 16px;}
.sp-p:last-child{margin-bottom:0;}

/* the redacted name. monospace and fixed cells so the width doesnt jitter while it churns.
   case #115 */
.sp-redact{display:inline-flex;gap:1px;vertical-align:baseline;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);cursor:help;
  transition:background .18s ease,border-color .18s ease;}
.sp-redact i{font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.9em;line-height:1.2;width:.62em;text-align:center;color:#cfcfcf;
  user-select:none;}
.sp-redact:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);}
.sp-redact:hover i{color:#fff;}

/* sections come in as people scroll */
/* visible til the script says otherwise, no script and it still reads */
.sp-rise{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);}
.sp-rise.armed{opacity:0;transform:translateY(16px);}
.sp-rise.armed.in{opacity:1;transform:none;}
/* the rescue, straight to visible, no transition to wait on */
.sp-rise.now{opacity:1 !important;transform:none !important;transition:none !important;}
@media (prefers-reduced-motion: reduce){
  .sp-rise{opacity:1;transform:none;transition:none;}
}

/* ---- text that arrives ---------------------------------------------------------------------
   opt in from the markup so none of this fires on text that didnt ask. case #222 */
.sp-w{display:inline-block;opacity:0;transform:translateY(.4em);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.25,1);}
.sp-w.in{opacity:1;transform:none;}

/* glyphs are wider than letters so its fixed width or the line jiggles while it settles */
.sp-scramble{display:inline-block;color:var(--white);font-variant-numeric:tabular-nums;}
.sp-scramble.landed{color:#ff8a7e;}

@media (prefers-reduced-motion: reduce){
  .sp-w{opacity:1;transform:none;transition:none;}
}

/* ---- the avatar strip ----------------------------------------------------------------------
   one model at a time, same 3/4 box as the hero so they read as the same thing at 2 sizes.
   case #225 */
/* middle of the page and bigger. at 300px stuck to the left it was the smallest thing on
   the page and the only thing worth looking at */
.av-sect{max-width:none;margin-left:auto;margin-right:auto;text-align:center;}
.av-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px;}
.av-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;}
.av-stage{width:100%;max-width:430px;aspect-ratio:3/4;position:relative;}

/* faint on purpose. for people who want to get on with it, not a fucking control panel */
.av-arrow{flex:none;background:none;border:0;padding:16px 8px;cursor:pointer;line-height:0;
  color:rgba(255,255,255,.14);transition:color .18s ease;-webkit-tap-highlight-color:transparent;}
.av-arrow:hover,.av-arrow:focus-visible{color:rgba(255,255,255,.72);outline:none;}
.av-arrow svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.av-stage canvas{display:block;width:100%;height:100%;}
/* turns on its own so no grab cursor, dragging it would just fight the timer */
/* dots not names. 14 names and a counter was way too much furniture */
.av-dots{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;
  max-width:260px;}
.av-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18);
  transition:background .4s ease,transform .4s ease;}
.av-dots i.on{background:#fff;transform:scale(1.5);}
.av-stage[data-avatar="skipped"],
.av-stage[data-avatar="failed"],
.av-stage[data-avatar="nowebgl"]{display:none;}
.av-sect:has(.av-stage[data-avatar="skipped"]),
.av-sect:has(.av-stage[data-avatar="failed"]),
.av-sect:has(.av-stage[data-avatar="nowebgl"]){display:none;}


/* select all or people copy half a gun */
.sp-cmd{margin:0 0 16px;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;line-height:1.75;
  color:#d6d6d6;overflow-wrap:break-word;-webkit-user-select:all;user-select:all;}

/* an aside under the command, not another point */
.sp-note{color:#6a6a6a;font-size:.96rem;line-height:1.6;margin:-6px 0 16px;}