/* Beyond Work — the one page allowed outside DESIGN.md (Akshat, 2026-10-16).
   Off-hours should not look like the CV: its own type, a loud palette, and a
   deck of cards that stack as you scroll. Everything here is scoped to .bw so
   none of it leaks into the rest of the site. */

.bw {
  --bw-sans: var(--font-display);
  --bw-serif: var(--font-serif);
  --bw-lime: #d9ff4a;
  --bw-stage: #f3ede2;
  --bw-stage-ink: #1b1712;
  font-family: var(--bw-sans);
  /* The tilted ticker runs past both edges; clip (not hidden) trims it without
     making .bw a scroll container, which would break the sticky cards. */
  overflow-x: clip;
}

:root[data-theme="dark"] .bw { --bw-stage: #100e12; --bw-stage-ink: #f3ede2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bw { --bw-stage: #100e12; --bw-stage-ink: #f3ede2; }
}

.bw em { font-family: var(--bw-serif); font-style: italic; font-weight: 400; font-size: inherit; }

/* ---------- Hero, over the sky ---------- */

.bw-hero {
  color: var(--color-on-media);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.bw-title {
  font-family: var(--bw-sans);
  font-weight: 800;
  font-size: clamp(4rem, 13vw, 10.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96;
}

/* "work", crossed out by a lime marker stroke */
.bw-strike { position: relative; display: inline-block; }
.bw-strike::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 0.13em;
  background: var(--bw-lime);
  border-radius: 999px;
  transform: rotate(-4deg) scaleX(0);
  transform-origin: left center;
  animation: bw-strike 0.7s 0.55s var(--ease-glide) forwards;
}
@keyframes bw-strike { to { transform: rotate(-4deg) scaleX(1); } }

.bw-lede {
  margin-top: var(--space-8);
  max-width: 34rem;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.bw-lede em { font-size: 1.15em; color: var(--bw-lime); }

/* ---------- Ticker ---------- */

.bw-ticker {
  --tk-h: 4rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: var(--tk-h);
  background: var(--bw-lime);
  color: #111;
  /* The tilt is capped so each end rises at most 22px off the centre line,
     whatever the screen width: 1.6deg on a laptop, flatter on a wide monitor.
     A plain angle lifts the ends further the wider the screen, and on a 2560px
     display they climbed clear of the band's own half-height and opened a
     strip of cream under the sky. */
  transform: rotate(calc(-1 * min(1.6deg, atan2(44px, 100vw))));
  /* Wider than the page so the rotated ends never show a corner (.bw clips
     the excess). The negative bottom margin is exactly half the band, so the
     sky-to-cream edge runs along its centre line. */
  margin: 0 -5vw calc(var(--tk-h) / -2);
  overflow: hidden;
}
.bw-ticker-track {
  display: flex;
  width: max-content;
  animation: bw-tick 38s linear infinite;
}
.bw-ticker span {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 1.1rem;
}
.bw-ticker span::after { content: "✦"; margin-left: 2.2rem; font-size: 0.8em; }
@keyframes bw-tick { to { transform: translateX(-50%); } }

/* ---------- The stack ---------- */

.bw-stage {
  position: relative;
  z-index: 1;
  background: var(--bw-stage);
  padding: calc(var(--space-16) + 3.5rem) var(--space-6) var(--space-16);
  transition: background-color var(--duration-material) var(--ease-out);
}

.bw-stack { max-width: 72rem; margin: 0 auto; }

.bw-card + .bw-card { margin-top: var(--space-8); }

/* Stacking only switches on once stack.js has checked every card fits the
   screen; a card taller than the viewport would pin with its end cut off. */
.bw-stack.is-live { padding-bottom: 4vh; }
.bw-stack.is-live .bw-card {
  position: sticky;
  top: calc(var(--header-height) + 1.25rem + var(--i) * 0.9rem);
}
.bw-stack.is-live .bw-card + .bw-card { margin-top: 22vh; }

.bw-panel {
  --dim: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-8);
  min-height: min(34rem, calc(100svh - var(--header-height) - 7rem));
  padding: var(--space-8);
  border-radius: 2rem;
  background: var(--card);
  color: var(--card-ink);
  transform-origin: 50% 0;
  will-change: transform;
}

/* Cards further back in the pile fall into shade */
.bw-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: var(--dim);
  pointer-events: none;
}

.bw-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
}

.bw-num {
  font-family: var(--bw-serif);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--card-accent);
}

.bw-card h2 {
  font-family: var(--bw-sans);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.bw-card p {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 30rem;
  opacity: 0.86;
}

.bw-media {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--poster);
  min-height: 16rem;
}

.bw-media img,
.bw-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--zoom, 1));
  transform-origin: 50% 50%;
}
.bw-media img { object-fit: cover; z-index: 1; }

.bw-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--poster-ink);
}

/* ---------- Tones ---------- */

.tone-ai     { --card: #5b3df5; --card-ink: #f4f1ff; --card-accent: var(--bw-lime); --poster: #3b22c9; --poster-ink: #f4f1ff; }
.tone-game   { --card: #1537ff; --card-ink: #ffffff; --card-accent: #7ef2ff; --poster: #0b1e9c; --poster-ink: #7ef2ff; }
.tone-food   { --card: #a9c76a; --card-ink: #15210a; --card-accent: #3f5a16; --poster: #1b2a0e; --poster-ink: #d9ec9e; }
.tone-dogs   { --card: #ffc83d; --card-ink: #2a1d00; --card-accent: #9a5b00; --poster: #2a1d00; --poster-ink: #ffc83d; }
.tone-music  { --card: #22c7a4; --card-ink: #032a22; --card-accent: #0a5c4b; --poster: #052b24; --poster-ink: #8ff3dc; }
.tone-rest   { --card: #ff9fc8; --card-ink: #3a0a22; --card-accent: #b0145a; --poster: #3a0a22; --poster-ink: #ff9fc8; }

/* ---------- Posters (placeholders until photos land) ---------- */

/* A tunnel of rings, off-centre, falling away */
.poster-ai {
  background:
    radial-gradient(circle at 62% 58%, #0d0538 0 6%, transparent 6.2%),
    repeating-radial-gradient(circle at 62% 58%, #7b63ff 0 1.6%, #3b22c9 1.6% 5.5%);
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-6);
}
.poster-ai span {
  font-family: var(--bw-serif);
  font-style: italic;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 0.95;
  color: var(--bw-lime);
}

/* The four face buttons */
.poster-game {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  padding: 12%;
  gap: 8%;
}
.poster-game svg { width: 100%; max-width: 8.5rem; height: auto; }
.poster-game svg:nth-child(2) { color: #ff6b8b; }
.poster-game svg:nth-child(3) { color: #a6b8ff; }
.poster-game svg:nth-child(4) { color: #ffb4f0; }

/* Stacked words, alternating fill and outline */
.poster-words {
  flex-direction: column;
  gap: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
}
/* Stroke painted under an opaque fill in the poster colour: the variable
   font's overlapping contours would otherwise show through as stray lines. */
.poster-words .out {
  color: var(--poster);
  -webkit-text-stroke: 4px var(--poster-ink);
  paint-order: stroke fill;
}
.poster-words em {
  font-family: var(--bw-serif);
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  color: #fff4d6;
}

/* A nap, in progress */
.poster-zzz {
  font-family: var(--bw-serif);
  font-style: italic;
  line-height: 1;
}
.poster-zzz span:nth-child(1) { font-size: clamp(3rem, 5vw, 4.5rem); transform: translate(-60%, 40%); }
.poster-zzz span:nth-child(2) { font-size: clamp(5rem, 8vw, 7rem); transform: translate(0, 0); }
.poster-zzz span:nth-child(3) { font-size: clamp(8rem, 13vw, 11rem); transform: translate(20%, -25%); color: #fff0f6; }

/* ---------- Music card ---------- */

.bw-card[hidden] { display: none; }

.bw-card .bw-music-line { margin-bottom: var(--space-6); }

.bw-track {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-hover) ease;
}
.bw-track-title {
  display: block;
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bw-track-artist { display: block; margin-top: 0.35rem; font-size: 1.0625rem; opacity: 0.78; }
.bw-track:hover .bw-track-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

.bw-track-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}
.bw-shuffle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--card-ink);
  color: var(--card);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform var(--duration-press) var(--ease-out);
}
.bw-shuffle svg { width: 1rem; height: 1rem; }
.bw-shuffle:hover svg { transform: rotate(-12deg); }
.bw-shuffle:active { transform: scale(0.95); }
.bw-shuffle:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; }
.bw-shuffle[hidden] { display: none; }
.bw-track-note { font-size: 0.8125rem; opacity: 0.7; }

/* The cover sits square in the middle of the panel; behind it the same image,
   blurred and dimmed, fills the frame in the song's own colours. Selectors
   go through .bw-media so they outrank its generic full-bleed img rule. */
.bw-media .bw-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: scale(var(--zoom, 1));
}
.bw-media .bw-cover-blur {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  transform: none;
  filter: blur(36px) saturate(1.3);
  opacity: 0.55;
}
.bw-cover-frame {
  position: relative;
  display: block;
  height: 78%;
  max-width: 84%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.875rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: opacity 0.25s ease;
}
.bw-media .bw-cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
/* 4:3 covers carry the 16:9 frame between black bars; zooming by 4/3 inside
   the square frame crops them off. */
.bw-media .bw-cover-art.is-boxed { transform: scale(1.334); }

/* Shuffle: the old title blurs out, the new one blurs in, and the new cover
   dissolves over the old one (music.js stacks the two). */
.bw-media .bw-cover-art,
.bw-media .bw-cover-blur { transition: opacity 0.7s var(--ease-out); }
.bw-media .bw-cover-art.is-entering,
.bw-media .bw-cover-blur.is-entering { opacity: 0; transition: none; }

.bw-track {
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}
.is-swapping .bw-track { opacity: 0; filter: blur(6px); transform: translateY(0.25rem); }

/* ---------- Closer ---------- */

.bw-closer {
  position: relative;
  z-index: 1;
  background: #0b0a0c;
  color: #f3ede2;
  padding: var(--space-32) 0;
}
.bw-closer p {
  font-family: var(--bw-sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.8vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 54rem;
  text-wrap: pretty;
}
.bw-closer em { color: var(--bw-lime); font-size: 1.08em; letter-spacing: -0.01em; }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .bw-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .bw-stage { padding: calc(var(--space-12) + 2.5rem) var(--space-4) var(--space-12); }
  .bw-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(9rem, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: 1.5rem;
    min-height: 0;
  }
  .bw-copy { padding: var(--space-2); gap: var(--space-4); }
  .bw-num { font-size: 1.375rem; }
  .bw-card h2 { font-size: 2.125rem; margin-bottom: var(--space-3); }
  .bw-card p { font-size: 1rem; line-height: 1.5; }
  .bw-media { min-height: 9rem; border-radius: 1rem; }
  .poster-words { font-size: 1.9rem; line-height: 0.9; }
  .poster-words .out { -webkit-text-stroke-width: 3px; }
  .poster-game { grid-template-columns: repeat(4, 1fr); padding: 6% 8%; }
  .poster-zzz span:nth-child(3) { font-size: 6rem; }
  .bw-ticker { --tk-h: 3.25rem; }
  .bw-ticker span { font-size: 1.05rem; }
  .bw-closer { padding: var(--space-24) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-strike::after { animation: none; transform: rotate(-4deg); }
  .bw-ticker-track { animation: none; }
  .is-swapping .bw-track { filter: none; transform: none; }
}