/* ==========================================================================
   Hannah Brausen — Portfolio
   ========================================================================== */

:root {
  --ink: #111;
  --muted: #8a8a8a;
  --line: #e6e6e6;
  --bg: #fff;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs: 14px;
  --lh: 1.3;

  --pad: 32px;          /* page side gutter */
  --col: 290px;         /* left offset of the text column (desktop) */
  --header-h: 112px;
  --info-top: calc(var(--header-h) + 88px);  /* where the photo starts (leaves a band for the name) */
  --name-overlap: 26px;                      /* how far the name dips behind the photo */
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }

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

p, dl, dd { margin: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* nav lines up with the top of the logo */
  height: var(--header-h);
  padding: 12px var(--pad) 0;
}

.site-name { display: block; }
.site-logo {
  height: 88px;
  width: auto;
  transition: opacity .2s ease;
}
.site-name:hover .site-logo { opacity: .55; }

.site-nav { display: flex; gap: 14px; }
.site-nav a { color: var(--muted); }
.site-nav a:hover,
.site-nav a.is-active { color: var(--ink); }

/* --------------------------------------------------------------------------
   Views — Home (Info + Work on one page) or Lab
   -------------------------------------------------------------------------- */

.view { display: none; }
body[data-view="home"] .view--info,
body[data-view="home"] .view--work,
body[data-view="lab"]  .view--lab { display: block; animation: fade .5s ease both; }

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

/* --------------------------------------------------------------------------
   Background blobs (Info only)
   -------------------------------------------------------------------------- */

.blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
body[data-view="home"] .blobs,
body[data-view="lab"] .blobs { opacity: 1; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.blob--1 {
  width: 520px; height: 520px;
  right: -140px; top: 8%;
  background: radial-gradient(circle, rgba(140,140,140,.55), rgba(140,140,140,0) 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.blob--2 {
  width: 460px; height: 460px;
  left: 52%; top: 30%;
  background: radial-gradient(circle, rgba(214,170,160,.45), rgba(214,170,160,0) 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.blob--3 {
  width: 620px; height: 620px;
  left: 18%; bottom: -220px;
  background: radial-gradient(circle, rgba(180,180,175,.4), rgba(180,180,175,0) 65%);
  animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(-120px, 90px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(110px, -80px) scale(.9); } }
@keyframes drift3 { to { transform: translate(140px, -60px) scale(1.15); } }

/* --------------------------------------------------------------------------
   Info — photo + bio scroll with the page, above the fixed header, name and links
   -------------------------------------------------------------------------- */

.view--info {
  padding: var(--info-top) var(--pad) 0 var(--col);
}

.info-cols {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 440px);
  column-gap: 48px;
  align-items: start;
}

.info__photo { margin: 0; }
.info__photo > * {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;  /* keep the face in frame when cropping */
}

.info { max-width: 440px; }
/* text starts below the name; the photo overlaps it */
.info-cols .info { margin-top: calc(var(--name-overlap) + 24px); }
.info__tagline { color: var(--muted); margin-bottom: 4px; }  /* same style as the "Current" label */
.info__lead { margin-bottom: 26px; }

.info__list dt { color: var(--muted); margin-bottom: 4px; }
.info__list dd { margin-bottom: 22px; }
.info__list dd a {
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, .25);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.info__list dd a:hover { color: var(--muted); text-decoration-color: currentColor; }

.info__links {
  position: fixed;       /* stays put at the bottom of the screen */
  left: var(--col);
  bottom: 28px;
  z-index: 5;
  display: flex;
  gap: 22px;
}
.info__links a { color: var(--muted); }
.info__links a::after { content: " ›"; }
.info__links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Scrolling name — fixed in place behind the photo and bio, loops right to left
   -------------------------------------------------------------------------- */

.marquee {
  --size: clamp(47px, 6.77vw, 108px);
  position: fixed;
  left: 0;
  right: 0;
  /* the bottom of the capitals dips --name-overlap behind the top of the photo */
  top: calc(var(--info-top) + var(--name-overlap) - var(--size) * .866);
  z-index: 5;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-size: var(--size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.marquee__track {
  display: inline-flex;
  animation: marquee 40s linear infinite;
}
.marquee__item { padding-right: .45em; }

/* the track holds 4 copies; moving it by half loops seamlessly */
@keyframes marquee { to { transform: translateX(-50%); } }

/* photo and text sit in front of the name, header and links as they scroll */
.info-cols { position: relative; z-index: 20; }

/* --------------------------------------------------------------------------
   Work
   -------------------------------------------------------------------------- */

.view--work {
  position: relative;
  z-index: 20;           /* above the bio and the header */
  pointer-events: none;  /* empty space lets clicks reach the nav and bio… */
  padding: 160px var(--pad) 120px;
}

.project {
  --h: 186px;
  --indent: 0%;
  margin-bottom: 140px;
}
.project.h-s { --h: 150px; }
.project.h-m { --h: 186px; }
.project.h-l { --h: 300px; }

.project__media > *,
.project__caption { pointer-events: auto; }  /* …but images and captions are clickable */

.project__media {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-left: var(--indent);
  margin-right: calc(var(--pad) * -1);  /* rows that are too wide bleed off the screen edge */
  padding-right: var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.project__media::-webkit-scrollbar { display: none; }

.project__media > * {
  flex: 0 0 auto;
  height: var(--h);
  width: auto;
}
.project__media img { object-fit: cover; }
.project__media .spacer { width: calc(var(--h) * .9); }

/* Video stills — click to open the Vimeo player overlay */
.project.project--video,
.project.project--photos { --h: 240px; }  /* row height for the video stills and photos */
.video-thumb {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s ease;
}
.video-thumb:hover img { opacity: .85; }
.video-thumb:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Photo thumbnails — click to see them large in the overlay */
.photo-thumb {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.photo-thumb img,
.photo-thumb video {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity .25s ease;
}
.photo-thumb:hover img,
.photo-thumb:hover video { opacity: .85; }
.photo-thumb:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Placeholder image — delete once real images are in */
.ph {
  aspect-ratio: var(--ar, 4/3);
  background: var(--tone, #ddd);
}

.project__caption { width: fit-content; margin-top: 10px; color: var(--muted); }
.project__caption span { margin-right: 6px; color: var(--ink); }

/* Blur-in reveal */
.reveal > .project__media > * {
  filter: blur(14px);
  opacity: 0;
  transform: translateY(8px);
  transition: filter .9s ease, opacity .9s ease, transform .9s ease;
}
.reveal.is-in > .project__media > * {
  filter: blur(0);
  opacity: 1;
  transform: none;
}
.reveal.is-in > .project__media > *:nth-child(2) { transition-delay: .06s; }
.reveal.is-in > .project__media > *:nth-child(3) { transition-delay: .12s; }
.reveal.is-in > .project__media > *:nth-child(4) { transition-delay: .18s; }
.reveal.is-in > .project__media > *:nth-child(5) { transition-delay: .24s; }
.reveal.is-in > .project__media > *:nth-child(6) { transition-delay: .30s; }

/* --------------------------------------------------------------------------
   Video overlay
   -------------------------------------------------------------------------- */

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(12, 12, 12, .92); }

.lightbox__frame {
  width: min(90vw, calc(82vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* photos: the frame shrinks to the photo instead of a 16:9 box */
.lightbox.is-photo .lightbox__frame { width: auto; aspect-ratio: auto; background: none; }
.lightbox.is-photo .lightbox__frame img,
.lightbox.is-photo .lightbox__frame video {
  display: block;
  max-width: 86vw;
  max-height: 86vh;
  width: auto;
  height: auto;
}

.lightbox__prev,
.lightbox__next {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px 16px;
  border: 0;
  background: none;
  color: #fff;
  font: 300 40px/1 var(--font);
  cursor: pointer;
  opacity: .7;
}
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
.lightbox.has-nav .lightbox__prev,
.lightbox.has-nav .lightbox__next { display: block; }
.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #fff;
  font: 300 32px/1 var(--font);
  cursor: pointer;
  opacity: .8;
}
.lightbox__close:hover { opacity: 1; }

/* the pencil cursor sits under the overlay, so show the normal cursor there */
.has-pencil .lightbox,
.has-pencil .lightbox * { cursor: auto !important; }
.has-pencil .lightbox__close,
.has-pencil .lightbox__prev,
.has-pencil .lightbox__next { cursor: pointer !important; }

/* --------------------------------------------------------------------------
   Lab
   -------------------------------------------------------------------------- */

.view--lab {
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 18px) var(--pad) 28px var(--col);
}
body[data-view="lab"] .view--lab { display: flex; flex-direction: column; }

.lab__intro { max-width: 440px; }

.lab__grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-width: 900px;
}
.lab__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease;
}
.lab__card i { font-style: normal; color: var(--muted); font-size: 12px; }
.lab__card:hover { color: var(--ink); border-color: #cfcfcf; background: rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --col: var(--pad); }
  .info-cols { grid-template-columns: 1fr; row-gap: 24px; }
  .info__photo { width: 320px; max-width: 100%; }
  .info-cols .info { margin-top: 0; }

  /* single column: text scrolls past the links, so they sit on a soft fade above it */
  .info__links {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 36px var(--col) 24px;
    background: linear-gradient(to top, var(--bg) 55%, rgba(255,255,255,0));
  }
}

@media (max-width: 600px) {
  :root { --pad: 16px; --header-h: 108px; --info-top: calc(var(--header-h) + 40px); --name-overlap: -10px; }

  .view--work { padding-top: 80px; }
  .project { margin-bottom: 80px; }
  .project__media { padding-left: 0; }
  .project.h-s { --h: 120px; }
  .project.h-m { --h: 150px; }
  .project.h-l { --h: 220px; }
  .project.project--video,
  .project.project--photos { --h: 176px; }
  .project__media { pointer-events: auto; }

  .info__links { flex-wrap: wrap; gap: 14px 20px; }
  .blob { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .marquee__track { animation: none; }
  .reveal > .project__media > * { filter: none; opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Pencil cursor (added by js/main.js on mouse/trackpad devices only)
   -------------------------------------------------------------------------- */

.has-pencil,
.has-pencil * { cursor: none !important; }

.pencil-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

.pencil-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fdc52b;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease;
}
.pencil-dot.is-visible { opacity: 1; }
.pencil-dot.is-link {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}