:root {
  --paper-blue: #62c9f7;
  --ink: #f7f5ed;
  --project-accent: #ffda0d;
  --edge: clamp(20px, 4vw, 66px);
  --content: 1180px;
  --futura: "Futura PT", "Jost", Futura, "Avenir Next", Avenir, "Century Gothic", sans-serif;
  --texture: url("assets/blue-paper-texture.webp");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--paper-blue);
  background-image: linear-gradient(rgba(24, 158, 235, .15), rgba(24, 158, 235, .15)), var(--texture);
  background-blend-mode: color, normal;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--futura);
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(6, 35, 49, .28);
}

body::before {
  position: fixed;
  z-index: 20;
  inset: 0;
  background: #58bff0;
  content: "";
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
}

body.is-ready::before { opacity: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.project-film-background,
.project-grain {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.project-film-matte { width: 100%; height: 100%; opacity: .68; object-fit: fill; mix-blend-mode: multiply; }

.project-film-background { z-index: 60; }

.project-grain {
  z-index: 200;
  background: rgba(255, 255, 255, .001);
  -webkit-backdrop-filter: saturate(1.3) contrast(1.018);
  backdrop-filter: saturate(1.3) contrast(1.018);
}

.project-grain::after {
  position: absolute;
  inset: 0;
  background: url("assets/s16-fine-grain-frame.webp") center / cover no-repeat;
  content: "";
  opacity: .22;
  mix-blend-mode: soft-light;
}

.project-header {
  position: fixed;
  z-index: 25;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: clamp(38px, calc(20px + 2.5vw), 72px) clamp(38px, calc(26px + 3vw), 96px);
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

.project-header a { pointer-events: auto; }
.project-header .brand {
  color: var(--project-accent);
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -.06em;
  line-height: .9;
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.project-header .brand:hover,
.project-header .brand:focus-visible { opacity: .72; transform: translateY(-2px); }
#project-page { position: relative; z-index: 2; }

.project-intro h1,
.project-year,
.project-logline,
.project-credit-line,
.festival-row strong,
.festival-row > span:not(.festival-index),
.festival-row small,
.project-ending a,
.project-video-fallback-play,
.project-video-fallback-label,
.project-footer {
  text-shadow: 0 2px 7px rgba(0, 0, 0, .62), 0 1px 2px rgba(0, 0, 0, .45);
}

.project-sheet { width: min(calc(100% - (2 * var(--edge))), var(--content)); margin: 0 auto; padding: clamp(110px, 14vh, 165px) 0 80px; }

.project-intro { max-width: 1000px; margin: 0 auto clamp(58px, 8vh, 92px); text-align: center; }
.project-intro h1 { margin: 0; font-size: clamp(52px, 6vw, 98px); font-weight: 400; line-height: .9; letter-spacing: .055em; text-transform: uppercase; }
.project-year { margin: 25px 0 0; font-size: clamp(16px, 1.25vw, 20px); }
.project-logline { max-width: 860px; margin: clamp(42px, 6vh, 70px) auto 0; font-size: clamp(19px, 1.65vw, 27px); line-height: 1.45; }
.project-credit-line { max-width: 1000px; margin: 27px auto 0; font-size: clamp(12px, .9vw, 15px); line-height: 1.6; }
.project-credit-line em { font-weight: 700; }
.project-credit-line span { margin: 0 5px; }

.project-poster { width: min(100%, 680px); margin: 0 auto; }
.project-poster img { height: auto; box-shadow: 0 3px 8px rgba(0, 0, 0, .16), 0 18px 40px rgba(0, 0, 0, .24); }

.project-video { width: min(100%, 1005px); margin: 40px auto 0; }
.project-intro + .project-video { margin-top: 0; }
.project-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #080808;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16), 0 18px 40px rgba(0, 0, 0, .24);
}
.project-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.project-video-fallback {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #090909;
}
.project-video-fallback::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .62));
  content: "";
  transition: background-color 280ms ease;
}
.project-video-fallback img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.16, 1, .3, 1); }
.project-video-fallback-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(58px, 6vw, 82px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  color: #fff;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1;
  padding-left: .16em;
  transform: translate(-50%, -50%);
  transition: color 240ms ease, background-color 240ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.project-video-fallback-label {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 2.5vw, 34px);
  bottom: clamp(16px, 2.2vw, 30px);
  color: #fff;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
}
.project-video-fallback:hover img,
.project-video-fallback:focus-visible img { transform: scale(1.018); }
.project-video-fallback:hover .project-video-fallback-play,
.project-video-fallback:focus-visible .project-video-fallback-play { color: #111; background: var(--project-accent); transform: translate(-50%, -50%) scale(1.07); }

.project-festivals { width: min(100%, 920px); margin: clamp(90px, 12vh, 150px) auto; }
.project-festivals h2 { margin: 0 0 28px; color: var(--project-accent); font-size: clamp(24px, 2.4vw, 38px); font-weight: 700; text-align: center; text-transform: uppercase; }
.festival-list { margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .7); list-style: none; }
.festival-row { display: grid; grid-template-columns: 34px 1.15fr 1.45fr auto; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.festival-index { color: var(--project-accent); font-size: 11px; font-weight: 700; }
.festival-row strong { font-size: clamp(16px, 1.35vw, 21px); }
.festival-row > span:not(.festival-index) { font-size: clamp(13px, 1vw, 16px); }
.festival-row small { font-size: 12px; font-weight: 700; }
.project-gallery { margin-top: clamp(85px, 11vh, 135px); }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: clamp(12px, 1.7vw, 24px); }
.gallery-image { grid-column: span 4; margin: 0; }
.gallery-image.gallery-wide { grid-column: span 6; }
.gallery-image.gallery-portrait { grid-column: span 3; }
.gallery-image img { width: 100%; height: clamp(190px, 24vw, 360px); object-fit: cover; box-shadow: 0 3px 7px rgba(0, 0, 0, .14), 0 11px 26px rgba(0, 0, 0, .2); }
.gallery-image.gallery-portrait img { height: clamp(240px, 31vw, 470px); }

.project-ending { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(75px, 10vh, 120px); }
.project-ending--top { margin-top: 26px; }
.project-ending--external { margin-top: 30px; }
.project-ending a {
  position: relative;
  padding: 12px 21px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.project-ending a:hover,
.project-ending a:focus-visible { border-color: rgba(255, 255, 255, .95); color: var(--project-accent); background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

.project-gallery--draggable .gallery-image {
  --drag-x: 0px;
  --drag-y: 0px;
  --hover-y: 0px;
  --item-scale: 1;
  position: relative;
  z-index: 1;
  user-select: none;
  touch-action: pan-y;
  will-change: transform;
}

.project-gallery--draggable .gallery-image.is-draggable { cursor: grab; }
.project-gallery--draggable .gallery-image.is-dragging {
  cursor: grabbing;
  transition: none;
}

.project-gallery--draggable .gallery-image img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.entrance { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); }
.project-poster.entrance { clip-path: inset(8% 0 8% 0); opacity: 0; transition: clip-path 800ms cubic-bezier(.22, 1, .36, 1), opacity 800ms ease; }
.is-ready .entrance { opacity: 1; transform: translateY(0); }
.is-ready .project-year { transition-delay: 70ms; }
.is-ready .project-ending--top { transition-delay: 140ms; }
.is-ready .project-logline { transition-delay: 210ms; }
.is-ready .project-credit-line { transition-delay: var(--credit-delay, 210ms); }
.is-ready .project-poster.entrance { clip-path: inset(0); transition-delay: 260ms; }

body[data-project="like-fog-on-a-cold-night"] .project-intro h1 {
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(42px, 5.2vw, 80px);
  line-height: .98;
}

body[data-project="tender-love-care"] .project-intro h1 {
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(38px, 5.1vw, 78px);
  line-height: .98;
}

body[data-project="like-fog-on-a-cold-night"] .project-poster,
body[data-project="vader-blackout"] .project-poster { width: min(100%, 623px); }

/* Reusable, relaxed stills layout. Enable with galleryLayout: "scattered". */
.project-gallery--scattered {
  width: min(100%, 1080px);
  margin: clamp(110px, 15vh, 190px) auto 0;
}

.project-gallery--scattered .gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 3vw, 42px);
  row-gap: clamp(75px, 13vh, 155px);
  align-items: start;
}

.project-gallery--scattered .gallery-image {
  grid-column: auto;
  margin: 0;
}

.project-gallery--scattered .gallery-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.project-gallery--scattered .gallery-image:nth-child(1) { grid-column: 1 / span 7; --item-rotation: -.65deg; }
.project-gallery--scattered .gallery-image:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(75px, 11vh, 135px); --item-rotation: .8deg; }
.project-gallery--scattered .gallery-image:nth-child(3) { grid-column: 2 / span 6; --item-rotation: .55deg; }
.project-gallery--scattered .gallery-image:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(85px, 13vh, 155px); --item-rotation: -.7deg; }
.project-gallery--scattered .gallery-image:nth-child(5) { grid-column: 3 / span 8; --item-rotation: .3deg; }
.project-gallery--scattered .gallery-image:nth-child(6) { grid-column: 8 / span 5; margin-top: clamp(70px, 10vh, 125px); --item-rotation: -.5deg; }

.reveal {
  --item-rotation: 0deg;
  --reveal-y: 24px;
  --drag-x: 0px;
  --drag-y: 0px;
  --hover-y: 0px;
  --item-scale: 1;
  opacity: 0;
  transform: translate3d(var(--drag-x), calc(var(--drag-y) + var(--reveal-y) + var(--hover-y)), 0) rotate(var(--item-rotation)) scale(var(--item-scale));
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms), transform 560ms cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms);
}
.reveal.is-visible { --reveal-y: 0px; opacity: 1; }

.project-footer { position: relative; z-index: 3; padding: 24px var(--edge); color: rgba(255, 255, 255, .78); text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.missing-project { min-height: 100svh; display: grid; place-items: center; margin: 0; font-size: 24px; }
.missing-project a { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 999px; color: var(--project-accent); }

@media (max-width: 800px) {
  body { background-attachment: scroll; }
  .project-sheet { padding-top: 120px; }
  .festival-row { grid-template-columns: 28px 1fr auto; gap: 10px; }
  .festival-row > span:not(.festival-index) { grid-column: 2 / -1; }
  .gallery-image,
  .gallery-image.gallery-wide,
  .gallery-image.gallery-portrait { grid-column: span 6; }
  .gallery-image img,
  .gallery-image.gallery-portrait img { height: 42vw; }

  .project-gallery--scattered { margin-top: clamp(75px, 11vh, 110px); }
  .project-gallery--scattered .gallery-grid { grid-template-columns: 1fr; row-gap: 52px; }
  .project-gallery--scattered .gallery-image:nth-child(n) {
    grid-column: 1;
    width: min(100%, 680px);
    margin: 0 auto;
    --item-rotation: 0deg;
  }
  .project-gallery--scattered .gallery-image img { height: auto; max-height: none; object-fit: contain; }
}

@media (max-width: 520px) {
  .project-intro h1 { font-size: 15vw; }
  .project-credit-line { max-width: 340px; }
  .gallery-image,
  .gallery-image.gallery-wide,
  .gallery-image.gallery-portrait { grid-column: 1 / -1; }
  .gallery-image img,
  .gallery-image.gallery-portrait img { height: auto; max-height: 70vh; object-fit: cover; }

  .project-gallery--scattered .gallery-image img { max-height: none; object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entrance,
  .project-poster.entrance,
  .reveal { --reveal-y: 0px; opacity: 1; clip-path: none; transition: none; }
}