/* =====================================================================
   Letterbox Music: shadow-puppet navigation
   Shared by every page. Markup lives in each page as <nav class="snav">.
   The PNGs are never altered: the warm light is a separate soft layer
   sitting BEHIND each transparent image, so the silhouettes stay dark.
   ===================================================================== */

.snav{
  /* Starting point: the homepage wordmark gold (--gold: #c79c52) and its
     lighter companion (--gold-light: #e3c69a). */
  --snav-gold: 199,156,82;
  --snav-gold-light: 240,214,166;

  --snav-w: clamp(62px, 10.5vh, 92px);           /* displayed width of a 460x228 frame */
  --snav-h: calc(var(--snav-w) * 228 / 460);     /* height, keeps the 2:1 source ratio */
  --snav-gap: clamp(8px, 2.3vh, 20px);
  --snav-left: clamp(10px, 1.4vw, 22px);

  --snav-rest: .2;      /* backlight at rest: barely there */
  --snav-lit: .9;       /* backlight on hover / keyboard focus */

  position: fixed;
  left: var(--snav-left);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--snav-gap);
  margin: 0;
  padding: 0;
  pointer-events: none;            /* only the icons themselves catch the mouse */
}

/* Horizontal room each page leaves for the column (used by page rules below). */
:root{ --snav-gutter: calc(clamp(10px, 1.4vw, 22px) + clamp(62px, 10.5vh, 92px) + 18px); }

.snav-item{
  position: relative;
  display: block;
  width: var(--snav-w);
  height: var(--snav-h);
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateX(var(--snav-dx, 0px));   /* tiny, irregular drift */
  cursor: pointer;
}
/* Puppets hung at slightly different points, not a ruled sidebar. */
.snav-item:nth-child(2){ --snav-dx:  5px; }
.snav-item:nth-child(3){ --snav-dx: -3px; }
.snav-item:nth-child(4){ --snav-dx:  7px; }
.snav-item:nth-child(5){ --snav-dx:  1px; }
.snav-item:nth-child(6){ --snav-dx: -4px; }
.snav-item:nth-child(7){ --snav-dx:  4px; }

/* ---- the backlight: a soft, diffused pool of light behind the image ---- */
.snav-glow{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--snav-gw, 90%);
  height: var(--snav-gh, 120%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(var(--snav-gold-light), .95) 0%,
              rgba(var(--snav-gold), .55) 45%,
              rgba(var(--snav-gold), .16) 75%,
              rgba(var(--snav-gold), 0) 100%);
  filter: blur(5px);
  opacity: var(--snav-rest);
  transition: opacity 1.3s ease;              /* slow, natural fade when the mouse leaves */
  pointer-events: none;
  z-index: 0;
}
.snav-item[aria-current="page"] .snav-glow{ opacity: .34; }
.snav-item.is-lit .snav-glow,
.snav-item:focus-visible .snav-glow{
  opacity: var(--snav-lit);
  transition: opacity .55s ease;              /* gentle brighten */
}

/* Light-pool shapes sized to what each silhouette actually occupies. */
.snav-art     { --snav-gw: 78%;  --snav-gh: 128%; }
.snav-history { --snav-gw: 72%;  --snav-gh: 128%; }
.snav-music   { --snav-gw: 100%; --snav-gh: 112%; }
.snav-apps    { --snav-gw: 100%; --snav-gh: 78%;  }
.snav-zines   { --snav-gw: 100%; --snav-gh: 118%; }
.snav-friends { --snav-gw: 104%; --snav-gh: 118%; }

/* ---- fixed-size frame box: all six frames stacked, no layout shift ---- */
.snav-frames{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.snav-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  transition: none;                /* frame steps are hard cuts, like stop-motion */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.snav-frame.is-on{ opacity: 1; }
/* Returning to rest: frame 1 sits underneath, the held last frame fades away. */
.snav-frames.is-returning .snav-frame{ transition: opacity .55s ease; }

/* ---- Home: the Letterbox stamp ---- */
.snav-home{
  height: calc(var(--snav-w) * .62 * 112 / 128);
}
.snav-home .snav-frames{
  left: 50%;
  right: auto;
  width: calc(var(--snav-w) * .62);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 60%;
  transition: transform 1.1s cubic-bezier(.3,.7,.3,1);
}
.snav-home .snav-glow{ --snav-gw: 92%; --snav-gh: 150%; }
.snav-home.is-lit .snav-frames,
.snav-home:focus-visible .snav-frames{
  transform: translateX(-50%) rotate(-4deg) translateY(-1px);
}

/* Keyboard users still need to see where they are; mouse users never see this. */
.snav-item:focus{ outline: none; }
.snav-item:focus-visible{
  outline: 1px dotted rgba(var(--snav-gold), .7);
  outline-offset: 5px;
}

/* ---- page-specific room, wide screens untouched ---------------------- */
@media (min-width: 761px){
  /* Home: the painting bar is centred in a 1400px stage. On screens too
     narrow to leave a free margin, pad both sides equally so the bar stays
     centred and never sits under the icons (the bar's own hover/drag
     handlers would otherwise lose the pointer at its left edge). */
  body:has(> .snav[data-page="home"]) .stage{
    padding-inline: max(clamp(16px, 4vw, 40px), calc(var(--snav-gutter) - max(0px, (100vw - 1400px) / 2)));
  }
  /* History: 1100px timeline, padded symmetrically so the crack spine
     stays aligned with the centre of the two columns. The left-hand cards
     carry a 38px margin that pushes them out past their column on mid-size
     screens, so that is added to the room left for the icons. */
  body:has(> .snav[data-page="history"]) .timeline{
    padding-inline: max(22px, calc(var(--snav-gutter) + 38px - max(0px, (100vw - 1100px) / 2)));
  }
  /* Projects: 1060px main column. */
  body:has(> .snav[data-page="projects"]) main{
    padding-inline: max(24px, calc(var(--snav-gutter) - max(0px, (100vw - 1060px) / 2)));
  }
}

/* ---- small screens: a quiet row above the artwork, nothing floating over it ---- */
@media (max-width: 760px){
  .snav{
    --snav-w: 46px;
    --snav-gap: 6px;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 14px 12px 0;
    pointer-events: auto;
  }
  .snav-item{ --snav-dx: 0px; }
}
@media (max-width: 360px){
  .snav{ --snav-w: 40px; --snav-gap: 4px; }
}

/* ---- reduced motion: no frame animation, no tilt; the light still answers ---- */
@media (prefers-reduced-motion: reduce){
  .snav-home .snav-frames,
  .snav-frames.is-returning .snav-frame{ transition: none; }
  .snav-home.is-lit .snav-frames,
  .snav-home:focus-visible .snav-frames{ transform: translateX(-50%); }
}