/* Subset of Cascadia Code, renamed as OFL 1.1 requires of a modified font.
   Built by `just font` from a digest-pinned upstream release; the licence
   ships beside it as assets/titledev-mono-OFL.txt.

   THE PAGE USED TO NAME A NERD FONT NOBODY ELSE HAS. "CaskaydiaCove NFM" is
   installed on the machine this was designed on and on almost no visitor's,
   so the wordmark rendered in whatever monospace each browser defaulted to —
   a different typeface per visitor, invisible from the machine that built it.

   swap, not block: the wordmark is the page, and a blank one while a font
   loads is worse than one that reflows. */
@font-face {
  font-family: "TitleDev Mono";
  src: url("assets/titledev-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #11161c;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #11161c;
}

body {
  font-family: "TitleDev Mono", "Cascadia Code", "Cascadia Mono", ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #11161c;
}

.artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1672px;
  height: 941px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(var(--scene-scale, 1));
  overflow: hidden;
  isolation: isolate;
  background: #d9dce0;
}

.environment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.wordmark {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 92px;
  margin: 0;
  transform: translateX(-50%);
  color: #141b22;
  font-family: inherit;
  font-size: 62px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-rendering: geometricPrecision;
}

.login {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 192px;
  width: 246px;
  height: 58px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(248,249,250,.94);
  background: linear-gradient(180deg, rgba(36,41,47,.98), rgba(23,28,34,.995));
  box-shadow:
    0 3px 10px rgba(13,16,19,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
  font-family: inherit;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: .3px;
  text-decoration: none;
  outline: none;
  transition:
    width 230ms cubic-bezier(.2,.7,.2,1),
    border-color 230ms ease,
    box-shadow 260ms ease,
    transform 230ms ease,
    background 260ms ease;
  -webkit-tap-highlight-color: transparent;
}

.login-label {
  transform: translateX(0);
  transition: transform 230ms cubic-bezier(.2,.7,.2,1);
}

.login-arrow {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-7px);
  margin-left: 0;
  transition:
    width 230ms cubic-bezier(.2,.7,.2,1),
    opacity 160ms ease,
    transform 230ms cubic-bezier(.2,.7,.2,1),
    margin-left 230ms cubic-bezier(.2,.7,.2,1);
}

.login.is-engaged,
.login:hover,
.login:focus-visible {
  width: 280px;
  border-color: rgba(255, 224, 192, .74);
  background: linear-gradient(180deg, rgba(42,46,51,.99), rgba(26,30,35,.995));
  box-shadow:
    0 0 0 1px rgba(255, 214, 174, .22),
    0 0 18px rgba(255, 198, 142, .33),
    0 7px 18px rgba(14,16,18,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.login.is-engaged .login-label,
.login:hover .login-label,
.login:focus-visible .login-label {
  transform: translateX(-2px);
}

.login.is-engaged .login-arrow,
.login:hover .login-arrow,
.login:focus-visible .login-arrow {
  width: 24px;
  opacity: 1;
  transform: translateX(2px);
  margin-left: 7px;
}

.login:focus-visible {
  outline: 2px solid rgba(255, 233, 210, .8);
  outline-offset: 5px;
}

.contact-shadow {
  position: absolute;
  z-index: 8;
  left: 566px;
  top: 786px;
  width: 505px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(39, 29, 25, .37) 0%,
    rgba(45, 34, 28, .21) 43%,
    rgba(52, 39, 31, 0) 76%);
  filter: blur(6px);
  opacity: .74;
  transform: scaleX(1.02);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), opacity 700ms ease;
  pointer-events: none;
}

.artboard.is-engaged .contact-shadow {
  transform: scaleX(.88);
  opacity: .84;
}

.pile {
  position: absolute;
  z-index: 10;
  left: 555px;
  top: 290px;
  width: 520px;
  height: 521px;
  opacity: 0;
  will-change: transform;
  pointer-events: none;
}

.pile.is-ready { opacity: 1; }

.reflection-wrap {
  position: absolute;
  z-index: 7;
  left: 555px;
  top: 811px;
  width: 520px;
  height: 146px;
  overflow: hidden;
  opacity: .24;
  filter: blur(1.9px) saturate(.86);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.31) 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.31) 42%, transparent 100%);
  pointer-events: none;
}

.reflection-pile {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 521px;
  transform-origin: 0 0;
  transform: translateY(145.88px) scaleY(-.28);
}

.reflection-piece {
  filter: none !important;
}


.loose-sheet {
  position: absolute;
  border-radius: 3px 5px 2px 4px;
  background:
    linear-gradient(176deg, rgba(239,231,219,.99), rgba(221,207,188,.985) 58%, rgba(194,171,142,.98)),
    repeating-linear-gradient(96deg, rgba(84,61,37,.028) 0 1px, transparent 1px 5px);
  background-blend-mode: multiply;
  box-shadow:
    0 2px 3px rgba(45,31,22,.16),
    inset 0 1px 0 rgba(255,255,255,.34);
  opacity: .91;
  filter: saturate(.82) brightness(.97) contrast(.98);
  clip-path: polygon(0 10%, 3% 1%, 95% 0, 100% 16%, 98% 96%, 4% 100%, 1% 82%);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.loose-sheet.manila {
  background:
    linear-gradient(174deg, rgba(213,189,147,.99), rgba(190,158,111,.985) 62%, rgba(160,124,78,.98)),
    repeating-linear-gradient(94deg, rgba(79,55,31,.035) 0 1px, transparent 1px 6px);
  background-blend-mode: multiply;
}

.loose-sheet.photo-sheet {
  background: transparent;
  background-image: url("assets/stack.webp");
  background-size: 520px 521px;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  opacity: 1;
  filter: drop-shadow(0 2px 2px rgba(48,32,20,.14));
  clip-path: none;
}

.loose-sheet.has-clip::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 55%;
  width: 20px;
  height: 8px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(#313131, #151515);
  box-shadow: 0 1px 1px rgba(0,0,0,.24);
}

.reflection-piece.loose-sheet {
  box-shadow: none;
}

.paper-piece {
  position: absolute;
  background-image: url("assets/stack.webp");
  background-repeat: no-repeat;
  background-size: 520px 521px;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.paper-piece.depth-accent {
  filter: drop-shadow(0 1px .6px rgba(34, 24, 18, .18));
}

@media (prefers-reduced-motion: reduce) {
  .login,
  .login-label,
  .login-arrow,
  .contact-shadow {
    transition-duration: 120ms;
  }
}