/*
Theme Name: Atlas SMP Ensemble V6
Description: Atlas SMP, one scene, one group, three vote destinations.
Version: 0.7.3
Requires PHP: 8.1
Text Domain: atlas-smp-v6
*/
:root{
  color-scheme:dark;
  --bg:#10242b;
  --text:#f2f9f7;
  --cyan:#72d6e7;
  --stone:#344b4b;
  --tag-background:rgba(10,24,28,.92);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-width:280px;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
a:focus-visible{outline:3px solid #a5f6ff;outline-offset:5px}
.skip-access{position:absolute;left:16px;top:-100px;padding:14px 18px;z-index:100;background:white;color:#12242e}
.skip-access:focus{top:12px}
.atlas-page{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  min-height:100svh;width:100%;overflow:hidden;
  background:#122830;
}
.scene-background{position:absolute;inset:0;z-index:-3;pointer-events:none}
.scene-background picture,.scene-background img{width:100%;height:100%;display:block}
.scene-background img{object-fit:cover;object-position:center 46%}
.scene-background::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,20,27,.42) 0%,rgba(6,18,24,.36) 36%,rgba(6,19,25,.46) 68%,rgba(6,15,20,.86) 100%),
    linear-gradient(90deg,rgba(7,16,21,.42),transparent 38%,transparent 63%,rgba(7,16,21,.42));
}
.ensemble{
  position:relative;width:min(100%,1600px);margin:0 auto;
  height:max(690px,calc(100svh - 125px));
  flex:1 0 auto;
}
.brand-island{
  position:absolute;left:50%;top:clamp(72px,10vh,134px);
  z-index:8;width:clamp(295px,30vw,455px);
  transform:translateX(-50%);text-align:center;pointer-events:none;
}
.brand-mark{margin:0}
.brand-mark img{
  display:block;width:100%;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 4px 0 rgba(1,12,17,.28));
  shape-rendering:crispEdges;
}
.brand-mark{position:relative;isolation:isolate}
.brand-mark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  mask-image:url("./assets/images/atlas-wordmark-vector-hd.svg");
  -webkit-mask-image:url("./assets/images/atlas-wordmark-vector-hd.svg");
  mask-size:100% 100%;-webkit-mask-size:100% 100%;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.0) 45%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.0) 55%,transparent 60%);
  background-size:350% 100%;background-position:125% 0;
  animation:atlas-logo-glint 5.2s ease-in-out infinite;
}
@keyframes atlas-logo-glint{0%,47%,100%{background-position:125% 0}62%{background-position:-90% 0}}
.brand-tagline{
  color:#f1f7f7;
  font-size:clamp(15px,1.35vw,18px);
  font-weight:620;
  line-height:1.43;
  letter-spacing:-.018em;
  text-shadow:0 2px 10px rgba(1,10,20,.96),0 1px 3px #10212b;
  max-width:460px;
  margin:8px auto 0;
}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.social-icons{
  display:flex;gap:32px;align-items:center;justify-content:center;
  margin:28px auto 0;pointer-events:auto;
}
.social-icons a{
  width:65px;height:65px;display:flex;align-items:center;justify-content:center;
  color:#f8ffff;transition:transform .18s ease,opacity .18s ease;
}
.social-icons a:hover{transform:translateY(-3px);opacity:.85}
.social-icons img{width:48px;height:48px;display:block;filter:invert(1)}
.cast{
  position:absolute;inset:0;overflow:hidden;z-index:3;
}
.cast-members{position:absolute;inset:0;z-index:6;pointer-events:none}
.cast-member{
  position:relative;
  display:flex;align-items:center;flex-direction:column;
  pointer-events:none;
}
.nameplate{
  position:relative;z-index:7;display:flex;align-items:center;flex-direction:column;
  flex:none;width:max-content;max-width:var(--nameplate-max,146px);
  min-width:0;padding:2px 2px 4px;text-align:center;
  background:transparent;border:none;box-shadow:none;
  text-shadow:0 2px 3px rgba(0,0,0,.98),0 0 10px rgba(0,8,18,.90);
  transform:translateY(calc(var(--nameplate-rise,0) * -1px));
}
.nameplate-grade{font-size:14px;line-height:1.24;font-weight:800;color:#9be4ef;white-space:normal;overflow-wrap:anywhere}
.nameplate-name{
  display:block;margin-top:3px;color:#fff;font-size:18px;line-height:1.15;
  font-weight:850;letter-spacing:-.025em;overflow-wrap:anywhere;max-width:100%;
}
.avatar-slot{
  position:relative;flex:none;display:flex;justify-content:center;align-items:flex-end;
  transform:translateX(var(--slot-shift,0px));
  width:var(--actor-width,140px);height:var(--figure-height,270px);margin-top:var(--label-gap,16px);
}
.avatar-fallback{
  display:block;height:100%;width:100%;object-fit:contain;object-position:center bottom;
  image-rendering:pixelated;
  transform:translateY(var(--avatar-shift,0px)) rotate(var(--avatar-tilt,0deg));
  transform-origin:center bottom;filter:drop-shadow(0 8px 7px rgba(5,17,21,.32));
}
.cast-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:4;display:block;pointer-events:none;
}
.cast.is-webgl .cast-member[data-skin-ready="1"] .avatar-fallback{visibility:hidden}
.cast.is-webgl .cast-member[data-skin-ready="0"] .avatar-fallback{visibility:visible}
.cast.is-webgl .cast-member .nameplate{z-index:7}
.cast.is-layout .cast-member{
  position:absolute;top:0;left:0;transform:translateX(-50%);
  width:var(--actor-width,140px);
}
.cast:not(.is-layout) .cast-members{
  position:absolute;top:320px;left:8%;right:8%;bottom:22px;
  display:flex;align-content:flex-end;justify-content:space-around;
  align-items:flex-end;flex-wrap:wrap;gap:12px;
}
.cast:not(.is-layout) .cast-member{max-width:160px;flex:1 0 105px}
.cast:not(.is-layout) .avatar-slot{width:100%;height:230px}
.server-copy-row{
  width:min(calc(100% - 30px),340px);
  height:52px;
  margin:40px auto 0;
  position:relative;
  z-index:12;
  pointer-events:auto;
  display:flex;
  align-items:stretch;
  border:1px solid rgba(230,238,240,.37);
  border-radius:5px;
  background:rgba(29,42,49,.89);
  box-shadow:0 5px 18px rgba(0,12,20,.22);
}
.server-copy-input{
  flex:1;min-width:0;padding:0 12px 0 19px;
  font-size:16px;line-height:52px;font-weight:720;
  text-align:center;letter-spacing:.015em;
  border:0;outline:0;background:transparent;color:#f5f8f8;
  cursor:default;
}
.server-copy-input:focus-visible{
  outline:2px solid #a5f6ff;outline-offset:-3px;
}
.server-copy-button{
  flex:none;width:53px;border:0;border-left:1px solid rgba(230,238,240,.15);
  background:rgba(255,255,255,.045);color:#f1f8f9;
  position:relative;display:grid;place-items:center;
  cursor:pointer;transition:background .2s ease;
}
.server-copy-button:hover{background:rgba(255,255,255,.13)}
.server-copy-button:focus-visible{outline:3px solid #9be4ef;outline-offset:3px}
.server-copy-button img{
  position:absolute;width:21px;height:21px;filter:brightness(0) invert(1);
  transition:opacity .22s ease,transform .22s ease;
}
.server-copy-button .icon-copy{opacity:1;transform:scale(1) translateY(0)}
.server-copy-button .icon-check{opacity:0;transform:scale(.6) translateY(5px)}
.server-copy-row.is-copied .icon-copy{opacity:0;transform:scale(.65) translateY(-5px)}
.server-copy-row.is-copied .icon-check{opacity:1;transform:scale(1) translateY(0)}
.server-copy-toast{
  position:absolute;right:-4px;bottom:calc(100% + 10px);
  padding:7px 11px;white-space:nowrap;
  font-size:12px;font-weight:650;color:#f7f9f9;
  border:1px solid rgba(236,246,247,.16);
  background:#233239;border-radius:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  pointer-events:none;
}
.server-copy-row.is-copied .server-copy-toast,
.server-copy-row.is-error .server-copy-toast{
  opacity:1;visibility:visible;transform:translateY(0);
}
.vote-favicon{
  width:22px;height:22px;flex:0 0 22px;
  display:block;object-fit:contain;
}
.vote-choice{gap:11px}
.vote-menu{
  position:relative;z-index:10;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  width:min(calc(100% - 60px),990px);margin:0 auto;
  padding:0 0 max(27px,env(safe-area-inset-bottom));
}
.vote-choice{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:61px;padding:12px 20px;
  border:1px solid rgba(214,238,242,.46);border-radius:2px;
  background:rgba(9,22,34,.66);
  color:#f1f7f8;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
  transition:border-color .18s ease,background-color .18s ease;
}
.vote-choice span{font-weight:750;font-size:clamp(15px,1.4vw,18px);letter-spacing:-.015em;line-height:1.25}
.vote-choice:hover{background:rgba(21,45,57,.84);border-color:rgba(194,241,246,.78)}
.vote-choice:active{background:rgba(17,39,50,.94)}
@media(max-width:1160px){
  .ensemble{height:1165px;flex:none}
  .server-copy-row{margin:40px auto 0}
  .brand-tagline{font-size:16px;max-width:370px}
  .brand-island{top:46px;width:min(80vw,360px)}
  .social-icons{gap:25px;margin:24px auto 0}
  .social-icons a{width:61px;height:61px}
  .social-icons img{width:46px;height:46px}
  .cast:not(.is-layout) .cast-members{
    top:290px;bottom:28px;left:7%;right:7%;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;
  }
  .cast:not(.is-layout) .cast-member{height:235px}
  .cast:not(.is-layout) .avatar-slot{height:175px}
  .vote-menu{width:min(calc(100% - 34px),650px);gap:10px;padding-bottom:30px}
  .vote-choice{min-height:67px;padding:10px 8px}
  .vote-choice span{font-size:15px}
}
@media(max-width:600px){
  .ensemble{height:1385px}
  .scene-background{background:#10252e}
  .scene-background img{height:100%;object-fit:cover;object-position:center 42%;mask-image:none;-webkit-mask-image:none}
  .scene-background::after{background:linear-gradient(180deg,rgba(4,14,23,.36) 0%,rgba(5,17,25,.45) 35%,rgba(6,20,27,.45) 68%,rgba(4,15,24,.66) 100%)}
  .brand-island{top:44px;width:min(84vw,345px)}
  .brand-tagline{font-size:15px;line-height:1.4;max-width:345px;margin-top:10px}
  .social-icons{margin-top:19px;gap:28px}
  .social-icons a{width:62px;height:62px}
  .social-icons img{width:46px;height:46px}
  .nameplate{padding:2px 0 4px;max-width:var(--nameplate-max,112px)}
  .nameplate-grade{font-size:12px}
  .nameplate-name{font-size:15px;line-height:1.18}
  .cast:not(.is-layout) .cast-members{top:250px;bottom:24px;gap:8px}
  .cast:not(.is-layout) .cast-member{height:208px}
  .cast:not(.is-layout) .avatar-slot{height:160px}
  .vote-menu{
    width:min(calc(100% - 30px),440px);
    grid-template-columns:1fr;gap:9px;
    padding-bottom:max(27px,env(safe-area-inset-bottom));
  }
  .vote-choice{min-height:54px;border-width:1px}
  .server-copy-row{margin:28px auto 0;height:52px}
  .vote-choice span{font-size:16px}
}
@media(max-width:350px){
  .brand-island{width:86vw;top:28px}
  .social-icons a{width:50px;height:50px}
  .vote-menu{width:calc(100% - 26px)}
}
.cast:not(.is-webgl) .avatar-fallback,
.cast.is-webgl .cast-member[data-skin-ready="0"] .avatar-fallback{
  animation:atlas-fallback-breathe 6.5s ease-in-out infinite;
  animation-delay:var(--idle-delay,0s);
}
@keyframes atlas-fallback-breathe{
  0%,100%{transform:translateY(var(--avatar-shift,0px)) rotate(var(--avatar-tilt,0deg))}
  50%{transform:translateY(calc(var(--avatar-shift,0px) - 3px)) rotate(calc(var(--avatar-tilt,0deg) + 1deg))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .social-icons a,.vote-choice,.server-copy-button,.server-copy-button img,
  .server-copy-toast{transition:none}
  .brand-mark::after{animation:none;opacity:0}
  .cast:not(.is-webgl) .avatar-fallback,
  .cast.is-webgl .cast-member[data-skin-ready="0"] .avatar-fallback{animation:none}
}