/* LOST MY HOME — base */

:root {
  --bg: #ffffff;
  --fg: #000000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The collage surface. Items are absolutely positioned inside it,
   so it needs an explicit height once content exists (set by JS). */
#collage {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* A single collage element (photo or video) */
.piece {
  position: absolute;
  display: block;
  margin: 0;
  line-height: 0;
}

.piece-window {
  position: relative;
  display: block;
  line-height: 0;
}

.piece img,
.piece video {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Fade in once the asset has actually decoded/loaded */
.piece { opacity: 0; transition: opacity 400ms ease; }
.piece.is-loaded { opacity: 1; }

/* Shown only when the browser blocks autoplay — click anywhere to start. */
#audio-cue {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  border: 0;
  background: transparent;
  /* The ink the rest of the site is set in, so the cue belongs to the page
     rather than being the one black thing on it. Falls back to the palette's
     light tone for the moment before the lyric stylesheet defines it. */
  color: var(--ink, #e6ddc6);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  cursor: pointer;

  opacity: 1;
  transition: opacity 500ms ease;
}

#audio-cue.is-gone {
  opacity: 0;
  pointer-events: none;
}

/* The word leans toward the cursor. Separate from the button so the pull
   moves the type and not a screen-sized box, and on `translate` rather than
   `transform` so a transition on it can never fight a transform used for
   placement — which is exactly how the icons' magnet was broken once. */
#audio-cue .cue-label {
  display: inline-block;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  #audio-cue .cue-label { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  #audio-cue { transition: none; }
  .piece { transition: none; }
}

/* Mute toggle — appears once the song is actually playing. */
#audio-toggle {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 10000;

  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;

  /* Nearly invisible against the white page, but it turns into a legible
     plate the moment a photo sits behind it. */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  color: var(--fg);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  cursor: pointer;

  opacity: 0;
  pointer-events: none; /* never a target while it is invisible */
  transition: opacity 400ms ease;
}

#audio-toggle.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#audio-toggle:hover,
#audio-toggle:focus-visible { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  #audio-toggle { transition: none; }
}