/* dins.dev holding page. Colors, type and motion come from assets/tokens.css. */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-accent-soft);
}

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--motion-fast) var(--motion-ease);
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Layout: header, a vertically centered intro, and a footer whose top rule is
   the ground Ottie stands on. */
.page {
  --side: clamp(var(--space-4), 5vw, var(--space-7));
  --ottie-h: clamp(136px, 24vh, 216px);

  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: max(var(--side), env(safe-area-inset-left, 0px)) max(var(--side), env(safe-area-inset-right, 0px));
}

.header {
  padding-block: var(--space-6);
}

.lockup {
  display: block;
  width: auto;
  height: 32px;
}

/* Bottom padding keeps the text clear of Ottie and sets it slightly above the
   true center, which reads as centered. */
.intro {
  align-self: center;
  padding-block: var(--space-7) calc(var(--ottie-h) + var(--space-6));
}

.intro h1 {
  margin: 0 0 var(--space-5);
}

.intro p {
  max-width: 34ch;
  margin: 0;
}

.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5) max(var(--space-5), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-hairline);
}

.footer p {
  margin: 0;
}

/* Ottie's idle loop: an 8 by 3 sprite sheet, 24 frames held 4 ticks each at
   24 ticks a second (6 drawings a second, 4 seconds a loop). The feet sit 19 px
   above the bottom of each 390 px frame, so the box drops by that share to put
   them on the rule. */
.ottie {
  position: absolute;
  right: clamp(0px, 6vw, var(--space-8));
  bottom: calc(100% - var(--ottie-h) * 19 / 390);
  width: calc(var(--ottie-h) * 219 / 390);
  height: var(--ottie-h);
  background: url("/assets/ottie-idle.webp") 0 0 / 800% 300% no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 700ms var(--motion-ease) both;
    animation-delay: 60ms;
  }

  .reveal-2 {
    animation-delay: 150ms;
  }

  .reveal-3 {
    animation-delay: 240ms;
  }

  .ottie {
    animation:
      fade 700ms var(--motion-ease) 420ms both,
      ottie-col calc(8s / 6) steps(8, jump-none) infinite,
      ottie-row 4s steps(3, jump-none) infinite;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes ottie-col {
  to {
    background-position-x: 100%;
  }
}

@keyframes ottie-row {
  to {
    background-position-y: 100%;
  }
}