/* ============ FONTS ============ */
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Regular.woff2') format('woff2'),
       url('fonts/Peace2020-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Medium.woff2') format('woff2'),
       url('fonts/Peace2020-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Semibold.woff2') format('woff2'),
       url('fonts/Peace2020-Semibold.woff')  format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Bold.woff2') format('woff2'),
       url('fonts/Peace2020-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Extrabold.woff2') format('woff2'),
       url('fonts/Peace2020-Extrabold.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peace 2020';
  src: url('fonts/Peace2020-Black.woff2') format('woff2'),
       url('fonts/Peace2020-Black.woff')  format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Candia 14';
  src: url('fonts/Candia 14.woff2') format('woff2'),
       url('fonts/Candia 14.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

html, body {
  background: #000;
  color: #fff;
  font-family: 'Peace 2020', Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.5px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Always show a vertical scrollbar on the document scroller.
   `overflow-y: scroll` forces the gutter; `!important` defends against
   later rules accidentally suppressing it. Firefox uses scrollbar-color
   for the thumb/track. */
html {
  overflow-y: scroll !important;
  scrollbar-color: #888 #111;
}

/* WebKit / Chromium (Chrome on Windows in particular): without an explicit
   ::-webkit-scrollbar rule the scrollbar can render as a near-invisible
   dark thumb on the site's black background. The rules are also attached
   to the body and the root scroller so we hit whichever element Chrome
   has decided owns the document scrollbar. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
:root::-webkit-scrollbar {
  width: 14px;
  background: #111;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
:root::-webkit-scrollbar-track {
  background: #111;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
:root::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 7px;
  border: 3px solid #111;
  min-height: 40px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
:root::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

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

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ============ HEADER ============ */
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

header.filter-active {
  background: #000;
}

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 14px 16px 14px;
}

.loc-name-short { display: none; }

/* ── Filter row (becomes a 2nd nav row when sticky on scroll) ── */
.header-filter {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  background: inherit;
}

header.filter-active .header-filter {
  max-height: 60px;
}

.filter-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  height: 50px;
}

.filter-chips::-webkit-scrollbar { display: none; }

/* ── In-page filter bar (above the grid, page-flow) ─────────── */
.page-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 10;
}

.page-filter-bar::-webkit-scrollbar { display: none; }

/* ── Filter buttons (shared by header-filter and page-filter-bar) */
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Peace 2020', Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1;
  color: #555;
  padding: 6px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.filter-btn:hover  { color: #ccc; border-color: #555; }

.filter-btn.active { color: #fff; border-color: #fff; }

.filter-btn .count {
  font-size: 10px;
  color: #444;
  margin-left: 5px;
  vertical-align: super;
  line-height: 1;
  transition: color 0.15s ease;
}

.filter-btn.active .count { color: #777; }

/* ── Grid filtering animations ──────────────────────────────── */
.project-card { transition: opacity 0.22s ease, transform 0.22s ease; }

.project-card.is-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  position: absolute !important;
  visibility: hidden;
}

.project-card.is-visible {
  animation: cardIn 0.28s ease both;
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Mobile header right zone ──────────────────────────────── */
.mobile-header-right {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  gap: 2px;
}

.mobile-play-btn { display: flex; }

.logo {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: 56px;
  width: auto;
  border-radius: 0;
  display: block;
}

@media (max-width: 520px) {
  .logo img { height: 44px; }
}

nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 20px;
  letter-spacing: -0.5px;
  height: 56px;
}

nav a {
  color: #888;
  transition: color 0.12s;
}

nav a:hover,
nav a.active {
  color: #fff;
}

/* ============ AVAILABILITY INDICATOR ============ */
.nav-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid #1c1c1c;
  line-height: 1;
}
.nav-availability-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ecb6e;
  box-shadow: 0 0 8px rgba(78, 203, 110, 0.55);
  flex-shrink: 0;
  animation: nav-availability-pulse 2.4s ease-in-out infinite;
}
.nav-availability-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4ecb6e;
  white-space: nowrap;
}
@keyframes nav-availability-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(78, 203, 110, 0.55); }
  50%      { opacity: 0.55; box-shadow: 0 0 4px rgba(78, 203, 110, 0.35); }
}

/* Status eyebrow (mobile drawer only). */
.nav-availability-status { display: none; }

.mobile-nav .nav-availability--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  gap: 8px;
}
.mobile-nav .nav-availability--mobile .nav-availability-status {
  display: block;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #585450;
}
.mobile-nav .nav-availability--mobile .nav-availability-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mobile-nav .nav-availability--mobile .nav-availability-dot {
  width: 8px;
  height: 8px;
}
.mobile-nav .nav-availability--mobile .nav-availability-label {
  font-size: 13px;
  letter-spacing: 0.22em;
}

/* ============ HAMBURGER ============ */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #888;
  margin: 5px 0;
  transition: background 0.12s, transform 0.2s ease, opacity 0.15s;
}

.menu-toggle:hover .bar { background: #fff; }

.menu-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg);  background: #fff; }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }

/* ============ MOBILE DRAWER NAV ============ */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 32px 32px 40px;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.open {
  transform: translateY(0);
}

.drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  padding: 8px;
  transition: color 0.12s;
}
.drawer-close:hover { color: #fff; }

.mobile-nav a {
  color: #666;
  font-size: 28px;
  letter-spacing: -0.5px;
  text-decoration: none;
  transition: color 0.12s;
  padding: 12px 0;
  display: block;
  text-align: center;
  width: 100%;
}

.mobile-nav a:hover,
.mobile-nav a.active { color: #fff; }

/* Backdrop */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.55);
}

.nav-backdrop.open { display: block; }

/* ============ REEL HERO ============ */
.reel-hero {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #000;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform, border-radius;
  pointer-events: none;
}

.reel-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.reel-spacer {
  height: 100vh;
}

body.home {
  background: #000;
}

/* ============ WORK INDEX ============ */
.work-grid {
  position: relative;
  z-index: 10;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
}

.project-card {
  display: block;
  position: relative;
}

.thumb {
  aspect-ratio: 4 / 5;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.18s;
}
.thumb img,
.thumb video { transform: scale(1.001); }

.thumb img,
.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.thumb::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}

.project-card:hover .thumb {
  opacity: 0.88;
}

.project-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}

.project-meta .title {
  color: #fff;
}

.project-meta .cat {
  color: #bbb;
  margin-left: 16px;
}

/* ============ PROJECT PAGE ============ */
/* Align hero image top with info.html .info-image (top: 96px from viewport).
   Header is 84px (56px min-height + 14px*2 padding); 12px padding-top puts
   the hero image at y=96px on initial load, matching info.html exactly. */
.hero {
  padding: 12px 8px 4px;
}

.hero-img {
  aspect-ratio: 16 / 9;
  background: #1f1f1f;
  border-radius: 12px;
}

.project-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  padding: 40px 16px 24px;
}

.project-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 24px 16px 64px;
}

.project-intro .desc p {
  margin-bottom: 1em;
  max-width: 52ch;
}

.project-intro .roles {
  color: #9a9a9a;
  font-family: 'Candia 14', "Courier New", Courier, monospace;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
}

.project-intro .roles h4 {
  color: #666;
  margin-bottom: 10px;
  font-weight: 400;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
}

.project-intro .roles ul {
  list-style: none;
  margin-bottom: 28px;
}

.project-intro .roles li {
  padding: 2px 0;
}

.media-row {
  display: grid;
  gap: 4px;
  padding: 0 4px 4px;
}

.media-row.one {
  grid-template-columns: 1fr;
}

.media-row.two {
  grid-template-columns: repeat(2, 1fr);
}

.media-row.three {
  grid-template-columns: repeat(3, 1fr);
}

.media-row .box {
  aspect-ratio: 4 / 3;
  background: #1f1f1f;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.media-row.three .box {
  aspect-ratio: 1 / 1;
}

.media-row .box img,
.media-row .box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.hero-img {
  overflow: hidden;
}

.hero-img img,
.hero-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Aperture page: body images size to natural aspect; hero stays locked 16:9 */
body.project-aperture .media-row .box {
  aspect-ratio: auto !important;
  height: auto;
}

body.project-aperture .media-row .box img,
body.project-aperture .media-row .box video {
  width: 100%;
  height: auto;
  object-fit: fill;
}

body.project-aperture .media-row.two {
  align-items: start;
}

.big-img {
  margin: 0 4px 4px;
  aspect-ratio: 16 / 9;
  background: #242424;
  border-radius: 12px;
}

.more-projects-label {
  color: #666;
  padding: 72px 16px 16px;
}

.more-projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 0 4px 4px;
}

/* ============ TEXT PAGES (Services / Info / Contact) ============ */
.page {
  padding: 120px 16px 120px;
}

.page h1 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-bottom: 48px;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 48px;
  row-gap: 0;
  max-width: 1400px;
}

.page-grid h2,
.page-grid > .content {
  border-top: 1px solid #2a2a2a;
  padding-top: 20px;
  padding-bottom: 40px;
}

.page-grid h2 {
  color: #666;
  font-weight: 400;
}

.page-grid .content p {
  margin-bottom: 1em;
  max-width: 62ch;
}

.page-grid .content ul {
  list-style: none;
}

.page-grid .content li {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.page-grid .content li .muted {
  color: #666;
  text-align: right;
}

.page-grid .content li a.muted {
  transition: color 0.12s;
}

.page-grid .content li a.muted:hover {
  color: #fff;
}

.contact-links a {
  display: block;
  padding: 10px 0;
  color: #fff;
  transition: color 0.12s;
}

.contact-links a:hover {
  color: #888;
}

/* ============ FOOTER ============ */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  color: #888;
  font-family: 'Candia 14', "Courier New", Courier, monospace;
  font-size: 14px;
  letter-spacing: 0;
  background: transparent;
  pointer-events: none;
  z-index: 40;
}

footer span {
  pointer-events: auto;
}

.footer-locations {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-locations .loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-locations .loc-clock {
  width: 18px;
  height: 18px;
  overflow: visible;
  color: #888;
  flex: none;
}

.footer-locations .loc-clock .clock-face {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.footer-locations .loc-clock .clock-hand {
  stroke: currentColor;
  stroke-linecap: round;
}

.footer-locations .loc-clock .clock-hour   { stroke-width: 1.4; }
.footer-locations .loc-clock .clock-minute { stroke-width: 1; }
.footer-locations .loc-clock .clock-second { stroke-width: 0.6; color: #bbb; }

.footer-locations .loc-clock .clock-center {
  fill: currentColor;
}

body {
  padding-bottom: 56px;
}

/* ============ MUSIC PLAYER ============ */
.music-player {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 56px;
}

.player-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 6px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
  text-decoration: none;
  font-family: 'Peace 2020', Helvetica, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  position: relative;
}

.player-btn:hover {
  color: #fff;
}

/* Desktop player buttons enlarged 110% */
.music-player:not(.music-player--mobile) .player-btn svg {
  transform: scale(1.1);
  transform-origin: center;
}

.player-btn svg {
  display: block;
  pointer-events: none;
}

/* Volume popup (vertical slider) */
.volume-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 6px;
  display: none;
  z-index: 60;
}

.player-volume.open .volume-popup {
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 80px;
  cursor: pointer;
  accent-color: #fff;
  background: transparent;
  margin: 0;
}

.mobile-nav .music-player--mobile .volume-popup {
  top: auto;
  bottom: calc(100% + 6px);
  background: rgba(20, 20, 20, 0.96);
  padding: 14px 8px;
}

.mobile-nav .music-player--mobile .volume-slider {
  height: 110px;
  width: 8px;
}

/* Mobile music player - lives inside .mobile-nav overlay */
.music-player--mobile {
  display: none;
}

.mobile-nav .music-player--mobile {
  display: flex;
  gap: 18px;
  margin-top: 48px;
  padding: 14px 22px;
  border: 2px solid #2a2a2a;
  border-radius: 999px;
}

.mobile-nav .music-player--mobile .player-btn {
  color: #888;
  padding: 12px 10px;
  min-width: 44px;
  min-height: 44px;
}

.mobile-nav .music-player--mobile .player-btn:hover,
.mobile-nav .music-player--mobile .player-btn:active {
  color: #fff;
}

/* ============ RESPONSIVE ============ */

/* Tablet: nav tightens */
@media (max-width: 900px) {
  nav { gap: 16px; }
}

/* Mobile breakpoint: drawer nav, mobile header layout */
@media (max-width: 768px) {
  /* Hide desktop player and nav */
  .music-player:not(.music-player--mobile) { display: none; }
  nav { display: none; }

  /* Show mobile right zone and hamburger */
  .mobile-header-right { display: flex; grid-column: 2; justify-self: end; }
  .menu-toggle { display: block; }

  /* On mobile, in-header filter chips stick under the header as a 2nd nav row */
  .header-filter { background: inherit; }

  /* Filter buttons: slightly stronger border on mobile, keep same size */
  .filter-btn {
    border-color: #333;
  }
  .filter-btn.active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Logo moves to left column */
  .header-grid {
    grid-template-columns: auto 1fr;
  }
  .logo {
    grid-column: 1;
    justify-self: start;
  }

  /* Work grid: 2 columns */
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  /* Layout adjustments */
  .project-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .more-projects { grid-template-columns: 1fr; }

  /* Footer: use short city name on mobile */
  .loc-name-full { display: none; }
  .loc-name-short { display: inline; }
}

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

/* ============ MICRO-INTERACTIONS ============ */
/* Elastic easing tokens. --e-elastic overshoots slightly for that blobby feel. */
:root {
  --e-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-quick:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect reduced-motion users — disable all bounce/breathing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Logo: gentle breathing — only on home, where the logo sits over the reel. */
@keyframes nsm-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.025) translateY(-1px); }
}
body.home .logo img {
  animation: nsm-breathe 6.5s var(--e-soft) infinite;
  transform-origin: center;
  will-change: transform;
}
.logo {
  display: inline-block;
  transition: transform 0.5s var(--e-elastic);
}
.logo:hover {
  transform: scale(1.05);
}

/* Nav links: blobby underline that springs in. */
nav a, .mobile-nav a {
  position: relative;
  transition: color 0.2s var(--e-quick), transform 0.4s var(--e-elastic);
}
nav a::after, .mobile-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--e-elastic);
}
/* Underline only appears on hover — never on the active category. */
nav a:hover::after, .mobile-nav a:hover::after { transform: scaleX(0.5); }
nav a:hover, .mobile-nav a:hover { transform: translateY(-1px); }

/* Filter chips: bouncy press + elastic hover. */
.filter-btn {
  transition:
    background-color 0.25s var(--e-quick),
    border-color   0.25s var(--e-quick),
    color          0.25s var(--e-quick),
    transform      0.45s var(--e-elastic);
  will-change: transform;
}
.filter-btn:hover { transform: scale(1.06); }
.filter-btn:active { transform: scale(0.94); }
.filter-btn.active { animation: nsm-pop 0.55s var(--e-elastic); }
@keyframes nsm-pop {
  0%   { transform: scale(0.92); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Project cards: lift, scale. The thumb media zooms inside its mask. */
.project-card {
  transition: transform 0.55s var(--e-elastic);
  will-change: transform;
  box-shadow: none;
  filter: none;
}
.project-card:hover { box-shadow: none; filter: none; }
.project-card .thumb,
.project-card .thumb img,
.project-card .thumb video,
img { box-shadow: none; filter: none; }
.project-card .thumb {
  overflow: hidden;
  border-radius: 12px;
  transition: border-radius 0.5s var(--e-elastic);
}
.project-card .thumb img,
.project-card .thumb video {
  transition: transform 0.7s var(--e-elastic), filter 0.4s var(--e-soft);
  will-change: transform;
}
.project-card:hover {
  transform: translateY(-4px);
}
.project-card:hover .thumb img,
.project-card:hover .thumb video {
  transform: scale(1.04);
}
.project-card:active { transform: translateY(-1px) scale(0.995); }

/* Project meta: title nudges on hover. */
.project-card .project-meta {
  transition: transform 0.45s var(--e-elastic);
}
.project-card:hover .project-meta { transform: translateY(2px); }

/* Player buttons + soundcloud link: subtle bounce. */
.player-btn {
  transition: transform 0.4s var(--e-elastic), opacity 0.2s var(--e-quick);
}
.player-btn:hover  { transform: scale(1.12); }
.player-btn:active { transform: scale(0.92); }

/* Hamburger / drawer-close: spring on hover. */
.menu-toggle, .drawer-close {
  transition: transform 0.4s var(--e-elastic);
}
.menu-toggle:hover, .drawer-close:hover { transform: scale(1.08); }

/* Hero media: micro-interaction removed on project pages — image stays static. */
.hero-img img, .hero-img video {
  transition: none;
  will-change: auto;
}
.hero-img:hover img, .hero-img:hover video { transform: none; }

/* Body media boxes: gentle zoom on hover. */
.media-row .box img, .media-row .box video {
  transition: transform 0.8s var(--e-soft);
  will-change: transform;
}
.media-row .box:hover img,
.media-row .box:hover video { transform: scale(1.025); }

/* Disciplines / contact list rows: nudge muted text on row hover. */
.page-grid .content li {
  transition: transform 0.4s var(--e-elastic);
}
.page-grid .content li:hover { transform: translateX(4px); }

/* Contact links: arrow-style hover slide. */
.contact-links a {
  transition: transform 0.45s var(--e-elastic), color 0.2s var(--e-quick);
}
.contact-links a:hover { transform: translateX(6px); }

/* Page transitions — sitewide fade-to-black then fade-in reveal. */
main { transition: opacity 280ms var(--e-quick); }
main.is-entering { opacity: 0; }

/* ============ PAGE FADE / LOADING OVERLAY ============ */
.page-fade-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-family: 'Candia 14', "Courier New", Courier, monospace;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--e-quick);
}
.page-fade-overlay.fading {
  opacity: 1;
  pointer-events: auto;
}
.page-fade-overlay .loading-icon {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 200ms linear;
  animation: pageFadeSpin 0.9s linear infinite;
}
.page-fade-overlay .loading-text {
  opacity: 0;
  transition: opacity 200ms linear;
}
.page-fade-overlay.is-loading .loading-icon,
.page-fade-overlay.is-loading .loading-text {
  opacity: 1;
}
@keyframes pageFadeSpin {
  to { transform: rotate(360deg); }
}

/* ============ SHOWREEL OVERLAY ============ */
.showreel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
  transition:
    background-color 0.45s var(--e-soft),
    visibility 0s linear 0.45s;
  padding: 24px;
}
.showreel-overlay.open {
  background: rgba(0, 0, 0, 1);
  pointer-events: auto;
  visibility: visible;
  transition:
    background-color 0.45s var(--e-soft),
    visibility 0s linear 0s;
}

.showreel-frame {
  position: relative;
  width: min(92vw, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.92);
  opacity: 0;
  transition:
    transform 0.6s var(--e-elastic),
    opacity 0.35s var(--e-soft);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.showreel-overlay.open .showreel-frame {
  transform: scale(1);
  opacity: 1;
}
.showreel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.showreel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transform: scale(0.8);
  transition:
    transform 0.5s var(--e-elastic),
    opacity 0.3s var(--e-soft),
    background-color 0.2s var(--e-quick);
}
.showreel-overlay.open .showreel-close {
  opacity: 1;
  transform: scale(1);
}
.showreel-close:hover { background: rgba(255,255,255,0.16); transform: scale(1.08); }
.showreel-close:active { transform: scale(0.92); }

@media (max-width: 520px) {
  .showreel-close { top: 12px; right: 12px; width: 36px; height: 36px; }
}