/* albmth.dev */

:root {
  color-scheme: light dark;

  --bg: #f7f7f5;
  --text: #1c1c1b;
  --muted: #6d6d69;
  --faint: #8c8c87;
  --line: rgb(28 28 27 / 0.1);
  --media: #e9e9e6;
  --ring: rgb(0 0 0 / 0.06);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;

  --gutter: clamp(20px, 5vw, 48px);
  --width: 920px;
  --measure: 600px;
  --radius: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0f;
    --text: #ececea;
    --muted: #96969a;
    --faint: #6c6c72;
    --line: rgb(255 255 255 / 0.09);
    --media: #1a1a1c;
    --ring: rgb(255 255 255 / 0.07);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-1) / 1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.page {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) var(--gutter) 48px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-block: -10px;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

/* Home: a short list of project names. */

.projects {
  --preview-h: 44px;
  --op-w: 8px;
  --preview-gap: 6px;

  max-width: var(--measure);
  /* Room for Gremlin's preview, which floats below its row and must never reflow the page. */
  margin: clamp(40px, 8vw, 88px) 0 calc(var(--preview-h) + var(--preview-gap));
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.projects li {
  border-bottom: 1px solid var(--line);
}

.projects a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

.projects h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
}

.projects .arrow {
  color: var(--faint);
  transition: transform 0.2s var(--ease), color 0.15s;
}

.projects a:hover .arrow,
.projects a.is-open .arrow {
  color: var(--text);
  transform: translateX(3px);
}

.projects a[target]:hover .arrow {
  transform: translate(2px, -2px);
}

/*
 * Gremlin's preview: photo + clip -> result, one row at a common height, each panel at its own aspect ratio.
 * Every slot keeps its space from the start; the clip and the result fade in as the sequence reaches them.
 */
.preview {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  /* The gap is part of the link, so moving from the row onto the preview keeps it open. */
  padding-top: var(--preview-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0s 0.2s;
}

.projects a.is-open .preview {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0s;
}

.preview video,
.preview img {
  display: block;
  flex: none;
  width: auto;
  height: var(--preview-h);
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--media);
  outline: 1px solid var(--ring);
  outline-offset: -1px;
}

.preview .clip {
  aspect-ratio: 498 / 324;
}

.preview .photo {
  aspect-ratio: 434 / 692;
}

.preview .result {
  aspect-ratio: 786 / 512;
}

.preview .op {
  flex: none;
  width: var(--op-w);
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}

.preview .plus,
.preview .clip,
.preview .then,
.preview .result {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.preview:is([data-step="2"], [data-step="3"]) :is(.plus, .clip),
.preview[data-step="3"] :is(.then, .result) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}