/* On That Day — living scene.
   Every painted element is its own sprite (see scene.js). This layer sits under
   .memory-landscape; the site's flat plates are hidden only once the sprites
   have loaded (html.otd-live). */

.otd-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0b1a3c;
}

/* The painting's own pixel space (1672 × 941), stretched to the window the
   same way the original plates were. */
.otd-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.otd-stage > * {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.otd-sprite {
  will-change: transform, opacity;
}

.otd-sky,
.otd-hills {
  transition: opacity 1.2s ease;
}

/* Moon glow: breathes on its own, flares when you hover or click it. */
.otd-moon-glow {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 214, 160, 0.42) 0%,
    rgba(255, 196, 140, 0.18) 45%,
    rgba(255, 190, 130, 0) 100%
  );
  will-change: transform, opacity;
}
.otd-moon-ring {
  border-radius: 50%;
  border: 2px solid rgba(255, 220, 170, 0.7);
  opacity: 0;
  will-change: transform, opacity;
}

.otd-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Cursor light: a warm glow, screen-blended so it brightens the painting under
   the pointer (a plain blend renders reliably over the moving layers, where
   backdrop-filter does not). */
.otd-halo {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 228, 176, 0.3) 0%,
    rgba(255, 220, 160, 0.14) 45%,
    rgba(255, 220, 160, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.otd-halo.is-on {
  opacity: 1;
}

.otd-blob {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 247, 205, 0.95) 0%,
    rgba(255, 238, 168, 0.6) 30%,
    rgba(255, 232, 150, 0.18) 65%,
    rgba(255, 232, 150, 0) 100%
  );
  mix-blend-mode: screen;
  filter: blur(1.5px);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.otd-blob.is-on {
  opacity: 1;
}

/* Title: one sprite per painted letter, laid over the site's SVG title. */
.otd-title {
  position: absolute;
  pointer-events: none;
}
.otd-letter {
  position: absolute;
  display: block;
  max-width: none;
  will-change: transform;
  transition: filter 0.35s ease;
}
.otd-letter.is-hot {
  filter: drop-shadow(0 0 10px rgba(255, 207, 135, 0.65)) brightness(1.08);
}

html.otd-live .painted-still-plate,
html.otd-live.otd-gl-live .painted-tree-layers {
  visibility: hidden;
}
html.otd-live .app {
  background: transparent !important;
}
html.otd-title-live .sky-title-cutout {
  visibility: hidden;
}

@media (pointer: coarse) {
  .otd-halo,
  .otd-blob {
    display: none;
  }
}

/* Music toggle — styled like the site's own "Pause motion" control, bottom-left. */
.otd-music {
  position: fixed;
  left: 2%;
  bottom: max(2vh, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 30px;
  background: none;
  color: #f6c2a7;
  font: 400 1.1rem "Caveat Brush", Caveat, "Bradley Hand", cursive;
  letter-spacing: 0.035em;
  cursor: pointer;
}
.otd-music:hover {
  color: #f7f0df;
}
.otd-music:focus-visible {
  outline: 1.5px solid #ffcf87;
  outline-offset: 2px;
}
.otd-music__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.otd-music__bars i {
  display: block;
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  transition: height 0.3s ease;
}
.otd-music.is-on .otd-music__bars i {
  animation: otd-bar 1.4s ease-in-out infinite alternate;
}
.otd-music.is-on .otd-music__bars i:nth-child(2) {
  animation-duration: 1.1s;
  animation-delay: -0.4s;
}
.otd-music.is-on .otd-music__bars i:nth-child(3) {
  animation-duration: 1.7s;
  animation-delay: -0.9s;
}
@keyframes otd-bar {
  from { height: 3px; }
  to { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .otd-music.is-on .otd-music__bars i {
    animation: none;
    height: 9px;
  }
}

/* Archive bottom bar (month hint, years, paging) sits over the brightest part
   of the painting — the low clouds and the moonlit lake. A soft dark glow
   behind the text keeps it readable without boxing it in. */
.app.sky-approved .sky-bottom {
  --otd-ink-glow: 0 1px 2px rgba(3, 12, 30, 0.95), 0 0 6px rgba(3, 12, 30, 0.85), 0 0 16px rgba(3, 12, 30, 0.7);
}
.app.sky-approved .sky-bottom .sky-month-hint {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 4px 16px;
  color: #fff6e2;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: var(--otd-ink-glow);
}
.app.sky-approved .sky-bottom .sky-month-hint::before {
  content: '';
  position: absolute;
  inset: -6px -24px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(3, 12, 30, 0.55), rgba(3, 12, 30, 0));
  pointer-events: none;
}
.app.sky-approved .sky-bottom .sky-years button,
.app.sky-approved .sky-bottom .garden-paging,
.app.sky-approved .sky-bottom .garden-paging * {
  text-shadow: var(--otd-ink-glow);
}

/* Phones: a clean dark fade behind the header instead of a blurred strip of
   painting, readable pills for the bottom controls, and room at the end of
   the archive so the years and paging can scroll clear of those controls. */
@media (max-width: 760px) {
  html .app.sky-approved .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(rgba(4, 14, 34, 0.85) 0%, rgba(4, 14, 34, 0.6) 55%, rgba(4, 14, 34, 0) 100%);
  }
  html .app.sky-approved .motion-control,
  .otd-music {
    bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(4, 14, 34, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px;
  }
  .otd-music {
    left: 12px;
  }
  html .app.sky-approved.page-browse:not(.is-threshold) > main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Phones: the two bottom controls become small round icon buttons in the
   corners, so they clear the archive's year strip. Their words stay in the
   page for screen readers (visually hidden, not removed). */
@media (max-width: 760px) {
  html .app.sky-approved .motion-control,
  .otd-music {
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    justify-content: center;
  }
  html .app.sky-approved .motion-control {
    right: 12px;
  }
  html .app.sky-approved .motion-control > span:first-child {
    display: inline;
    width: auto;
    font: 600 0.95rem/1 system-ui, sans-serif;
  }
  html .app.sky-approved .motion-control > span:last-child,
  .otd-music__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* At rest the music bars keep a little height, so the icon reads as music. */
.otd-music:not(.is-on) .otd-music__bars i:nth-child(1) { height: 5px; }
.otd-music:not(.is-on) .otd-music__bars i:nth-child(2) { height: 9px; }
.otd-music:not(.is-on) .otd-music__bars i:nth-child(3) { height: 6px; }