/* =========================================================
   vcr-clock.css
   A live seven-segment digital clock, positioned to sit right
   over the VCR's built-in counter/clock window in the photo
   (background.webp). Shows the visitor's own local time —
   plain JS Date, so it's automatically their timezone, no
   lookup needed. Segments are CSS clip-path bars (no digital
   font needed), toggled on/off per digit by js/app.js.

   NOTE ON POSITIONING: the VCR's actual display window is
   small and dim in the source photo, not a bright landmark
   like the TV screen, so these coordinates are a best-effort
   estimate rather than a precise measurement. Nudge
   left/top/width/height below if it doesn't sit exactly over
   the real display once you see it live.
   ========================================================= */

.vcr-clock {
  position: absolute;
  left: 84.7%;
  top: 74.1%;
  width: 4%;
  height: 2.3%;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;

  background: #000;
  border-radius: 2px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
}

.vcr-clock__digit {
  position: relative;
  width: 18%;
  height: 70%;
  flex: 0 0 auto;
}

.vcr-clock__seg {
  position: absolute;
  background: #0a2e18; /* unlit segment — faint green ghost, like a real LCD */
  transition: background 80ms linear, opacity 80ms linear;
}

.vcr-clock__seg.is-on {
  background: #3dff7a;
  box-shadow: 0 0 2px #3dff7a, 0 0 5px rgba(61, 255, 122, 0.6);
}

/* Horizontal bars: a (top), g (middle), d (bottom) */
.vcr-clock__seg--a,
.vcr-clock__seg--g,
.vcr-clock__seg--d {
  left: 12%;
  width: 76%;
  height: 12%;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
}
.vcr-clock__seg--a { top: 0%; }
.vcr-clock__seg--g { top: 44%; }
.vcr-clock__seg--d { top: 88%; }

/* Vertical bars: f/b (upper left/right), e/c (lower left/right) */
.vcr-clock__seg--f,
.vcr-clock__seg--b,
.vcr-clock__seg--e,
.vcr-clock__seg--c {
  width: 12%;
  height: 42%;
  clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
}
.vcr-clock__seg--f { left: 0%;  top: 6%; }
.vcr-clock__seg--b { left: 88%; top: 6%; }
.vcr-clock__seg--e { left: 0%;  top: 52%; }
.vcr-clock__seg--c { left: 88%; top: 52%; }

.vcr-clock__colon {
  flex: 0 0 auto;
  width: 6%;
  height: 70%;
  position: relative;
}

.vcr-clock__colon-dot {
  position: absolute;
  left: 27.5%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 1px;
  background: #0a2e18;
  transition: background 80ms linear;
}

.vcr-clock__colon-dot--top { top: 15%; }
.vcr-clock__colon-dot--bottom { top: 65%; }

.vcr-clock__colon.is-on .vcr-clock__colon-dot {
  background: #3dff7a;
  box-shadow: 0 0 1px #3dff7a;
}

@media (max-width: 47.5em) {
  /* No photo scene on mobile (see mobile.css — .scene__bg is
     hidden and the whole layout switches to a card stack), so
     this percentage-positioned overlay has nothing to anchor
     to. Hide it there; the CSS-drawn mobile TV doesn't have a
     VCR under it to begin with. */
  .vcr-clock {
    display: none;
  }
}