:root {
  --ink: #0b0d12;
  --sky-1: #f1f8fe;
  --sky-2: #e2f4fd;
  --blob-1: #c9e6fb;
  --blob-2: #d9ecff;
  --blob-3: #cff3f7;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --slide: 900ms;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Dan Eden's brand orange */
  --orange: oklch(71.95% 0.2325 45.21);
}

* { box-sizing: border-box; }

html, body { margin: 0; background: #000; }

body {
  color: var(--ink);
  font-family: "Gelasio", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* The top bar, the location and the small print stay in Archivo */
.bar, .place, .fine {
  font-family: "Archivo", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Two full-width panels side by side; the track slides between them. The viewport
   clips the off-screen one (overflow on <html> isn't enough: phones zoom out to fit it). */
.viewport { overflow-x: hidden; overflow-x: clip; }
.track {
  display: flex;
  width: 200vw;
  transition: transform var(--slide) var(--ease);
}
.is-now .track { transform: translateX(-100vw); }

/* Panels don't stretch to each other's height; the off-screen one is clipped to the screen */
.track { align-items: flex-start; }
:root:not(.is-now) .now,
.is-now .home { height: 100vh; height: 100svh; overflow: hidden; }

.panel {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 9vh, 5.5rem) 1.375rem 0;
  font-size: 1.25rem;
}

/* ---------- Home ---------- */

.home {
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  overflow: hidden;
}

/* Slowly drifting pastel blobs make the gradient move */
.blobs span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.75;
  animation: drift 26s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { background: var(--blob-1); top: -30vmax; left: -25vmax; }
.blobs span:nth-child(2) { background: var(--blob-2); bottom: -35vmax; right: -30vmax; animation-duration: 32s; animation-delay: -8s; }
.blobs span:nth-child(3) { background: var(--blob-3); top: 30%; left: 20%; width: 50vmax; height: 50vmax; animation-duration: 38s; animation-delay: -16s; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(18vw, 12vh) scale(1.15); }
  100% { transform: translate(-10vw, 22vh) scale(0.9); }
}

.name { font-weight: 700; font-size: 1.375rem; }
.to-now span { display: inline-block; transition: transform 0.3s var(--ease); }
.to-now:hover span { transform: translateX(4px); }

.here {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem 2.75rem 5rem;
}

.here figure { margin: 0; width: min(100%, 34rem); }

/* Magnetic hover. Each .hit is a hover area that never moves; app.js sets --mx/--my
   (-1…1, where the cursor is over it) on the .magnet inside, which drifts and leans
   toward the cursor, then springs back. Moving only the inner part means an item
   can't slide out from under the cursor, and the items don't drag each other. */
.magnet {
  --mx: 0;
  --my: 0;
  --rot: 0deg;
  --pull: 10px;
  --lean: 4deg;
  transform:
    translate(calc(var(--mx) * var(--pull)), calc(var(--my) * var(--pull)))
    rotate(calc(var(--rot) + var(--mx) * var(--lean)));
  transition: transform 0.7s var(--spring);
}
.magnet.is-pulled { transition: transform 0.2s ease-out; }

/* The photo's tilt is fixed; the album, film and avatar are positioned around it */
.photo {
  position: relative;
  transform: rotate(3deg);
}

.shot .magnet { position: relative; --pull: 6px; --lean: 1.5deg; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 40px -18px rgba(20, 50, 90, 0.35);
}

.avatar {
  position: absolute;
  right: -8%;
  bottom: -9%;
  width: 26%;
}
.avatar img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px -8px rgba(20, 50, 90, 0.4);
  --rot: -3deg;
}

/* How long ago the photo was taken */
.badge {
  position: absolute;
  left: 4%;
  bottom: 5%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgb(11 13 18 / 0.5); /* --ink at half strength */
  font-family: ui-rounded, "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
}
.badge .icon {
  margin: 0;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Latest album and film, scattered on the other corners */
.pin {
  position: absolute;
  display: block;
  animation: pop 0.6s var(--spring) both; /* delay set by app.js when the artwork loads */
}
.pin[hidden] { display: none; }
.pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 24px -8px rgba(20, 50, 90, 0.45);
  --lean: 5deg;
}
.pin.album { left: -7%; top: -10%; width: 21%; aspect-ratio: 1; }
.pin.poster { right: -5%; top: -15%; width: 16%; aspect-ratio: 2 / 3; }
.pin.album img { --rot: -9deg; }
.pin.poster img { --rot: 8deg; }
/* Phones: the photo is narrow, so give the things on it more room */
@media (max-width: 600px) {
  .avatar { width: 32%; right: -9%; bottom: -11%; }
  .pin.album { width: 28%; left: -9%; top: -13%; }
  .pin.poster { width: 22%; right: -7%; top: -19%; }
  .badge { font-size: 0.9375rem; padding: 0.4rem 0.8rem 0.4rem 0.6rem; gap: 0.35rem; }
  .badge .icon { width: 1.1rem; height: 1.1rem; }
}

/* Entrance, one after another: photo + badge, avatar, the pins (as they load), caption */
@keyframes pop { from { opacity: 0; scale: 0.8; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }
.photo { animation: pop 0.7s var(--spring) both; }
.avatar { animation: pop 0.6s var(--spring) 0.3s both; }
.here figcaption { animation: rise 0.6s ease-out 1.05s both; }

.here figcaption {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-top: 3.5rem;
  text-align: center;
  font-size: 1.0625rem;
}
.place {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgb(11 13 18 / 0.55);
  font-size: 0.9375rem;
}
.place .icon {
  width: 1rem;
  height: 1rem;
  margin: 0;
  background: currentColor;
}

/* ---------- Now ---------- */

.now { background: #000; color: #fff; }

.back span { display: inline-block; transition: transform 0.3s var(--ease); }
.back:hover span { transform: translateX(-4px); }

.now main {
  max-width: 64rem;
  width: 100%;
  flex: 1;
  margin: 0 auto;
  padding: clamp(4rem, 14vh, 8rem) 1.875rem 6rem;
}

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4.5rem;
  max-width: 30rem;
}

/* Entries rise in once the slide has mostly finished */
.entry {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.is-now .entry {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--slide) * 0.6 + var(--i) * 120ms);
}

.icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 1rem;
  background: var(--orange);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.text {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}
a.body .text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a.body:hover .text { opacity: 0.7; }

/* Rows of album covers / film posters */
.covers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.375rem;
}
.cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #d9d9d9;
  overflow: hidden;
}
.covers.poster .cover { aspect-ratio: 2 / 3; border-radius: 3px; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; }
a.cover:hover img { opacity: 0.75; }


/* Small print at the bottom of each view */
/* Small print, in white inside the orange contact strip */
.fine {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.875rem calc(3.5rem + env(safe-area-inset-bottom));
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.fine a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Orange contact strip at the very bottom of the now page */
.contact {
  background: var(--orange);
  color: #fff;
}
.mail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 3.5rem 1.875rem 2rem;
  font-size: 1.25rem;
}
.mail .icon { margin: 0; background: currentColor; }
.mail:hover > span:last-child { text-decoration: underline; text-underline-offset: 0.18em; }
.at {
  width: 1.05em;
  height: 1.05em;
  margin: 0 0.04em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  transform: rotate(-9deg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Motion ---------- */

.no-anim .track,
.no-anim .entry { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root { --slide: 1ms; }
  .blobs span { animation: none; }
  .entry, .magnet, .photo, .avatar, .pin, .here figcaption { transition: none; animation: none; }
  .magnet { transform: rotate(var(--rot)) !important; }
}