/* ============ Morphing nav dropdown (every page) ============
   One shared container (.nd) holds three panels. Moving between triggers never
   closes and reopens it: it morphs its x, width and height to fit the next
   panel, and the content slides in the direction of travel with a blur
   crossfade. nav.js drives it.

   Loaded on every page as its own sheet on purpose. The header lives in both
   home.css and site.css, and two bugs this year came from one of those copies
   drifting, so the new component has exactly one home.

   Sizes are in rem, not the reference's px: this site's rem is fluid between
   1024 and 1440px, and the nav pill scales with it. px panels would sit out of
   proportion under a pill that had shrunk. */

.primary-nav{
  --nd-ease:cubic-bezier(.22,1,.36,1);
  --nd-morph:.5s;
  --nd-panel:rgba(12,12,12,.84);
  --nd-line:rgba(255,255,255,.08);
  --nd-hover:rgba(255,255,255,.065);
  --nd-muted:rgba(255,255,255,.6);
}

/* ---- triggers ---- */
.nav-trigger .lbl{ gap:.375rem }
.nav-trigger .chev{ width:.5rem; height:.3125rem; flex:none; transition:transform .35s var(--nd-ease) }
.nav-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.nav-trigger[aria-expanded="true"] .lbl,
.nav-trigger[data-current] .lbl{ opacity:1 }

/* ---- the shared container ---- */
.nd{
  --x:0px; --w:25rem; --h:18.75rem; --s:.97;
  position:absolute; top:calc(100% + .625rem); left:0; z-index:60;
  /* content-box so --w/--h are the panel's own size and the 1px border sits outside it */
  box-sizing:content-box; width:var(--w); height:var(--h);
  transform:translateX(var(--x)) scale(var(--s)); transform-origin:50% 0;
  opacity:0; pointer-events:none; overflow:hidden; color:#fff;
  border-radius:1rem; background:var(--nd-panel); border:1px solid var(--nd-line);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.2);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  transition:transform var(--nd-morph) var(--nd-ease), width var(--nd-morph) var(--nd-ease),
             height var(--nd-morph) var(--nd-ease), opacity .3s ease;
}
.nd.open{ --s:1; opacity:1; pointer-events:auto }
/* first open: appear in place (scale + fade) without animating position or size */
.nd.instant{ transition:opacity .3s ease, transform var(--nd-morph) var(--nd-ease) }
.nd.instant.snap{ transition:none }

/* ---- panels ---- */
.nd-panel{
  position:absolute; top:0; left:0;
  opacity:0; visibility:hidden; filter:blur(8px); transform:translateX(0);
  transition:opacity .26s ease, transform var(--nd-morph) var(--nd-ease), filter .4s ease,
             visibility 0s linear var(--nd-morph);
}
.nd-panel[data-state="exit-left"]{ transform:translateX(-56px) }
.nd-panel[data-state="exit-right"]{ transform:translateX(56px) }
.nd-panel[data-state="active"]{
  opacity:1; visibility:visible; filter:blur(0); transform:translateX(0);
  transition:opacity .36s ease .06s, transform var(--nd-morph) var(--nd-ease), filter .45s ease .04s, visibility 0s;
}
.nd-panel.snap{ transition:none !important }

/* ---- previews (every panel): a still with its clip on top ----
   .ld lands once the still has loaded, .on once the clip is actually playing,
   so neither pops in and a clip that never plays just leaves the still. */
.nd-shot{ position:absolute; inset:0; pointer-events:none }
.nd-shot img, .nd-shot video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease }
.nd-shot img.ld, .nd-shot video.on{ opacity:1 }

/* ---- Services and Studio: rows + a preview per row ---- */
.nd-svc{ width:41.5rem; height:22.375rem; display:grid; grid-template-columns:14.75rem 1fr }
.nd-studio{ width:35rem; height:13.5rem; display:grid; grid-template-columns:14.75rem 1fr }
.nd-list{ display:flex; flex-direction:column; padding:.5rem; gap:.125rem }
.nd-item{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 .75rem;
  border-radius:.625rem; transition:background .3s ease }
.nd-item.is-active{ background:var(--nd-hover) }
.nd-item strong{ font-size:.9375rem; font-weight:500; margin-bottom:.25rem }
.nd-item span{ font-size:.8125rem; line-height:1.42; color:var(--nd-muted) }
.nd-media{ position:relative; overflow:hidden; border-radius:0 .9375rem .9375rem 0; background:#0d0d0d }
/* soft fade where the image meets the list */
.nd-media::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:4.375rem; z-index:2;
  background:linear-gradient(to right, rgba(12,12,12,.55), rgba(12,12,12,0)) }
/* the row change (scale + blur crossfade) moves the still and its clip
   together. filter:none rather than blur(0) once settled, so a playing video
   isn't kept on a filtered layer. */
.nd-media .nd-shot{ opacity:0; transform:scale(1.06); filter:blur(10px);
  transition:opacity .6s ease, transform .9s var(--nd-ease), filter .6s ease }
.nd-media .nd-shot.is-active{ opacity:1; transform:scale(1); filter:none; z-index:1 }

/* ---- Work: two cards, each with its own preview playing ---- */
.nd-work{ width:27.875rem; height:19.25rem; padding:.4375rem; display:grid; grid-template-columns:1fr 1fr; gap:.4375rem }
.nd-card{ position:relative; overflow:hidden; isolation:isolate; border-radius:.625rem; background:#0d0d0d;
  display:flex; flex-direction:column; justify-content:flex-end; padding:.875rem }
.nd-card .nd-shot{ z-index:-2; transition:transform .9s var(--nd-ease), filter .5s ease }
.nd-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.35) 38%, rgba(8,8,8,0) 60%) }
.nd-card strong{ font-size:.96875rem; font-weight:500; margin-bottom:.3125rem }
.nd-card span{ font-size:.8125rem; line-height:1.42; color:var(--nd-muted) }
.nd-card:focus-visible .nd-shot{ transform:scale(1.05); filter:brightness(1.08) }
@media (hover:hover){ .nd-card:hover .nd-shot{ transform:scale(1.05); filter:brightness(1.08) } }

/* ---- reduced motion: the sheets already kill transitions, so drop the blurs too ---- */
@media (prefers-reduced-motion: reduce){
  .primary-nav{ --nd-morph:.01s }
  .nd-panel, .nd-media .nd-shot{ filter:none !important }
}