/* Layer Eight's portal sign-in, over the Yard 14 seam's structure (signin.css): THE SHIFT. Basement ground,
   porcelain words, smoke for the quiet ones, gunmetal lines; the ember is emitted light only, one per view: here
   the line under what you type, brightening with each digit. Two masses offset, joined by a slab, stand behind the
   form as the ground's one shape. Switzer sets everything; digits in tabular figures with a plain zero. */
@font-face{font-family:"Switzer";src:url(/f/l8-switzer.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#0A0D12;--plate:#12161E;--steel:#8B97A8;--paper:#EAE6DC;--ash:#8B97A8;--melt:#E89B4B;--coral:#D7432F;--gun:#232A36}
html{background:var(--ink)}
/* the ground is the page's (html): body stays clear so the shift, behind it, shows */
body{font-family:"Switzer",system-ui,sans-serif;font-weight:400;background:transparent}
.top .word.l8{height:30px;width:auto;display:block}
h1{font:560 clamp(40px,11vw,64px)/.95 "Switzer",system-ui,sans-serif;letter-spacing:-.025em}
.for{color:var(--steel)}

/* the shift: two masses, the lower one stepped right, joined by a slab, at the value of a raised surface */
.shift{position:fixed;z-index:-1;right:-14vw;top:12vh;width:min(78vw,560px);aspect-ratio:206/280;pointer-events:none;opacity:0;animation:shiftin 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards}
.shift b{position:absolute;width:87.4%;height:56%;background:var(--plate);border:1px solid rgba(35,42,54,.9)}
.shift b:first-child{left:0;top:0}
.shift b:last-child{left:12.6%;top:44%;background:#0E1219;animation:step 1.1s cubic-bezier(.2,.7,.2,1) .25s backwards}
@keyframes shiftin{to{opacity:1}}
@keyframes step{from{transform:translateX(-14.4%)}to{transform:none}}

/* the line under the field: gunmetal at rest, the ember's light along it as it heats */
.bar::after{left:0;width:100%;transform:none;bottom:0;height:2px;background:var(--gun);-webkit-mask:none;mask:none;filter:none;animation:none}
.bar::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;height:2px;width:calc(var(--heat) * 80%);max-width:100%;background:var(--melt);
  box-shadow:0 0 18px 1px rgba(232,155,75,calc(var(--heat) * .55));transition:width .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.err .bar::before{background:var(--coral);box-shadow:0 0 16px 1px rgba(215,67,47,.5)}
.bar input[type=email]{font-family:"Switzer",system-ui,sans-serif;text-shadow:none}
.bar input::placeholder{color:rgba(234,230,220,.4)}
.go{background:var(--plate);border-color:var(--gun);-webkit-backdrop-filter:none;backdrop-filter:none}
.go:hover,.go:focus-visible,.me:hover .go,.me:focus-visible .go{border-color:var(--paper);color:var(--paper);box-shadow:0 0 14px rgba(232,155,75,.35)}
.me b{font-family:"Switzer",system-ui,sans-serif}
.cells span{font:450 clamp(30px,8.4vw,42px)/1 "Switzer",system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:none}
.cells span::after{background:var(--gun)}
.cells span.on::after{background:var(--melt);box-shadow:0 0 14px 1px rgba(232,155,75,.55)}
@keyframes cool{0%{color:#FFE2C2;text-shadow:0 0 18px rgba(232,155,75,.8)}100%{color:var(--paper);text-shadow:none}}
.ic{border-color:var(--gun)}
.ic:hover,.ic:focus-visible{color:var(--paper);border-color:var(--paper)}
.link:hover,.link:focus-visible{border-color:var(--melt)}
/* going through: the lower mass steps back home, the page follows it */
.head,.flash{display:none}
.cut .shift b:last-child{transition:transform .7s cubic-bezier(.65,0,.2,1);transform:translateX(-14.4%)}