/* Homepage, layered over style.css: a wall of the albums I've been listening to on Spotify, their
 * covers taped up at slight angles on the grey wall, the most played twice the size. Tapping one
 * lifts it off the wall, which fades back, and Spotify's player slides up under it. The covers
 * bring the colour; everything around them stays in the site's black, white and greys. */

:root {
  --words: "Anton", "Franklin Gothic Extra Condensed", "Franklin Gothic Medium Cond", Oswald, Impact, sans-serif;
  /* The middle of the top bar: style.css gives the header max(22px, safe area) of padding, and the
     menu button is 48px tall */
  --bar-mid: calc(max(22px, env(safe-area-inset-top, 0px)) + 24px);
  /* The title's size: as big as fits beside the theme switch and menu (about 121px wide) */
  --title-fs: clamp(2rem, calc((100vw - 150px) / 6.4), 3.4rem);
  --shadow: light-dark(rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.5));
  --shadow-lift: light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.7));
}

html:has(body.home), body.home { background: var(--wall); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The header sits over the top of the wall and scrolls away with it */
.home .site-header { position: absolute; z-index: 10; inset: 0 0 auto; max-width: none; transition: opacity 0.4s ease; }
.home main.wall {
  --bg: var(--wall);
  position: relative; width: auto; max-width: none; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
}
.home main.wall::before { content: none; }

/* "What I'm / listening to" on two lines at the top left of a phone, one line from 700px */
.wall-title {
  position: absolute; z-index: 5; top: max(22px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px));
  margin: 0; color: var(--muted); font: 400 var(--title-fs)/0.95 var(--words);
  letter-spacing: 0.03em; text-transform: uppercase; pointer-events: none; transition: opacity 0.4s ease;
}
.wall-title span { display: block; }
@media (min-width: 700px) {
  :root { --title-fs: clamp(2rem, calc((100vw - 200px) / 10.5), 3.4rem); }
  .wall-title { top: var(--bar-mid); translate: 0 -50%; }
  .wall-title span { display: inline; }
}

/* --- The wall ------------------------------------------------------------------------- */
/* Three covers across a phone, four on a tablet, six on a laptop. Dense packing slides the small
   covers into the gaps the big ones leave, so the wall has no holes. */
.covers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px 12px;
  max-width: 1240px; margin: 0 auto; list-style: none;
  padding-top: calc(max(22px, env(safe-area-inset-top, 0px)) + var(--title-fs) * 1.9 + 28px);
  padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  transition: opacity 0.5s ease, filter 0.5s ease, scale 0.6s ease;
}
@media (min-width: 600px) {
  .covers {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px;
    padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 700px) { .covers { padding-top: calc(var(--bar-mid) + 50px); } }
@media (min-width: 960px) { .covers { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 26px; } }

/* Before Spotify is connected, or if it has nothing yet */
.covers-empty {
  grid-column: 1 / -1; max-width: 26rem; margin: 2rem auto; color: var(--muted);
  font: 1.1rem/1.5 var(--sans); text-align: center;
}

.cover { position: relative; aspect-ratio: 1; max-width: 100%; }
.cover.big { grid-column: span 2; grid-row: span 2; }
/* Each cover is taped up at its own slight angle (--r, home.js), with a strip of tape across the top */
.cover a {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 2px;
  background: var(--field); rotate: var(--r, 0deg);
  box-shadow: 0 8px 18px var(--shadow), 0 1px 2px var(--shadow);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  transition: scale 0.2s ease;
}
.cover a::after {
  content: ""; position: absolute; z-index: 1; top: -7px; left: 50%; width: 34%; height: 15px; translate: -50% 0; rotate: var(--tr, -2deg);
  background: var(--tape); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); pointer-events: none;
}
.cover.big a::after { top: -9px; width: 28%; height: 20px; }
.cover img {
  display: block; width: 100%; height: 100%; border-radius: 2px; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
.cover a:active { scale: 0.97; }
.cover a:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
@media (hover: hover) { .cover a:hover { z-index: 2; scale: 1.04; } }
/* The cover that's lifted off leaves its place on the wall empty */
.cover.out a { visibility: hidden; }

/* Taped up one after another, then a slow drift of a few pixels each (home.js sets --d, --dx, --dy,
   --dur and --dd) */
@media (prefers-reduced-motion: no-preference) {
  .cover a {
    animation: pin-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) backwards,
      drift var(--dur, 20s) ease-in-out var(--dd, 0s) infinite;
  }
}
@keyframes pin-in { from { opacity: 0; scale: 1.08; } }
@keyframes drift { 50% { translate: var(--dx, 0) var(--dy, 0); } }

/* --- The ? and what the wall is --------------------------------------------------------- */
.wall-help {
  position: fixed; z-index: 15; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--text); cursor: pointer;
  box-shadow: 0 6px 18px var(--shadow); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 0.4s ease;
}
.wall-help svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wall-help:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.wall-help:active { scale: 0.94; }
@media (hover: hover) { .wall-help:hover { border-color: var(--text); } }
.wall-info {
  position: fixed; z-index: 25; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 64px);
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); max-width: 380px;
  box-sizing: border-box; padding: 18px 20px 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--field); color: var(--text); box-shadow: 0 12px 32px var(--shadow); font: 1.05rem/1.5 var(--sans);
}
.wall-info[hidden] { display: none; }
.wall-info p { margin: 0 0 12px; }

/* --- Playing: the cover floats between the back button and the player -------------------- */
html.taking { overflow: hidden; }
html.taking body { touch-action: none; }
html.taking .covers { opacity: 0.14; filter: blur(2px) grayscale(0.6); scale: 0.97; pointer-events: none; }
html.taking .wall-title, html.taking .wall-help, html.taking .site-header { opacity: 0; pointer-events: none; }

/* A copy of the cover (home.js moves it from its place on the wall); tapping it pauses and plays */
.lifted {
  position: fixed; z-index: 30; margin: 0; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--field); box-shadow: 0 24px 50px var(--shadow-lift); cursor: pointer;
  transform-origin: center; transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.lifted img { display: block; width: 100%; height: 100%; object-fit: cover; }
.caption {
  position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; justify-items: center; gap: 6px; margin: 0; text-align: center;
  opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 0.35s ease, translate 0.45s ease;
}
.caption.on { opacity: 1; translate: none; transition-delay: 0.3s; }
.caption h2 {
  max-width: 100%; margin: 0; color: var(--text); font: 400 clamp(1.5rem, 7vw, 2.4rem)/1.02 var(--words);
  letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.caption p { margin: 0; color: var(--muted); font: 500 1.05rem/1.2 var(--sans); }

/* --- The player: Spotify's own embed, in a card at the bottom centre ------------------ */
.now-playing {
  position: fixed; z-index: 20;
  left: 50%; translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 32px));
  transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease, visibility 0s;
}
.now-playing[hidden] {
  display: block; visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(calc(100% + 32px));
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}
/* Spotify's tall layout (cover and track list) on every screen; home.js uses the same 352px */
.np-embed { min-height: 352px; border-radius: 12px; background: var(--field); box-shadow: 0 12px 32px var(--shadow); }
.np-embed iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
.np-fallback { display: flex; align-items: center; min-height: 352px; padding: 1rem 1.25rem; color: var(--text); font: 0.95rem/1.5 var(--sans); }
/* A labelled pill at the top left of the page, so it's clear that it takes you back to the wall.
   It's shown only while an album is playing. */
.np-close {
  position: fixed; z-index: 31; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px));
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 14px;
  border: 1.5px solid var(--text); border-radius: 999px; background: var(--field); color: var(--text); cursor: pointer;
  font: 600 1.05rem/1 var(--sans); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s 0.3s;
}
html.taking .np-close { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s ease 0.35s, visibility 0s; }
.np-close svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.np-close:active { scale: 0.96; }
.np-close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .np-close:hover { background: var(--wall); } }

/* Phones: the player spans the width */
@media (max-width: 600px) {
  .now-playing {
    left: max(12px, env(safe-area-inset-left, 0px)); translate: none; bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lifted, .now-playing, .now-playing[hidden], .covers, .caption { transition: none; }
}