@font-face {
  font-family: "Source Code Pro";
  src: url("assets/source-code-pro-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --gold-stops: #e1c79f 0%, #d4b68a 32%, #b99464 68%, #99764d 100%;
  --reveal-time: 7.5s;
  --pulse-time: 15s;
  --write-time: 5s;
  --gild-time: 1.4s;
  --erase-time: 2.5s;
  --erase-start: calc(var(--write-time) + var(--gild-time));
  --name-start: calc(var(--erase-start) + var(--erase-time));
  --name-form-time: 1.46s;
  --name-gild-start: calc(var(--name-start) + var(--name-form-time));
  --intro-fade-start: calc(var(--name-gild-start) + var(--gild-time));
  --intro-end: calc(var(--intro-fade-start) + var(--name-gild-start));
  color-scheme: dark;
  background: #000;
  color: #d8b66f;
  font-family: "Source Code Pro", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; }
body { min-height: 100vh; min-height: 100svh; }

.site-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: max(1.5rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
}

.wallet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.75rem 1.1rem;
  border: 1px solid #80663e;
  border-radius: 3px;
  background: #080704;
  color: #d6b780;
  font: 400 0.75rem/1.3 "Source Code Pro", ui-monospace, monospace;
  letter-spacing: 0.025em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.wallet-label { display: inline-block; min-width: 19ch; text-align: center; }
.wallet-icon { flex: none; opacity: 0.8; }
.wallet-button:focus-visible { outline: 2px solid #e1c79f; outline-offset: 5px; }
.wallet-button[data-activated="true"], .wallet-button:focus-visible {
  border-color: #c8a46b;
  color: #e1c79f;
  background: #100d07;
}
@media (hover: hover) and (pointer: fine) {
  .wallet-button:hover { border-color: #c8a46b; color: #e1c79f; background: #100d07; }
}

main {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: max(6rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(6rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.identity {
  display: grid;
  width: min(50vw, 55svh);
  container-type: inline-size;
  justify-items: center;
  text-align: center;
}

.symbol {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  /* Full opacity is held throughout TECH's gilding, with no change in scale. */
  animation: symbol-reveal var(--name-gild-start) ease-in-out both,
    symbol-fade var(--name-gild-start) ease-in-out var(--intro-fade-start) forwards,
    pulse var(--pulse-time) ease-in-out var(--intro-end) infinite;
}

.wordmark-stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 16cqw;
  margin-top: 2cqw;
}

.name, .message {
  grid-area: 1 / 1;
  margin: 0;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  background-image: linear-gradient(180deg, var(--gold-stops));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.message {
  width: max-content;
  font-size: 4.3cqw;
  line-height: 1.5;
  letter-spacing: 0.13em;
  transform: translateX(0.065em);
  animation: emerge 1.8s ease-in-out both,
    typewrite var(--write-time) steps(26, end) both,
    gild var(--gild-time) ease-in-out var(--write-time) both,
    typeerase var(--erase-time) steps(26, end) var(--erase-start) forwards;
}

.name {
  font-size: 14cqw;
  line-height: 1.1;
  display: flex;
  gap: 0.38em;
  letter-spacing: 0;
  text-indent: 0;
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}
.name {
  opacity: 0;
  animation: emerge var(--gild-time) ease-in-out var(--name-start) forwards,
    gild var(--gild-time) ease-in-out var(--name-gild-start) both,
    name-settle 1.2s ease-in-out var(--intro-fade-start) forwards;
}
.name span {
  display: inline-block;
  text-indent: 0;
  opacity: 0;
  animation: letter-form 1.1s ease-out var(--name-start) both;
}
.name span:nth-child(2) { animation-delay: calc(var(--name-start) + 0.12s); }
.name span:nth-child(3) { animation-delay: calc(var(--name-start) + 0.24s); }
.name span:nth-child(4) { animation-delay: calc(var(--name-start) + 0.36s); }

/* WebKit does not propagate a parent's text clipping through transformed children. */
.name span {
  background-image: linear-gradient(180deg, var(--gold-stops));
  background-clip: text;
  -webkit-background-clip: text;
}

.preparing :is(.symbol, .name, .name span, .message),
.paused :is(.symbol, .name, .name span, .message) { animation-play-state: paused; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Available to assistive technology; only keyboard focus reveals these controls. */
.assistive-control {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  font: 0.875rem/1.5 "Source Code Pro", ui-monospace, monospace;
}
.assistive-control:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip-path: none;
  border: 1px solid #d8b66f;
  border-radius: 3px;
  background: #000;
  color: #e1c79f;
  outline: 2px solid #e1c79f;
  outline-offset: 4px;
}
.motion-control:focus-visible { top: 5rem; }
#main-content:focus { outline: none; }
[hidden] { display: none !important; }

.motion-stopped :is(.symbol, .name, .name span, .message) { animation: none; }
.motion-stopped :is(.symbol, .name) { opacity: 0.8; }
.motion-stopped .name span { opacity: 1; }
.motion-stopped .message { visibility: hidden; }

@keyframes emerge { from { opacity: 0; } to { opacity: 1; } }
@keyframes symbol-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes symbol-fade { from { opacity: 1; } to { opacity: 0.1; } }
@keyframes pulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.8; } }
@keyframes typewrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes typeerase { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes name-settle { from { opacity: 1; } to { opacity: 0.8; } }
@keyframes letter-form { from { opacity: 0; filter: blur(0.12em); } to { opacity: 1; filter: blur(0); } }
@keyframes gild {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.22) drop-shadow(0 0 0.18em rgb(255 224 132 / 52%)); }
}

@media (max-aspect-ratio: 4 / 5) { .identity { width: min(86vw, 47svh); } }
@media (max-width: 480px) {
  .site-header { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0 1rem; }
  .wallet-button { font-size: 0.6875rem; padding: 0.7rem 0.85rem; gap: 0.6rem; }
}
@media (max-height: 480px) and (orientation: landscape) {
  main { padding-top: 5rem; padding-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .symbol, .name, .name span, .message { animation: none; }
  .symbol, .name { opacity: 0.8; }
  .name span { opacity: 1; }
  .message { visibility: hidden; }
  .wallet-button { transition: none; }
  .motion-control { display: none; }
}
@media (forced-colors: active) {
  .message, .name span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
  .wallet-button { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .wallet-button:focus-visible, .assistive-control:focus-visible { outline-color: Highlight; }
}