*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#fff;color:#000;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase;
}
.frame{
  position:relative;min-height:100%;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:0 clamp(16px,3vw,40px);
}
.bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:11px;letter-spacing:.14em;font-weight:500;
  padding:18px 16px;
}
.bar span{opacity:0;animation:fade .8s ease forwards .9s}
.rule{height:1px;background:#000;transform:scaleX(0);transform-origin:left;
  animation:draw 1.1s cubic-bezier(.7,0,.2,1) forwards}
.rule.r{transform-origin:right;animation-delay:.15s}
.vrule{position:absolute;top:0;bottom:0;width:1px;background:#000;
  transform:scaleY(0);transform-origin:top;animation:drawy 1.3s cubic-bezier(.7,0,.2,1) forwards .3s}
.vrule.l{left:clamp(16px,3vw,40px)}
.vrule.rt{right:clamp(16px,3vw,40px);transform-origin:bottom}
main{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:8vh 0;gap:clamp(28px,5vh,56px);position:relative;
}
.mark{
  font-weight:800;letter-spacing:-.055em;line-height:.82;
  font-size:clamp(64px,17vw,260px);
  clip-path:inset(0 0 100% 0);
  animation:reveal 1.1s cubic-bezier(.7,0,.2,1) forwards .45s;
}
.sub{font-size:11px;letter-spacing:.34em;font-weight:500;opacity:0;animation:fade .8s ease forwards 1.3s}
form{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;
  opacity:0;animation:fade .8s ease forwards 1.5s}
.field{display:flex;align-items:stretch;border:1px solid #000}
input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:16px 18px;font:inherit;font-size:13px;letter-spacing:.3em;color:#000;
}
input::placeholder{color:#000;opacity:.35;letter-spacing:.3em}
button{
  border:0;border-left:1px solid #000;background:#000;color:#fff;cursor:pointer;
  padding:0 22px;font:inherit;font-size:11px;letter-spacing:.24em;font-weight:600;text-transform:uppercase;
  transition:background .25s,color .25s;
}
button:hover,button:focus-visible{background:#fff;color:#000;outline:0}
.err{min-height:1em;font-size:10px;letter-spacing:.24em;text-align:center}
.err:not(:empty){animation:shake .4s ease}
a{color:inherit;text-decoration:none;border-bottom:1px solid #000;padding-bottom:2px}
a:hover{opacity:.5}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes drawy{to{transform:scaleY(1)}}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes fade{to{opacity:1}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;animation-delay:0s!important}
}