/* Villain title screen: BigCRM's boss in the middle, his people behind him
   fading back into the dark, CRM WARS under his chin and the menu under that.
   Shown on the front door only; the setup and hiring steps keep their own layout. */
@font-face{font-family:'CW Jost';src:url('fonts/jost.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
#villainTitle{--vt-red:#d9261c;--vt-bg:#0a0a0a;--vt-grey:#a6a6a6;--vt-f:'CW Jost',Futura,'Helvetica Neue',Arial,sans-serif;
  position:absolute;inset:0;z-index:20;background:var(--vt-bg);color:#fff;overflow:hidden;font-family:var(--vt-f);
  -webkit-font-smoothing:antialiased}
#titleScreen.setup #villainTitle,#titleScreen.hiring #villainTitle{visibility:hidden;pointer-events:none}
/* Nothing underneath should take focus while the villain screen is up */
#titleScreen:not(.setup):not(.hiring)>.logo-container{visibility:hidden}

/* The art: him and his people across the whole width of a wide screen,
   each row further back softer and darker (brand-source/title-army/wide.py).
   Its box is the picture itself, placed by title-frame.js so his head and
   shoulders clear the words on any screen (these numbers are only where it
   starts). Its far ends fall away into black, and its foot from his
   shoulders down behind the words (--vt-fade0 and 1, set by the script). */
.vt-art{position:absolute;z-index:0;left:50%;top:-15vh;height:104vh;aspect-ratio:2688/1536;transform:translateX(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 var(--vt-fade0,72%),transparent var(--vt-fade1,88%));
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,#000 var(--vt-fade0,72%),transparent var(--vt-fade1,88%));
  mask-composite:intersect}
.vt-art .vt-sharp{position:absolute;inset:0;background:url('brand/title/villain-wide.webp') 0 0/100% 100% no-repeat;animation:vtSharpIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtSharpIn{0%{opacity:0;transform:scale(1.025)}100%{opacity:1;transform:none}}

/* The words and the menu, centred beneath him */
.vt-copy{position:absolute;z-index:1;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 36px);transform:translateX(-50%);
  width:min(520px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:center;text-align:center}
.vt-copy>*{opacity:0;animation:vtUp .6s cubic-bezier(.2,.8,.2,1) .15s forwards}
.vt-wm{display:block;width:100%;height:auto;margin:0}
.vt-meta{margin:16px 0 0;font:600 12px/1.2 var(--vt-f);letter-spacing:.24em;text-transform:uppercase;color:var(--vt-grey)}
.vt-menu{width:min(440px,100%);margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vt-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 16px;border:0;border-radius:6px;margin:0;
  background:#1c1c1c;color:#fff;cursor:pointer;font:700 12px/1 var(--vt-f);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .15s,transform .15s}
.vt-menu button:hover{background:#2a2a2a}
.vt-menu button:active{transform:translateY(1px)}
.vt-menu .go{grid-column:1/-1;min-height:54px;padding:0 20px;background:var(--vt-red);font:800 18px/1 var(--vt-f);letter-spacing:.05em}
.vt-menu .go:hover{background:#ea3326}
.vt-menu .go small{font:600 11px/1 var(--vt-f);letter-spacing:.14em;opacity:.8;margin-left:12px}
.vt-menu i{font-size:1.15em;opacity:.55}.vt-menu .go i{font-size:1.1em;opacity:1}
.vt-foot{position:absolute;z-index:1;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));margin:0;text-align:center;
  font:600 11px/1.2 var(--vt-f);letter-spacing:.24em;text-transform:uppercase;color:var(--vt-grey);opacity:0;animation:vtUp .6s ease .3s forwards}
@keyframes vtUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

#titleScreen.setup h1.cw-wordmark,#titleScreen.hiring h1.cw-wordmark{width:clamp(130px,12vw,170px)}

/* Phones */
@media (max-width:520px){
  .vt-meta{margin-top:12px;font-size:10.5px;letter-spacing:.2em}
  .vt-menu{margin-top:20px}
  .vt-menu button{padding:0 14px}
  .vt-menu .go{min-height:52px}
}
/* Short screens held sideways: him on the left, the words on the right,
   his people going into the dark behind them */
@media (max-height:520px) and (min-aspect-ratio:13/10){
  .vt-copy{left:auto;right:max(16px,4vw);bottom:auto;top:50%;transform:translateY(-50%);width:min(46vw,400px)}
  .vt-foot{display:none}
  #villainTitle::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 40%,rgba(10,10,10,.92) 56%)}
}
@media (prefers-reduced-motion:reduce){
  .vt-art .vt-sharp,.vt-copy>*,.vt-foot{animation:none!important;opacity:1}
}