/* 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}
/* The picture in five layers, back to front: the back row with the dark
   above it, each row in front of that, then him. Every layer shows the same
   picture, a band of it masked to its people (brand-source/title-army/
   layers.py writes the masks and the block below), so with all five in it
   is the picture as it was, to the pixel. */
.vt-art .vt-l{position:absolute;background:url('brand/title/villain-wide.webp') no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* layers.py: begin */
.vt-art .vt-r4{left:0%;top:0%;width:100%;height:28.5156%;background-size:100% 350.6849%;background-position:0% 0%;-webkit-mask-image:url('brand/title/mask-rank4.webp');mask-image:url('brand/title/mask-rank4.webp')}
.vt-art .vt-r3{left:0%;top:11.9792%;width:100%;height:31.7708%;background-size:100% 314.7541%;background-position:0% 17.5573%;-webkit-mask-image:url('brand/title/mask-rank3.webp');mask-image:url('brand/title/mask-rank3.webp')}
.vt-art .vt-r2{left:0%;top:24.5443%;width:100%;height:46.4844%;background-size:100% 215.1261%;background-position:0% 45.8637%;-webkit-mask-image:url('brand/title/mask-rank2.webp');mask-image:url('brand/title/mask-rank2.webp')}
.vt-art .vt-r1{left:0%;top:42.9688%;width:100%;height:57.0312%;background-size:100% 175.3425%;background-position:0% 100%;-webkit-mask-image:url('brand/title/mask-rank1.webp');mask-image:url('brand/title/mask-rank1.webp')}
.vt-art .vt-v{left:31.1012%;top:36.6536%;width:37.7232%;height:63.3464%;background-size:265.0888% 157.8623%;background-position:49.9403% 100%;-webkit-mask-image:url('brand/title/mask-villain.webp');mask-image:url('brand/title/mask-villain.webp');transform-origin:49.4083% 32.5797%}
/* layers.py: end */

/* 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-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)}

/* The intro: him, out of the dark; then his people a row at a time, from
   the row beside him to the back, each rising a little into place; then the
   name, the line under it and the buttons rising in one after another.
   It waits for the picture: title-frame.js swaps .vt-wait for .vt-in once
   the picture and its masks are ready to draw (if that never comes, the
   hold runs out and everything shows). He holds back a moment, while the
   page starts building the 3D city (game3d.js). A click or a key skips to
   the end (.vt-done). Everything here runs on the compositor (opacity,
   translate, scale: no filters), so the page's own work does not hold it up;
   the rises are on `translate`, so a button's own press (transform) still
   works. */
#villainTitle.vt-wait :is(.vt-l,.vt-wm,.vt-meta,.vt-menu button,.vt-foot){animation:vtHold 4s backwards}
.vt-in .vt-v{animation:vtHim 1.1s cubic-bezier(.22,1,.36,1) .15s both}
.vt-in .vt-r1,.vt-in .vt-r2,.vt-in .vt-r3,.vt-in .vt-r4{animation:vtRank .7s cubic-bezier(.22,1,.36,1) both}
.vt-in .vt-r1{animation-delay:.52s}
.vt-in .vt-r2{animation-delay:.72s}
.vt-in .vt-r3{animation-delay:.92s}
.vt-in .vt-r4{animation-delay:1.12s}
.vt-in .vt-wm{animation:vtRise 1s cubic-bezier(.16,1,.3,1) 1.4s both}
.vt-in .vt-meta{animation:vtUp .8s cubic-bezier(.16,1,.3,1) 1.6s both}
.vt-in .vt-menu button{animation:vtUp .8s cubic-bezier(.16,1,.3,1) both}
.vt-in .vt-menu button:nth-child(1){animation-delay:1.7s}
.vt-in .vt-menu button:nth-child(2){animation-delay:1.78s}
.vt-in .vt-menu button:nth-child(3){animation-delay:1.86s}
.vt-in .vt-foot{animation:vtUp .8s cubic-bezier(.16,1,.3,1) 2s both}
#villainTitle.vt-done *{animation:none!important}
@keyframes vtHold{from,to{opacity:0}}
@keyframes vtHim{0%{opacity:0;scale:1.06}100%{opacity:1;scale:1}}
@keyframes vtRank{0%{opacity:0;translate:0 calc(var(--vt-s,.6) * 30px)}100%{opacity:1;translate:0 0}}
@keyframes vtUp{0%{opacity:0;translate:0 22px}100%{opacity:1;translate:0 0}}
@keyframes vtRise{0%{opacity:0;translate:0 40px;scale:.96}100%{opacity:1;translate:0 0;scale:1}}

#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-in :is(.vt-l,.vt-wm,.vt-meta,.vt-menu button,.vt-foot){animation:none!important}
}