/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #7a7a7a;
  --line: #e8e8e8;
  --card: #f3f3f1;
  --accent: #111111;

  /* Type: a warm, low-contrast book serif in the spirit of Anthropic's serif
     (Tiempos family). Source Serif 4 is the closest free match. Mono: DM Mono. */
  --serif: "Source Serif 4", "Tiempos Headline", "Iowan Old Style", Georgia, serif;
  --display: var(--serif);
  --sans: "Source Serif 4", "Tiempos Text", "Iowan Old Style", Georgia, serif;
  --mono: "DM Mono", "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(20px, 3vw, 44px);
  --max: 1440px;
  --gap: clamp(12px, 1.4vw, 20px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --ink: #f2f2f2;
    --muted: #8f8f8f;
    --line: #262626;
    --card: #1a1a1a;
    --accent: #f2f2f2;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f0f;
  --ink: #f2f2f2;
  --muted: #8f8f8f;
  --line: #262626;
  --card: #1a1a1a;
  --accent: #f2f2f2;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  animation: page-in 0.5s ease both;
}

@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

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

img,
video {
  display: block;
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Header / nav
------------------------------------------------------------------ */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.brand span {
  color: var(--muted);
}

@media (max-width: 720px) {
  .brand span {
    display: none;
  }
  .nav {
    gap: 16px;
  }
}

.nav {
  display: flex;
  gap: 22px;
}

.nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}

/* ------------------------------------------------------------------
   Intro (home)
------------------------------------------------------------------ */
.intro {
  padding-top: clamp(24px, 5vw, 72px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.intro h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 4.3vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}

.intro h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0.02em;
}

.intro p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}

/* ------------------------------------------------------------------
   Work grid
------------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) var(--gap);
  padding-bottom: clamp(48px, 6vw, 96px);
}

@media (max-width: 720px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.card {
  display: block;
  color: inherit;
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card);
  border-radius: 2px;
}

.card-media img,
.card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media video {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card-media.is-playing video {
  opacity: 1;
}

.card-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
}

.card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.card-client {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Project page
------------------------------------------------------------------ */
.project-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px var(--gap);
  padding-top: clamp(8px, 2vw, 32px);
  padding-bottom: clamp(24px, 3vw, 40px);
  align-items: end;
}

@media (max-width: 860px) {
  .project-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.project-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.project-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.project-meta dt {
  color: var(--muted);
}

.project-meta dd {
  margin: 0;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--card);
  overflow: hidden;
  border-radius: 2px;
}

.hero video,
.hero iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px var(--gap);
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 64px);
}

@media (max-width: 860px) {
  .project-body {
    grid-template-columns: 1fr;
  }
}

.project-desc p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 58ch;
}

.project-desc p:last-child {
  margin-bottom: 0;
}

.credits {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.9;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-bottom: clamp(48px, 6vw, 96px);
}

@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.gallery-item {
  margin: 0;
}

.gallery-item.span-2 {
  grid-column: 1 / -1;
}

.gallery-media {
  background: var(--card);
  overflow: hidden;
  border-radius: 2px;
}

.gallery-media video,
.gallery-media img {
  width: 100%;
  height: auto;
}

.gallery-item figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding-top: 10px;
}

.project-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  padding-bottom: clamp(48px, 6vw, 96px);
}

.project-nav a {
  display: grid;
  gap: 6px;
}

.project-nav a:last-child {
  text-align: right;
}

.project-nav .label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.project-nav .title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.project-nav a:hover .title {
  color: var(--muted);
}

/* ------------------------------------------------------------------
   About
------------------------------------------------------------------ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px var(--gap);
  padding-top: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--card);
  overflow: hidden;
  border-radius: 2px;
}

.portrait img,
.portrait video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}

.about-text p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 56ch;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--gap);
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

.facts h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
}

/* ------------------------------------------------------------------
   Contact
------------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px var(--gap);
  padding-top: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.contact h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.contact-info p {
  margin: 0 0 12px;
  font-size: 17px;
  max-width: 40ch;
}

.contact-info .email {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.contact-info .email:hover {
  color: var(--muted);
  border-color: var(--muted);
}

.socials {
  display: flex;
  gap: 18px;
  margin-top: 28px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}

.socials a:hover {
  color: var(--ink);
}

.socials svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--ink);
}

.row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px var(--gap);
}

@media (max-width: 520px) {
  .row-2 {
    grid-template-columns: 1fr;
  }
}

.btn {
  justify-self: start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.form-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
  min-height: 1.5em;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--ink);
}

.site-footer .links {
  display: flex;
  gap: 20px;
}

/* ------------------------------------------------------------------
   Empty / not found
------------------------------------------------------------------ */
.notfound {
  padding: 80px 0 120px;
  font-family: var(--serif);
  font-size: 28px;
}

.notfound a {
  border-bottom: 1px solid currentColor;
}

/* ==================================================================
   FX — "the site is an After Effects comp" (see js/fx.js)
   Everything below is decorative and disabled under reduced motion.
================================================================== */

/* ---- keyframe cursor ---- */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor .card-media,
.has-cursor .portrait {
  cursor: none;
}

.has-cursor input,
.has-cursor textarea,
.has-cursor select {
  cursor: text;
}

#cur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
  mix-blend-mode: difference;
}

#cur.is-on {
  opacity: 1;
}

#cur.is-hidden {
  opacity: 0;
}

.cur-shape {
  display: block;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #fff;
  transform: rotate(45deg) scale(1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
}

/* over links: hollow "easy ease" keyframe, bigger */
#cur.is-hot .cur-shape {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #fff;
  transform: rotate(45deg) scale(1.9);
  border-radius: 40%;
}

#cur.is-down .cur-shape {
  transform: rotate(45deg) scale(0.7);
}

/* ---- scrub timecode tag on grid cards ---- */
.tc-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(17, 17, 17, 0.85);
  padding: 4px 7px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: transform;
}

.card-media.is-scrubbing .tc-tag {
  opacity: 1;
}

/* playhead line while scrubbing */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  pointer-events: none;
}

.card-media.is-scrubbing video {
  opacity: 1;
}

/* ---- text-animator headline entrance ---- */
.is-split .w {
  display: inline-block;
  animation: word-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 70ms + 80ms);
}

/* ---- rainbow on hover (home headline) ----
   The gradient is always painted behind the glyphs; the solid ink colour sits on
   top and fades to transparent on hover, so the rainbow blooms in smoothly.
   The fade is staggered per word so it washes across the line, and the gradient
   keeps flowing while the text fades back (.is-leaving) so nothing snaps. */
.intro h1 .w {
  /* padding + negative margin: enlarges the paint box so background-clip: text
     covers descenders (g, p) and ascenders, without changing layout */
  padding: 0.12em 0.06em 0.22em;
  margin: -0.12em -0.06em -0.22em;
  background-image: linear-gradient(
    90deg,
    #e0d4c8 0%, #ff644d 28%, #9450fd 62%, #e0d4c8 100%
  );
  background-size: 300% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  /* this timing applies when the hover ENDS (fade back to ink): 3x faster */
  transition: color 0.37s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i) * 15ms);
}

.intro h1 em .w {
  color: var(--muted);
}

.intro h1.is-hover .w {
  color: transparent;
  /* this timing applies when the hover STARTS (fade into the gradient) */
  transition: color 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i) * 45ms);
}

.intro h1.is-hover .w,
.intro h1.is-leaving .w {
  animation:
    word-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    rainbow 6s linear infinite;
  animation-delay: calc(var(--i) * 70ms + 80ms), calc(var(--i) * -0.4s);
}

@keyframes rainbow {
  to {
    background-position: 300% center;
  }
}

.intro h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

/* ---- AE layer selection on the About portrait ---- */
.portrait {
  position: relative;
  overflow: visible;
}

.portrait img,
.portrait video {
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* the selection box rotates with the layer, like in AE */
.portrait:hover img,
.portrait:hover video,
.portrait:hover .layer-box {
  transform: rotate(-2deg) scale(1.025);
}

.layer-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.2s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.portrait:hover .layer-box {
  opacity: 1;
}

.layer-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
}

.layer-box .h {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--ink);
  margin: -4px 0 0 -4px;
}

.h-tl { left: 0; top: 0; }
.h-t  { left: 50%; top: 0; }
.h-tr { left: 100%; top: 0; }
.h-l  { left: 0; top: 50%; }
.h-r  { left: 100%; top: 50%; }
.h-bl { left: 0; top: 100%; }
.h-b  { left: 50%; top: 100%; }
.h-br { left: 100%; top: 100%; }

.layer-box .anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.layer-box .anchor::before,
.layer-box .anchor::after {
  content: "";
  position: absolute;
  background: var(--ink);
}

.layer-box .anchor::before {
  left: -6px;
  right: -6px;
  top: 50%;
  height: 1px;
}

.layer-box .anchor::after {
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 1px;
}

.layer-name {
  position: absolute;
  left: 0;
  top: -22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--bg);
  padding: 2px 6px;
  border: 1px solid var(--ink);
}

/* ---- Send → Render button swap ---- */
.btn-swap {
  display: grid;
  overflow: hidden;
  line-height: 1.2;
}

.btn-swap > span {
  grid-area: 1 / 1;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.btn-swap > span:last-child {
  transform: translateY(120%);
  opacity: 0;
}

.btn:hover .btn-swap > span:first-child {
  transform: translateY(-120%);
  opacity: 0;
}

.btn:hover .btn-swap > span:last-child {
  transform: none;
  opacity: 1;
}

/* ---- form focus: a keyframe appears next to the label ---- */
.field label {
  position: relative;
  padding-left: 14px;
}

.field label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--ink);
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.field:focus-within label::before {
  transform: rotate(45deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .is-split .w { animation: none; }
}