/* adam barnett — director of photography */
@import url("../fonts/fonts.css");

:root {
  --bg: #0a0a0b;
  --ink: #eae7e0;
  --dim: #8a867e;
  --line: rgba(234, 231, 224, 0.16);
  --signal: #c8452f;
  --sans: "Familjen Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* soft ease-out */
  --dur: 0.5s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
img, video { display: block; max-width: 100%; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

/* ---------- fullscreen background (home + project hero) ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}
.bg .layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.bg .layer.on { opacity: 1; }
.bg video, .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,11,0.78) 0%, rgba(10,10,11,0.30) 42%, rgba(10,10,11,0.05) 72%),
              linear-gradient(0deg, rgba(10,10,11,0.55) 0%, transparent 28%);
}

/* ---------- viewfinder frame + hud ---------- */

.vf { position: fixed; inset: 14px; z-index: 3; pointer-events: none; opacity: 0.4; }
.vf i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--line); border-color: var(--ink); opacity: 0.5; }
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud {
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) - 6px);
  z-index: 4;
  text-align: right;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hud .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 8px;
  vertical-align: 1px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hud.live .dot { opacity: 1; }

/* preloader: black film-grain frame + a white progress bar */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  transition: opacity 0.7s var(--ease);
}
.preloader.done { opacity: 0; pointer-events: none; }
.preloader .grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.preload-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 56vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.preload-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  transition: width 0.3s var(--ease);
}

/* representation credit, bottom-right (same sans as about + contact) */
.credit {
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) - 6px);
  z-index: 4;
  display: flex;
  align-items: baseline;   /* sit the mark on the text baseline */
  gap: 8px;
  font-size: 16px;
  color: var(--dim);
}
.credit .wpa { display: inline-flex; }
.credit .wpa img {
  height: 11px;
  width: auto;
  transform: translateY(3px);       /* baseline nudge */
  filter: brightness(0) invert(1);  /* white by default */
  transition: filter 0.28s var(--ease);
}
.credit .wpa:hover img { filter: brightness(0) invert(0.6); } /* grey on hover */

/* ---------- home ---------- */

.home-col {
  position: relative;
  z-index: auto; /* no isolated stacking context, so .role can blend with the bg video */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  max-width: 620px;
}

.masthead h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* single line: name in ink; role blends against the bg video so it stays legible
   over any frame (colour-difference effect) */
.masthead h1 .role {
  color: #b7b2a8;
  font-weight: 400;
  mix-blend-mode: difference;
}

.workblock {
  margin: auto 0; /* vertically center the projects block; masthead stays top, footer bottom */
}
/* sits inside the work block, one line below the list, same type as the titles */
.worklabel {
  margin-top: clamp(20px, 3.6vh, 34px);
  font-size: clamp(16px, 1.9vh, 19px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.28s var(--ease);
}
.worklabel:hover { color: var(--ink); }
/* the folder the user is currently in */
.worklabel[aria-expanded="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.worklabel:focus-visible { outline: 1px solid var(--dim); outline-offset: 4px; }

/* collapsible section body (reel + more-work lists) — accordion */
.collapse {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin-top 0.5s var(--ease);
}
.collapse.open {
  max-height: 1400px;
  opacity: 1;
  margin-top: clamp(10px, 1.8vh, 18px);
}
.morework { list-style: none; }
.morework li { line-height: 2.05; }
.morework li a {
  display: inline-block;
  font-size: clamp(16px, 1.9vh, 19px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--dim);
  transition: color 0.28s var(--ease);
}
.morework li a:hover,
.morework li a:focus-visible { color: var(--ink); }
.morework li .soon {
  font-size: clamp(15px, 1.7vh, 17px);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--dim);
  opacity: 0.75;
}

.projlist {
  list-style: none;
}
.projlist li { line-height: 2.05; }
.projlist a.proj {
  display: inline-block;
  font-size: clamp(16px, 1.9vh, 19px);
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.4;                          /* dimmed by default */
  transition: opacity 0.3s var(--ease);
}
.projlist a.proj.active { opacity: 1; }  /* the resting / highlighted project */
.projlist a.proj .m {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-left: 14px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.projlist:hover a.proj { opacity: 0.4; }
.projlist a.proj:hover, .projlist a.proj:focus-visible { opacity: 1; }
.projlist a.proj:hover .m, .projlist a.proj:focus-visible .m { opacity: 1; }

.homefoot { display: flex; gap: 28px; align-items: baseline; }
/* footer is pushed to the bottom by .workblock's auto margins;
   drop the column's bottom edge 6px so it lines up with the hud
   (which sits at calc(var(--pad) - 6px) from the bottom) */
.home-col { padding-bottom: calc(var(--pad) - 6px); }
.homefoot a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.homefoot a:hover { border-color: var(--ink); }

/* thumbnails only surface on touch layouts */
.projlist img.thumb { display: none; }

@media (hover: none), (max-width: 640px) {
  .projlist { padding: 34px 0; }
  .projlist li { line-height: 1.4; margin-bottom: 18px; }
  .projlist a.proj { display: flex; align-items: center; gap: 14px; opacity: 1 !important; }
  .projlist a.proj .m { opacity: 1; margin-left: 0; display: block; }
  .projlist a.proj .t { display: block; }
  .projlist img.thumb {
    display: block;
    width: 86px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .hud, .vf, .credit { display: none; }
}

/* ---------- project pages ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(var(--pad) * 0.6) var(--pad);
  mix-blend-mode: difference;
}
.topbar .brand { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.topbar .brand .role { font-weight: 400; opacity: 0.62; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.topbar nav a:hover { border-bottom: 1px solid currentColor; }

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
}
.hero .titleblock {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 2;
}
.hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 14em;
}
.hero .mono { margin-top: 8px; }

.pagebody {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: clamp(48px, 9vh, 110px) var(--pad);
}

.filmblock { max-width: 1240px; margin: 0 auto clamp(56px, 10vh, 120px); }
.filmblock .mono { margin-bottom: 14px; }
.filmblock video { width: 100%; background: #000; }
.filmblock .filmnote { margin-bottom: 0; font-style: italic; }

.stillsgrid {
  max-width: 1440px;
  margin: 0 auto;
  columns: 2;
  column-gap: 16px;
}
.stillsgrid img { width: 100%; height: auto; margin-bottom: 16px; }
.gridlabel { max-width: 1240px; margin: clamp(48px, 9vh, 100px) auto 14px; }
.gridlabel:first-child { margin-top: 0; }

.pagenav {
  max-width: 1240px;
  margin: clamp(56px, 10vh, 120px) auto 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-weight: 500;
}
.pagenav a:hover { color: var(--dim); }

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

/* ---------- about ---------- */

.about-col {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  max-width: 660px;
}
.about-col .content { margin: auto 0; padding: 40px 0; }
.about-col .bio {
  font-size: clamp(18px, 2.2vh, 22px);
  font-weight: 400;
  line-height: 1.55;
  max-width: 24em;
}
.contactblock { margin-top: clamp(36px, 6vh, 60px); display: grid; gap: 26px; }
.contactblock .mono { margin-bottom: 6px; white-space: nowrap; }
.contactblock p { font-size: 16px; line-height: 1.7; }
.contactblock a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.contactblock a:hover { border-color: var(--ink); }

/* social icons + back chevron (no underline, monochrome, dim → ink on hover) */
.socials { display: flex; align-items: center; gap: 20px; margin-top: 2px; }
.contactblock .socials a { border: none; padding: 0; display: inline-flex; color: var(--dim); transition: color 0.28s var(--ease); }
.contactblock .socials a:hover { color: var(--ink); }
.socials .ico { height: 21px; width: auto; display: block; }
.socials .ico-imdb { height: 15px; }
.homefoot a.backlink { border: none; padding: 0; display: inline-flex; color: var(--dim); transition: color 0.28s var(--ease); }
.homefoot a.backlink:hover { color: var(--ink); }
.backlink .ico { height: 20px; width: auto; display: block; }

/* ---------- motion: soft transitions between states ---------- */

/* cross-document navigation — a gentle cross-fade between pages */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
}

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

@media (prefers-reduced-motion: no-preference) {
  /* entrance for above-the-fold content */
  .masthead,
  .homefoot,
  .hero .titleblock {
    animation: rise 0.6s var(--ease) both;
  }
  .hud { animation: fade 0.9s var(--ease) 0.2s both; }

  /* about page reveals section by section */
  .about-col .bio,
  .about-col .contactblock > div {
    animation: rise 0.6s var(--ease) both;
  }
  .about-col .bio { animation-delay: 0.06s; }
  .about-col .contactblock > div:nth-child(1) { animation-delay: 0.20s; }
  .about-col .contactblock > div:nth-child(2) { animation-delay: 0.32s; }
  .about-col .contactblock > div:nth-child(3) { animation-delay: 0.44s; }

  /* staggered reveal of the project list, then the label */
  .projlist li { animation: rise 0.55s var(--ease) both; }
  .projlist li:nth-child(1) { animation-delay: 0.05s; }
  .projlist li:nth-child(2) { animation-delay: 0.10s; }
  .projlist li:nth-child(3) { animation-delay: 0.15s; }
  .projlist li:nth-child(4) { animation-delay: 0.20s; }
  .projlist li:nth-child(5) { animation-delay: 0.25s; }
  .projlist li:nth-child(6) { animation-delay: 0.30s; }
  .projlist li:nth-child(7) { animation-delay: 0.35s; }
  .projlist li:nth-child(8) { animation-delay: 0.40s; }
  .worklabel { animation: rise 0.55s var(--ease) 0.48s both; }

  /* project pages: reveal each section on load (fallback) */
  .pagebody > * { animation: rise 0.6s var(--ease) both; }
}

/* where supported, drive the project-page reveals by scroll position instead */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pagebody > * {
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

/* ---------- motion sensitivity ---------- */

@media (prefers-reduced-motion: reduce) {
  .bg .layer { transition: none; }
  .bg video { display: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}