/* i am — album home. black stage, living flower. */

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

html, body {
  height: 100%;
  background: #0d0c0b;
  overflow: hidden;
  overscroll-behavior: none;
}

#stage { position: fixed; inset: 0; }

#gl {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#fallback { position: absolute; inset: 0; background: #0d0c0b; }
#fallback img { width: 100%; height: 100%; object-fit: cover; }

/* ---- the wordmark: the album's exact "I am" logotype (transparent PNG,
   white artwork), kept high so it clears the top song title ---- */
#wordmark {
  position: fixed;
  top: clamp(16px, 4svh, 48px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
#wordmark img {
  display: block;
  width: clamp(96px, 15vmin, 168px);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(255, 244, 224, 0.14));
}

/* ---- bottom credit + back link ---- */
#credit {
  position: fixed;
  bottom: clamp(18px, 4.4svh, 42px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Courier Prime", monospace;
  font-size: clamp(10px, 1.4vmin, 13px);
  letter-spacing: 0.24em;
  color: rgba(239, 236, 230, 0.34);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
#credit span { opacity: 0.5; }

#backlink {
  position: fixed;
  right: clamp(16px, 2.4vw, 40px);
  bottom: clamp(16px, 3.6svh, 34px);
  font-family: "Courier Prime", monospace;
  font-size: clamp(10px, 1.3vmin, 12.5px);
  letter-spacing: 0.16em;
  color: rgba(239, 236, 230, 0.4);
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.5s ease, letter-spacing 0.5s ease;
  z-index: 6;
}
#backlink:hover { color: rgba(245, 243, 238, 0.92); letter-spacing: 0.2em; }

/* fade-in veils */
.veil { opacity: 0; transition: opacity 2.6s ease 0.9s; }
body.awake .veil { opacity: 1; }

/* while reading a petal, the decorative chrome recedes so the floating
   song name owns the frame (id beats .veil, so this wins over body.awake) */
body.reading #wordmark { opacity: 0.1; transition: opacity 0.6s ease; }
body.reading #credit   { opacity: 0;   transition: opacity 0.6s ease; }

/* ---- floating song names (one per petal, anchored just outside its tip) ---- */
.song-label {
  position: fixed;
  z-index: 5;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, left, top;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.9vmin, 34px);
  letter-spacing: 0.015em;
  color: #f6f2ea;
  text-shadow: 0 0 26px rgba(255, 240, 214, 0.5), 0 0 60px rgba(255, 226, 170, 0.28);
  animation: floatbob 6.5s ease-in-out infinite;
}
.song-label.show { opacity: 1; }

/* menu mode (touch device or narrow window): every name is shown and is
   itself a big, easy tap target */
body.labels-menu .song-label {
  pointer-events: auto;
  padding: 10px 14px;
  cursor: pointer;
}

@keyframes floatbob {
  0%, 100% { transform: translate(-50%, calc(-50% - 5px)); }
  50%      { transform: translate(-50%, calc(-50% + 5px)); }
}

/* ---- click transition flash (live tracks open on a white landing) ---- */
#flash {
  position: fixed;
  inset: 0;
  background: #fbf9f4;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.34s ease;
}
#flash.on { opacity: 1; }

/* ---- loading ---- */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0c0b;
  z-index: 10;
  transition: opacity 0.7s ease;   /* quick, clean reveal — no lingering dark hold */
  will-change: opacity;
}
#loading span {
  font-family: "Courier Prime", monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(239, 236, 230, 0.32);
  animation: loadpulse 1.6s ease-in-out infinite;
}
body.awake #loading { opacity: 0; pointer-events: none; }

@keyframes loadpulse {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

/* canvas invites a drag; a petal invites a click; a drag shows the closed hand */
#gl { cursor: grab; }
body.hovering #gl { cursor: pointer; }
body.grabbing #gl, body.grabbing { cursor: grabbing; }

/* narrow screens: the centered credit and the corner back link collide —
   the back link carries the brand, so drop the duplicate credit */
@media (max-width: 620px) {
  #credit { display: none; }
  #backlink { left: 50%; right: auto; transform: translateX(-50%); bottom: clamp(16px, 3.4svh, 30px); }
  .song-label { font-size: clamp(15px, 4.6vw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .veil, #loading { transition-duration: 0.4s; }
  .lbl-inner { animation: none; }
}