@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --bg: #070707;
  --ink: #ececec;
  --ink-2: rgba(236, 236, 236, 0.6);
  --ink-3: rgba(236, 236, 236, 0.38);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font: 400 17px/1.5 "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: #ececec; color: #070707; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
h1, p { margin: 0; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 6px; border-radius: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: #000; }
.skip:focus { top: 12px; }

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; }

/* cursor */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  .cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 100; transition: opacity 250ms; }
  .cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #fff; mix-blend-mode: difference; transition: opacity 150ms; }
  .cursor-ring {
    width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22); background: transparent;
    transition: width 450ms var(--ease), height 450ms var(--ease), margin 450ms var(--ease), background-color 250ms, border-color 250ms;
  }
  .cursor-label { font: 600 11.5px/1 "Mona Sans", sans-serif; font-style: normal; font-stretch: 112%; color: #070707; opacity: 0; transition: opacity 150ms; }
  .cursor.is-link .cursor-ring { width: 50px; height: 50px; margin: -25px 0 0 -25px; border-color: rgba(255, 255, 255, 0.6); }
  .cursor.is-label .cursor-ring { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: #ececec; border-color: #ececec; }
  .cursor.is-label .cursor-label { opacity: 1; transition-delay: 100ms; }
  .cursor.is-label .cursor-dot, .cursor.is-link .cursor-dot { opacity: 0; }
  .cursor.is-down .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: #fff; transition-duration: 160ms; }
  .cursor.is-hidden { opacity: 0; }
}

/* header */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--gutter);
}
.mark { font-size: 18px; font-weight: 620; font-stretch: 115%; letter-spacing: -0.035em; }
.btn {
  position: relative; display: inline-flex; align-items: center;
  height: 40px; padding: 0 18px; border-radius: 999px; overflow: hidden;
  background: #ececec; color: #070707; font-weight: 560; font-size: 14px;
  transition: transform 100ms;
}
.btn span { position: relative; display: block; line-height: 40px; pointer-events: none; transition: transform 560ms var(--ease); }
.btn span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.btn:hover span { transform: translateY(-100%); }
.btn:active { transform: scale(0.97); }

/* journey: one tall scroll track, one pinned viewport, scenes fly toward you */
.journey { position: relative; height: 520vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gutter);
  pointer-events: none; will-change: transform, opacity, filter;
}
.scene.live { pointer-events: auto; }
.end-anchor { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; }

.title {
  font-weight: 330; font-size: min(240px, 19vw); line-height: 0.9; letter-spacing: -0.055em;
  font-stretch: 108%;
}
.title .line { display: block; overflow: hidden; padding: 0.04em 0.06em 0.14em; margin-bottom: -0.14em; }
.ch { display: inline-block; }
.title .ch { transform: translateY(110%); }
.ready .title .ch { transform: none; transition: transform 1400ms var(--ease); transition-delay: calc(var(--i) * 70ms + 500ms); }
.sub { font-size: 19px; font-weight: 420; color: var(--ink-2); letter-spacing: -0.005em; }
.sub-hero { margin-top: 26px; opacity: 0; transform: translateY(10px); }
.ready .sub-hero { opacity: 1; transform: none; transition: opacity 1200ms var(--ease) 1300ms, transform 1200ms var(--ease) 1300ms; }

.big {
  font-weight: 340; font-size: min(124px, 8.6vw); line-height: 0.98; letter-spacing: -0.05em;
}

.scene-contact .sub { margin-bottom: 26px; }
.email-text {
  display: block; font-size: min(150px, 10.4vw); font-weight: 330; letter-spacing: -0.055em; line-height: 1;
  white-space: nowrap; transition: font-stretch 700ms var(--ease), font-weight 700ms var(--ease);
}
.email:hover .email-text, .email:focus-visible .email-text { font-stretch: 112%; font-weight: 400; }
.email-state { margin-top: 26px; font-size: 14px; color: var(--ink-3); }

.after { position: relative; padding: 46vh var(--gutter) 0; overflow: hidden; }
.after-row { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: var(--ink-3); }
.after-row a:hover { color: var(--ink); }
.link { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; transition: background-size 480ms var(--ease), color 180ms; }
.link:hover { background-size: 100% 1px; background-position: 0 100%; }
.giant {
  font-size: 31vw; font-weight: 280; line-height: 0.74; letter-spacing: -0.065em;
  margin: 18px 0 0 -0.06em; white-space: nowrap; user-select: none;
}

/* hud */
.hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter) 26px; font-size: 13px; color: var(--ink-3);
}
.ticks { display: flex; gap: 6px; pointer-events: auto; }
.tick { position: relative; width: 34px; height: 24px; }
.tick::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,0.18); }
.tick i { position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: var(--ink); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.hint {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; transition: opacity 600ms;
}
.hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(var(--ink-3), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hint.gone { opacity: 0; }

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .bar { height: 60px; }
  .title { font-size: 24vw; }
  .sub { font-size: 16px; }
  .big { font-size: 13.6vw; line-height: 1; }
  .email-text { font-size: 12.6vw; letter-spacing: -0.06em; }
  .after-row a[href^="mailto"] { display: none; }
  .hud { grid-template-columns: 1fr; justify-items: center; padding-bottom: 20px; }
  .hud-l { display: none; }
  .tick { width: 24px; }
  .after { padding-top: 34vh; }
}

@media (max-height: 520px) {
  .hint { display: none; }
  .bar { height: 56px; }
  .title { font-size: min(19vw, 30vh); }
  .big { font-size: min(8.6vw, 17vh); }
  .email-text { font-size: min(10.4vw, 19vh); }
  .sub-hero { margin-top: 14px; }
  .hud { padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .title .ch, .sub-hero { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hint::after { animation: none; }
}