/* ============================================================
   PER SONUM — Through Sound
   ============================================================ */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030303;
  font-family: 'Cinzel', 'Times New Roman', serif;
}

canvas { display: block; }

/* ============================================================
   INTRO — water + gold ring
   ============================================================ */

#intro {
  position: fixed;
  inset: 0;
  z-index: 10;
}

#intro.gone { display: none; }

#water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Circular hit-area inside the ring */
#enter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.enter-text {
  display: inline-block;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vmin, 1.7rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* balance the tracking */
  color: #f3dfb0;
  text-shadow:
    0 0 8px  rgba(255, 200, 110, 0.55),
    0 0 26px rgba(255, 160, 60, 0.35),
    0 0 60px rgba(255, 140, 40, 0.20);
  animation: beckon 3.4s ease-in-out infinite;
  user-select: none;
}

@keyframes beckon {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 1.0;  }
}

/* Once clicked, the text is swallowed by the ripple */
#intro.rippling .enter-text {
  animation: swallow 0.9s ease-out forwards;
}

@keyframes swallow {
  from { opacity: 1;   filter: blur(0);      transform: scale(1); }
  to   { opacity: 0;   filter: blur(6px);    transform: scale(1.25); }
}

#intro.rippling #enter { cursor: default; pointer-events: none; }

/* ============================================================
   SCENE — Per Sonum, revealed beneath
   ============================================================ */

#scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, #0a0906 0%, #050505 55%, #020204 100%);
  pointer-events: none; /* inert until revealed */
}

body.revealed #scene { pointer-events: auto; }

#scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- the artwork IS the menu ---------- */

.menu-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.menu-bg img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  will-change: transform;
}
#scene.has-art .menu-bg img { display: block; }

/* the artwork carries its own title and labels — hide the HTML ones
   and turn the nav anchors into invisible hotspots over the painted text */
#scene.has-art .title-block { display: none; }
#scene.has-art .nav-item {
  color: transparent;
  text-shadow: none;
}
#scene.has-art .nav-item span::before,
#scene.has-art .nav-item span::after { display: none; }

/* soft halo that wakes the painted label on hover */
#scene.has-art .nav-item::after {
  content: '';
  position: absolute;
  inset: -18% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 216, 140, 0.22), rgba(255, 190, 100, 0.08) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#scene.has-art .nav-item:hover::after,
#scene.has-art .nav-item:focus-visible::after { opacity: 1; }

.scene-content {
  position: absolute;
  inset: 0;
}

/* ---------- central title ---------- */

.title-block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  text-align: center;
  pointer-events: none;
}

.title-block h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(2rem, 6.2vmin, 4.2rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #f0d9a8;
  text-shadow:
    0 0 12px rgba(255, 205, 120, 0.45),
    0 0 40px rgba(255, 165, 60, 0.25),
    0 0 90px rgba(255, 140, 40, 0.15);
}

.subtitle {
  margin-top: 1.1em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.7rem, 1.7vmin, 1.05rem);
  letter-spacing: 0.85em;
  text-indent: 0.85em;
  color: rgba(233, 205, 150, 0.75);
  text-shadow: 0 0 14px rgba(255, 190, 100, 0.35);
}

/* ---------- compass navigation ---------- */

.nav-item {
  position: absolute;
  text-decoration: none;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 2.1vmin, 1.35rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #ecd6a2;
  text-shadow:
    0 0 10px rgba(255, 200, 110, 0.40),
    0 0 32px rgba(255, 160, 60, 0.22);
  padding: 1.2em 1.4em;
  transition: color 0.5s ease, text-shadow 0.5s ease, letter-spacing 0.6s ease;
}

.nav-item span { position: relative; display: inline-block; }

/* small diamond above, thin flourish line below (like the artwork) */
.nav-item span::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.9em;
  width: 5px;
  height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(240, 210, 150, 0.85);
  box-shadow: 0 0 8px rgba(255, 200, 110, 0.8);
  transition: box-shadow 0.5s ease, background 0.5s ease;
}

.nav-item span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.75em;
  width: 110%;
  height: 1px;
  transform: translateX(-50%) scaleX(0.55);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240, 210, 150, 0.75) 50%,
    transparent 100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  opacity: 0.55;
}

.nav-item:hover,
.nav-item:focus-visible {
  color: #fff3d6;
  letter-spacing: 0.52em;
  text-shadow:
    0 0 12px rgba(255, 215, 130, 0.85),
    0 0 40px rgba(255, 175, 70, 0.55),
    0 0 90px rgba(255, 150, 50, 0.30);
}

.nav-item:hover span::after,
.nav-item:focus-visible span::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.nav-item:hover span::before,
.nav-item:focus-visible span::before {
  background: #fff0cf;
  box-shadow: 0 0 14px rgba(255, 220, 140, 1);
}

/* placement — the four corners of the compass */
.nav-read    { left: 13%;  top: 20%; }
.nav-listen  { right: 15%; top: 18%; }
.nav-see     { left: 22%;  bottom: 16%; }
.nav-contact { right: 12%; bottom: 14%; }

/* LISTEN leans cool/blue like the right side of the artwork */
.nav-listen, .nav-contact {
  color: #e3e0d0;
  text-shadow:
    0 0 10px rgba(200, 220, 255, 0.35),
    0 0 32px rgba(140, 180, 255, 0.20);
}

.nav-listen:hover, .nav-listen:focus-visible,
.nav-contact:hover, .nav-contact:focus-visible {
  color: #ffffff;
  text-shadow:
    0 0 12px rgba(220, 235, 255, 0.85),
    0 0 40px rgba(160, 195, 255, 0.55),
    0 0 90px rgba(120, 165, 255, 0.30);
}

/* click pulse */
.nav-item.pulse span {
  animation: navpulse 0.7s ease-out;
}
@keyframes navpulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (max-width: 700px) {
  .nav-read    { left: 8%;  top: 16%; }
  .nav-listen  { right: 6%; top: 16%; }
  .nav-see     { left: 8%;  bottom: 13%; }
  .nav-contact { right: 6%; bottom: 13%; }
}

/* ============================================================
   CAMERA FLIGHT — menu dives toward the LISTEN corner
   ============================================================ */

#scene .scene-content,
#scene #scene-canvas,
#scene .menu-bg {
  transform-origin: 71% 21%; /* the painted LISTEN label */
  transition: transform 1.35s cubic-bezier(0.55, 0, 0.35, 1),
              opacity   0.9s  ease 0.5s;
}

/* the camera pushes INTO the LISTEN corner, holding image until the
   very end so it reads as motion, not a fade */
#scene.zoom-listen .scene-content,
#scene.zoom-listen #scene-canvas,
#scene.zoom-listen .menu-bg {
  transform: scale(3.0);
  opacity: 0;
}

body.listen-open #scene { pointer-events: none; }

/* ============================================================
   READ VIEW — unrolling manuscript
   ============================================================ */
#read-view {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #0a0705;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0s;
}
#read-view.active { opacity: 1; visibility: visible; pointer-events: auto; }

.read-bg { position: absolute; inset: 0; overflow: hidden; }
.read-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}
.read-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 42%, rgba(0,0,0,0.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 25%);
}
.read-wordmark h2 { color: #f0d9a8; }

/* ---------- the manuscript (horizontal scroll) ----------
   All three pieces are slices of ONE photograph (1536 wide), positioned
   at their exact source fractions so they re-register perfectly:
     roll-left  = source x 40..150   → left 2.604%,  width 7.161%
     roll-right = source x 1390..1500 → right 2.344%, width 7.161%
     sheet      = source x 110..1430 → left 7.161%,  width 85.938%
   The paper's ragged edges are sliced WITH overlap so they tuck under
   the rollers; the rollers meet edge-to-edge at centre when closed.
   Anchored at its former left/bottom edges — any growth goes right/up. */
.manuscript {
  position: absolute;
  left: calc(61% - min(30%, 330px));
  bottom: calc(49% - min(33vh, 279px));
  width: calc(36% + min(30%, 330px));
  height: min(78vh, 660px);
  z-index: 3;
  /* materialises in — not a pop */
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.85s ease, filter 0.85s ease;
}
.manuscript.materialized { opacity: 1; filter: blur(0); }

/* the two rolled ends — photographed rolled parchment */
.roll {
  position: absolute;
  top: 0;
  height: 100%;
  width: 7.161%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,0.5));
  z-index: 4;
  transition: left 1.15s cubic-bezier(0.62,0,0.2,1),
              right 1.15s cubic-bezier(0.62,0,0.2,1);
}
/* closed: the rollers' inner creases kiss at the centre — never crossing */
.roll-left  { background-image: url('../assets/roll-left.png');  left: 43.945%; }
.roll-right { background-image: url('../assets/roll-right.png'); right: 43.75%; }
.manuscript.open .roll-left  { left: 2.604%; }
.manuscript.open .roll-right { right: 2.344%; }

/* the parchment sheet (centre of the same photo), revealed left↔right;
   its clip edges always stay hidden beneath the roller bodies */
.sheet {
  position: absolute;
  left: 7.161%; top: 0;
  width: 85.938%; height: 100%;
  background-image: url('../assets/scroll-sheet.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.55));
  clip-path: inset(0% 50.15% 0% 49.85%);
  transition: clip-path 1.15s cubic-bezier(0.62,0,0.2,1);
}
.manuscript.open .sheet { clip-path: inset(0% 1.40% 0% 1.44%); }

.sheet-inner {
  position: relative;
  height: 100%;
  padding: 5.5% 10.5% 10%; /* extra foot-room so text clears the docked nav */
  overflow-y: auto;
  color: #3c2d16;
  opacity: 0;
  transition: opacity 0.5s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,86,40,0.4) transparent;
}
.manuscript.open .sheet-inner { opacity: 1; transition: opacity 0.6s ease 0.7s; }

.ms-eyebrow {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.68rem, 1.35vmin, 0.95rem);
  letter-spacing: 0.3em;
  color: #6b4f28;
  margin-bottom: 0.5em;
}
.ms-flourish {
  display: flex; align-items: center; justify-content: center; gap: 0.7em;
  margin-bottom: 1.5em; color: #8a6a34;
}
.ms-flourish span { height: 1px; width: 64px; background: linear-gradient(90deg, transparent, #8a6a34, transparent); }
.ms-flourish i { font-style: normal; font-size: 0.55rem; }

/* ---------- album mode ---------- */
.ms-album {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5%;
  align-items: start; /* cover stays pinned level with the title */
}
.ms-cover {
  position: relative;
  width: clamp(150px, 24vmin, 260px);
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(40,24,4,0.55);
  border: 1px solid rgba(90,60,25,0.4);
}
.ms-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-cover .cover-fallback {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 3rem; color: #6b4f28;
  background: #d9c39a;
}
.ms-cover.missing img { display: none; }
.ms-cover.missing .cover-fallback { display: flex; }

.ms-text h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vmin, 2.1rem);
  letter-spacing: 0.06em;
  line-height: 1.05; /* cap-top hugs the cover's top edge */
  color: #2c2110;
  margin-bottom: 0.15em;
}
.ms-meta {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.6rem, 1.2vmin, 0.8rem);
  letter-spacing: 0.22em;
  color: #7a5c2e;
  margin-bottom: 1em;
}
.ms-meta .ms-upcoming { color: #9a5a1a; }
.ms-blurb {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 2vmin, 1.28rem);
  line-height: 1.5;
  color: #43331b;
}
.ms-blurb + .ms-blurb { margin-top: 0.8em; } /* breathing room between stanzas */

/* prev / next + dots */
/* the cycle controls live in ONE fixed spot: docked at the parchment's
   bottom centre, just above the wax seal — they never follow the text */
.ms-nav-dock {
  position: absolute;
  left: 50%;
  bottom: 15.5%; /* clears the wax seal below */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.manuscript.open .ms-nav-dock { opacity: 1; transition: opacity 0.6s ease 0.7s; }
.ms-arrow {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: #241a0c; /* solid dark — clearly visible on the parchment */
  border: 1px solid rgba(110,78,36,0.7);
  color: #e9d5a8; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(40,24,4,0.35);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.ms-arrow:hover { background: #3a2a12; transform: translateY(-1px); color: #fff3d6; }
.ms-dots { display: flex; gap: 0.55em; }
.ms-dots button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(110,78,36,0.35); border: none; transition: background 0.3s, transform 0.3s;
}
.ms-dots button.on { background: #8a5a1e; transform: scale(1.3); }

/* ---------- about mode ---------- */
.ms-about { max-width: 44em; margin: 0 auto; text-align: center; }
.ms-about h3 {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.2rem, 2.6vmin, 1.8rem);
  letter-spacing: 0.1em; color: #2c2110; margin-bottom: 0.9em;
}
.ms-about p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 2vmin, 1.3rem);
  line-height: 1.6; color: #43331b; margin-bottom: 1em;
}
.ms-about p:last-child { font-style: italic; color: #6b4f28; }

/* ---------- wax seal (the logo) ---------- */
.wax-seal {
  position: absolute;
  left: 50%; bottom: -7%;
  transform: translateX(-50%);
  width: clamp(84px, 14%, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgba(202,166,96,0.85);
  background: #0b0b12;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 0 26px rgba(255,190,100,0.4);
  opacity: 0;
  transition: opacity 0.6s ease 0.95s, transform 0.4s ease, box-shadow 0.4s ease;
}
.manuscript.open .wax-seal { opacity: 1; }
.wax-seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.wax-seal:hover, .wax-seal:focus-visible {
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 44px rgba(255,205,120,0.65);
  outline: none;
}
/* SEE isn't open yet — it floats a COMING SOON! note on hover */
.coming-soon-tip {
  position: absolute;
  bottom: calc(100% + 0.6em);
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 0.55em 1.1em;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #ffe9b8;
  background: rgba(10, 8, 5, 0.85);
  border: 1px solid rgba(255, 205, 120, 0.45);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 18px rgba(255,190,100,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 9;
}
.s-see .coming-soon-tip { bottom: auto; top: calc(100% + 0.6em); transform: translate(-50%, -6px); }
.side-item.s-see { color: rgba(232, 216, 180, 0.32); cursor: default; }
.side-item.s-see:hover { color: rgba(232, 216, 180, 0.45); text-shadow: none; }
.s-see:hover .coming-soon-tip,
.nav-see:hover .coming-soon-tip,
.s-see:focus-visible .coming-soon-tip,
.nav-see:focus-visible .coming-soon-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .manuscript { left: 3%; bottom: 7vh; width: 94%; height: min(80vh, 560px); }
  .ms-album { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.2em; }
  .ms-arrow { position: static; }
}

/* ============================================================
   CONTACT PORTAL — the walking figure is a mailto hotspot
   ============================================================ */
.contact-figure {
  position: absolute;
  width: 10vmin;
  height: 19vmin;
  transform: translate(-50%, -50%);
  display: block;
  cursor: pointer;
  text-decoration: none;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.menu-contact { display: none; }          /* only over the painted menu art */
#scene.has-art .menu-contact { display: block; }
.listen-contact { z-index: 2; }           /* below the glass panel */

.cf-glow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 150%;
  height: 78%;
  transform: translate(-50%, -50%) scale(0.85);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 226, 165, 0.6),
    rgba(255, 190, 95, 0.28) 42%,
    transparent 72%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.contact-figure:hover .cf-glow,
.contact-figure:focus-visible .cf-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}

.cf-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 0.5em;
  transform: translate(-50%, 10px);
  font-family: 'Cinzel', serif;
  font-size: clamp(0.85rem, 1.8vmin, 1.2rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #ffe9b8;
  text-shadow:
    0 0 12px rgba(255, 205, 120, 0.85),
    0 0 34px rgba(255, 170, 70, 0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.contact-figure:hover .cf-label,
.contact-figure:focus-visible .cf-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* full-screen ripple transition canvas (menu <-> listen) */
.ripple-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* ============================================================
   LISTEN VIEW
   ============================================================ */

/* the ripple canvas performs the reveal; the view just sits ready
   beneath it and is shown/hidden instantly under the wave */
#listen-view {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #030307;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0s;
}

#listen-view.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- backdrop artwork ---------- */

.listen-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.listen-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.6s ease-out;
  will-change: transform;
}

/* until the artwork file exists, a deep nocturne gradient stands in */
#listen-view.no-art .listen-bg img { display: none; }
#listen-view.no-art .listen-bg {
  background:
    radial-gradient(ellipse at 30% 35%, rgba(70, 100, 160, 0.20), transparent 55%),
    radial-gradient(ellipse at 45% 85%, rgba(255, 190, 110, 0.07), transparent 45%),
    radial-gradient(ellipse at 85% 15%, rgba(120, 150, 220, 0.12), transparent 50%),
    #04040a;
}

.listen-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,2,6,0.75) 0%, rgba(2,2,6,0.25) 30%, rgba(2,2,6,0.0) 55%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* the gold ring, half out of frame on the left — echo of the menu */
/* the gold particle ring (artwork asset). The bright circle inside the
   image has radius 240px of the 795x735 crop, centred — mapped here so
   the circle sits at centre (-2vmin, 50%) with radius 30vmin, exactly
   where the old CSS ring was (label geometry depends on it). */
.ring-arc {
  position: absolute;
  left: -51.7vmin;
  top: calc(50% - 45.9vmin);
  width: 99.4vmin;
  height: 91.9vmin;
  background: url('../assets/ring.png') no-repeat center / 100% 100%;
  pointer-events: none;
  animation: ringbreathe 5.5s ease-in-out infinite;
}

@keyframes ringbreathe {
  0%, 100% { filter: brightness(0.9); opacity: 0.92; }
  50%      { filter: brightness(1.12); opacity: 1; }
}

/* equalizer bars riding the ring — shared across READ and LISTEN,
   visible wherever the ring is while music plays */
#ring-eq {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44vmin;
  height: 88vmin;
  pointer-events: none;
  z-index: 6;
  display: none;
}
body.listen-open #ring-eq,
body.read-open #ring-eq { display: block; }

/* ---------- return + side nav + wordmark ---------- */

.return-btn {
  position: absolute;
  top: 4.5%;
  left: 4%;
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: rgba(236, 214, 162, 0.7);
  text-shadow: 0 0 12px rgba(255, 190, 100, 0.3);
  transition: color 0.4s, text-shadow 0.4s;
}
.return-btn:hover {
  color: #fff3d6;
  text-shadow: 0 0 14px rgba(255, 210, 120, 0.8);
}

/* the four words sit just to the RIGHT of the gold ring's arc, each tied
   back to it by a thin gold thread. The ring circle is centred at
   x = -2vmin, y = 50%, radius 30vmin — the arc crosses vertical offset dy
   at x = -2 + sqrt(30² - dy²); words start a small gap right of that. */
.side-nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none; /* only the words themselves are clickable */
}

.side-item {
  position: absolute;
  transform: translate(0, -50%); /* left-anchored beside the arc */
  pointer-events: auto;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1rem, 2.5vmin, 1.62rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-decoration: none;
  color: rgba(232, 216, 180, 0.62);
  text-shadow: 0 0 10px rgba(255, 190, 100, 0.18);
  transition: color 0.4s, text-shadow 0.4s;
}

/* the words sit clear of the ring's dust halo (~38vmin radius); their
   threads run back across the dust to the bright arc itself
   (arc x at dy=±21vmin → 19.4 ; at dy=±7vmin → 27.2) */
.s-read    { top: calc(50% - 21vmin); left: 31.5vmin; }
.s-listen  { top: calc(50% - 7vmin);  left: 37.5vmin; }
.s-see     { top: calc(50% + 7vmin);  left: 37.5vmin; }
.s-contact { top: calc(50% + 21vmin); left: 31.5vmin; }

/* the gold thread from each word back to (and just past) the arc */
.side-item::before {
  content: '';
  position: absolute;
  right: 100%;
  margin-right: 0.5vmin;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 205, 120, 0.85), rgba(255, 205, 120, 0.10));
  box-shadow: 0 0 6px rgba(255, 190, 100, 0.35);
  pointer-events: none;
}
.s-read::before,   .s-contact::before { width: 12.6vmin; }
.s-listen::before, .s-see::before     { width: 10.9vmin; }

.side-item:hover { color: #f5e3b8; text-shadow: 0 0 14px rgba(255, 200, 110, 0.6); }
.side-item.active {
  color: #ffe9b8;
  text-shadow: 0 0 14px rgba(255, 200, 110, 0.75), 0 0 40px rgba(255, 170, 70, 0.4);
}
/* the active word's thread ends in a small lit diamond on the ring */
.side-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffd98f;
  box-shadow: 0 0 10px rgba(255, 210, 130, 0.9);
}
.s-read.active::after,   .s-contact.active::after { left: -13.1vmin; }
.s-listen.active::after, .s-see.active::after     { left: -11.4vmin; }

.wordmark {
  position: absolute;
  left: 4%;
  bottom: 6%;
  z-index: 3;
  pointer-events: none;
}
.wordmark h2 {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vmin, 2.4rem);
  letter-spacing: 0.22em;
  color: #eed7a4;
  text-shadow: 0 0 14px rgba(255, 200, 110, 0.4);
}
.wordmark p {
  margin-top: 0.5em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.6rem, 1.3vmin, 0.85rem);
  letter-spacing: 0.7em;
  color: rgba(233, 205, 150, 0.6);
}

/* ---------- the glass panel ---------- */

.glass {
  position: absolute;
  right: 3.5%;
  top: 50%;
  z-index: 3;
  width: min(46%, 620px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2.4em 2.6em;
  border-radius: 18px;
  background: rgba(10, 10, 14, 0.55);
  border: 1px solid rgba(240, 214, 160, 0.14);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 214, 160, 0.25) transparent;

  /* starts off-screen right, "screen off" — slides in slowly on cue
     so the motion can be appreciated */
  transform: translate(135%, -50%);
  opacity: 0;
  transition: transform 1.7s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.8s ease;
}
.glass.glass-in { transform: translate(0, -50%); opacity: 1; }

/* contents stay dark until the panel "switches on" — but default to
   visible once on, so they can never get stuck hidden */
.glass:not(.glass-on) > * { opacity: 0; }
.glass.glass-on > * { opacity: 1; animation: crtOn 0.65s ease-out both; }

/* the power-on flash across the glass surface */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(190,220,255,0.10), transparent 40%),
    radial-gradient(ellipse at 50% 45%, rgba(210,230,255,0.55), rgba(150,190,255,0.12) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glass.glass-on::before { animation: powerFlash 0.75s ease-out; }

/* a bright scan-line that sweeps down as it comes alive */
.glass::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(215,235,255,0.9), transparent);
  box-shadow: 0 0 16px rgba(190,220,255,0.8);
  opacity: 0;
  pointer-events: none;
}
.glass.glass-on::after { animation: scanline 0.6s ease-out 0.08s; }

@keyframes powerFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  26%  { opacity: 0.15; }
  40%  { opacity: 0.7; }
  60%  { opacity: 0.08; }
  100% { opacity: 0; }
}
@keyframes scanline {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { top: 100%; opacity: 0; }
}
@keyframes crtOn {
  0%   { opacity: 0; }
  12%  { opacity: 0.7; }
  22%  { opacity: 0.15; }
  38%  { opacity: 0.9; }
  55%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* respect reduced-motion: no camera move, slide, or flash — just appear */
@media (prefers-reduced-motion: reduce) {
  #listen-view {
    transform: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  #listen-view.active { transform: none; transition: opacity 0.4s ease; }
  #scene .scene-content,
  #scene #scene-canvas,
  #scene .menu-bg { transition: opacity 0.4s ease; }
  #scene.zoom-listen .scene-content,
  #scene.zoom-listen #scene-canvas,
  #scene.zoom-listen .menu-bg { transform: none; }
  .glass { transition: opacity 0.4s ease; transform: translate(0, -50%); }
  .glass.glass-in { transform: translate(0, -50%); }
  .glass.glass-on::before,
  .glass.glass-on::after { animation: none; }
  .glass.glass-on > * { animation: none; }
}

.glass-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.45em;
  color: rgba(238, 215, 164, 0.85);
  margin-bottom: 1.1em;
}
.glass-label:not(:first-child) { margin-top: 2em; }

/* player — the Spotify iFrame API injects its iframe into the host */
.player-wrap { position: relative; }
#spotify-embed {
  display: none;
  border-radius: 12px;
  overflow: hidden;
}
#spotify-embed iframe {
  width: 100%;
  height: 152px;
  border: none;
  border-radius: 12px;
  display: block;
}
.player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: 120px;
  border-radius: 12px;
  border: 1px dashed rgba(240, 214, 160, 0.25);
  background: rgba(255, 255, 255, 0.02);
}
.ph-title {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.25em;
  color: #eed7a4;
}
.ph-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(233, 205, 150, 0.5);
}

#singles-section { margin-top: 2.2em; }

/* side-project separation — an ornamental threshold between the Arc
   and everything outside it */
.side-divider {
  position: relative;
  height: 1px;
  margin: 2.2em 0 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(170, 200, 255, 0.35) 50%,
    transparent 100%);
}
.side-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(190, 212, 255, 0.75);
  box-shadow: 0 0 10px rgba(170, 200, 255, 0.8);
}
.side-label {
  color: rgba(185, 205, 245, 0.8) !important;
}

/* releases grid */
.releases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1.4em;
}
.release {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.release .cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(240, 214, 160, 0.12);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.release .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.release .cover-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: rgba(238, 215, 164, 0.55);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 180, 80, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 75%, rgba(110, 150, 230, 0.15), transparent 60%),
    #0b0b12;
}
.release .cover.missing img { display: none; }
.release .cover.missing .cover-fallback { display: flex; }

.release:hover .cover,
.release.selected .cover {
  border-color: rgba(255, 210, 130, 0.55);
  box-shadow: 0 0 22px rgba(255, 180, 80, 0.25);
  transform: translateY(-3px);
}
.release .r-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: #e9dcc0;
}
.release .r-meta {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(232, 216, 180, 0.45);
}
.release.selected .r-title { color: #ffe9b8; }

/* upcoming release: a small gilded tag + a hint of anticipation */
.upcoming-tag {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  padding: 0.28em 0.6em;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: #1a140a;
  background: linear-gradient(180deg, #ffe6ad, #e8b866);
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(255, 190, 100, 0.5);
  pointer-events: none;
}
.release.upcoming .cover {
  border-color: rgba(255, 210, 130, 0.35);
}
.release.upcoming .r-meta { color: rgba(255, 214, 150, 0.75); }

/* side projects glow cool blue instead of arc gold */
.release.side:hover .cover,
.release.side.selected .cover {
  border-color: rgba(160, 195, 255, 0.55);
  box-shadow: 0 0 22px rgba(130, 170, 255, 0.25);
}
.release.side.selected .r-title { color: #dbe8ff; }

/* platform buttons — always four across, one tidy row */
.platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7em;
}
.platform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.6em 0.4em;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  white-space: nowrap;
  color: #f2f2f2;
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.platform svg { width: 14px; height: 14px; flex-shrink: 0; }
.platform:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.platform.disabled { opacity: 0.45; cursor: default; }
.platform.disabled:hover { transform: none; background: rgba(255,255,255,0.035); }
.amazon-word { color: #9db7ff; font-weight: 400; }
.amazon-word b { font-weight: 700; color: #cfe0ff; }

@media (max-width: 900px) {
  .glass {
    right: 50%;
    width: min(92%, 620px);
    transform: translate(185%, -50%); /* off-screen right */
  }
  .glass.glass-in { transform: translate(50%, -50%); } /* centred */
  .side-nav { display: none; }
  .wordmark { bottom: 2.5%; }
}