:root{
  --uiFont: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --techFont: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --bg: #0b0b0c;
  --fg: #f4f4f5;
  --muted: rgba(244,244,245,.72);
  --hairline: rgba(244,244,245,.16);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% 35%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), var(--bg);
  color:var(--fg);
  font-family: var(--uiFont);
  overflow:hidden;
}

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.contact-btn{
  pointer-events:auto;
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(244,244,245,.62);
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:none;
  cursor:pointer;
  transition: color .25s ease, transform .25s ease, opacity .25s ease;
  font-family: var(--techFont);
}

.contact-btn:hover{
  color: var(--fg);
}

.contact-btn:active{
  color: var(--fg);
}

.stage{
  height:100%;
  display:grid;
  place-items:center;
  padding:88px 20px 24px;
}

.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateY(8px) scale(.985);
  filter: blur(18px);
  opacity:0;
  transition:
    opacity 2.6s cubic-bezier(.2,.9,.2,1),
    filter 2.6s cubic-bezier(.2,.9,.2,1),
    transform 2.6s cubic-bezier(.2,.9,.2,1);
}


.logo{
  width:min(820px, 86vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.55));
  user-select:none;
  -webkit-user-drag:none;
}

.email-link{
  font-family: var(--techFont);
  position:absolute;
  inset:auto;
  opacity:0;
  transform: translateY(10px);
  filter: blur(10px);
  pointer-events:none;

  color:var(--fg);
  text-decoration:none;
  font-size:clamp(18px, 2.2vw, 28px);
  letter-spacing:.02em;

  transition:
    opacity .65s cubic-bezier(.2,.9,.2,1),
    transform .65s cubic-bezier(.2,.9,.2,1),
    filter .65s cubic-bezier(.2,.9,.2,1);
}

.email-link:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* visible states */
body.reveal .logo-wrap{
  opacity:1;
  filter: blur(0px);
  transform: translateY(0px) scale(1);
}

body.show-email .logo-wrap{
  opacity:0;
  filter: blur(12px);
  transform: translateY(-8px) scale(.99);
  pointer-events:none;
}

body.show-email .email-link{
  font-family: var(--techFont);
  opacity:1;
  transform: translateY(0px);
  filter: blur(0px);
  pointer-events:auto;
}

@media (prefers-reduced-motion: reduce){
  .logo-wrap, .email-link, .contact-btn{
  font-family: var(--techFont); transition:none !important; }
}


.caret{
  display:inline-block;
  margin-left:2px;
  animation: blink 1s steps(1,end) infinite;
}

@keyframes blink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}