/* ============================================================
   circular-gallery.css — scoped styles for the WebGL gallery
   used on discography.html. The mount wraps the existing static
   grid; when JS upgrades to canvas the mount gains .is-cg-active.
   ============================================================ */

/* When ANY gallery is live, lock the page against accidental
   horizontal scroll caused by the 100vw full-bleed below. */
body:has(.cg-mount.is-cg-active) {
  overflow-x: hidden;
}

/* Centre the discography headings — eyebrow, big title, and
   the per-gallery sub-headings. Scoped to .discography so
   other sections keep their left-aligned editorial feel. */
.discography .section__eyebrow,
.discography .section__title,
.discography .disco__hint {
  text-align: center;
}

/* Quiet hint under the title — tells users the covers in the
   gallery are clickable. */
.discography .disco__hint {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-top: calc(var(--space-sm) * -1);
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}
/* Sub-heading: keep it only-as-wide-as-the-word so the
   animated underline doesn't span the whole page. fit-content
   + auto margins centres a block-level element to its
   content width. */
.discography .disco__sub-heading {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cg-mount {
  position: relative;
  width: 100%;
}

/* Full-bleed when the gallery is live so covers can drift in and
   out without hitting a hard edge inside the 1200px max-width
   container. Escapes .section__inner using the classic 50vw
   trick — safe under modern overflow:hidden body rules. */
.cg-mount.is-cg-active {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Soft fade-out at left/right edges — longer fade zone (18%
     each side) so a whole cover can drift out gracefully rather
     than being chopped mid-cover at the viewport edge. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 18%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 18%,
    #000 82%,
    transparent 100%
  );
}

/* In static state the inner .disco__grid keeps its own
   margin-bottom (var(--space-2xl)) — don't double up here. */

/* When the gallery is live: hide the grid and reserve viewport
   height for the canvas. The canvas is positioned absolutely
   inside the mount so the section flows naturally. */
.cg-mount.is-cg-active {
  height: clamp(420px, 60vh, 640px);
  /* Was --space-2xl (96px). Tighter so the EPs gallery sits
     much closer to the Albums gallery above it. */
  margin-bottom: var(--space-md);
  cursor: grab;
}

.cg-mount.is-cg-active.is-grabbing {
  cursor: grabbing;
}

/* While the WebGL gallery boots (is-cg-active is set up-front,
   before OGL even loads), lay the static grid out as a single
   horizontal row of covers that fills the reserved box. So opening
   the page shows covers in roughly the gallery's final position
   instead of the tall 3-column grid flashing then collapsing.
   Covers only — drop the text rows to match the gallery. */
.cg-mount.is-cg-active .disco__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 450ms var(--ease-out);
}

.cg-mount.is-cg-active .disco__card {
  flex: 0 0 auto;
  height: 78%;
}

.cg-mount.is-cg-active .disco__cover {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  margin-bottom: 0;
}

.cg-mount.is-cg-active .disco__card-title,
.cg-mount.is-cg-active .disco__card-year,
.cg-mount.is-cg-active .disco__card-link {
  display: none;
}

/* Once the canvas has faded in, fade the static row out. It stays
   in the DOM (SEO / a11y) but invisible behind the canvas — a clean
   cross-fade rather than a hard cut. cover[0] starts at the left
   edge in both layouts, so the covers line up through the fade. */
.cg-mount.is-cg-active.is-cg-ready .disco__grid {
  opacity: 0;
  pointer-events: none;
}

/* Phones: size the boot row's covers by width so ~3 show at once,
   matching the WebGL gallery's phone sizing (no 1→3 jump on load). */
@media (max-width: 699px) {
  .cg-mount.is-cg-active .disco__card {
    height: auto;
    width: 30vw;
  }
  .cg-mount.is-cg-active .disco__cover {
    height: auto;
    width: 100%;
  }
}

.cg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y; /* allow page scroll on vertical drag */
  /* Start hidden and ease in once the first frame is rendered
     (JS adds .is-cg-ready) so the gallery materialises smoothly
     instead of popping over the static grid. Safe to set 0 here:
     the canvas only ever exists when JS is running. */
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.cg-mount.is-cg-ready .cg-canvas {
  opacity: 1;
}

/* Below the JS activation floor (360px) the gallery is disabled —
   if a stray .is-cg-active flag survives, prefer the static grid. */
@media (max-width: 359px) {
  .cg-mount.is-cg-active {
    height: auto;
    cursor: default;
  }
  .cg-mount.is-cg-active .disco__grid {
    display: grid;
    height: auto;
    overflow: visible;
    opacity: 1;
    margin-bottom: var(--space-xl);
  }
  .cg-mount.is-cg-active .disco__card { height: auto; }
  .cg-mount.is-cg-active .disco__cover { height: auto; width: auto; }
  .cg-mount.is-cg-active .disco__card-title,
  .cg-mount.is-cg-active .disco__card-year,
  .cg-mount.is-cg-active .disco__card-link { display: block; }
  .cg-canvas { display: none; }
}