/* =====================================================================
   Home — clock + screensaver
   ===================================================================== */
.is-home .site-main { padding: 0; }

.home {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

/* Screensaver — sits behind the clock, centered to the viewport (matches
   the clock's centering context so image + clock share a center).
   Vertical inset gives the image breathing room top and bottom. */
.home__screensaver {
  position: absolute;
  inset: 10vh var(--frame);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.home.is-screensaver-visible .home__screensaver {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.home__slide {
  position: absolute;
  inset: 0;
  margin: auto;
  /* Fit the available frame; honour the source aspect (4:3 ish) without
     letterboxing. The slide grows until either axis hits the frame. */
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.home__slide.is-current { opacity: 1; }
/* The image's own box: as large as fits the slide at the image's aspect
   ratio (--ratio, width / height), so the whole image shows uncropped
   and the caption can hang a fixed distance below its bottom edge. */
.home__slide-frame {
  position: relative;
  width: min(100cqw, 100cqh * var(--ratio));
  aspect-ratio: var(--ratio);
}
.home__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home__slide-caption {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin: 12px 0 0;
  /* The first images fade in under the clock, whose lower letters land
     right on this line — on a phone and on a wide screen both. So the
     title waits out the clock's own fade (Home > Clock fade-out
     duration) and only then appears. */
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  /* Matches the project titles on the Projects/Objects index. */
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

.home.is-clock-hidden .home__slide-caption {
  opacity: 1;
  transition-delay: var(--clock-fade, var(--t-slow));
}

/* Clock — overlays the screensaver until dismissed */
.home__clock {
  position: relative;
  z-index: 5;
  /* Letters should reach close to the viewport edges. We use vmin so
     the clock fills the smaller axis; the slight inset (96 not 100)
     keeps the letters from pressing against the page padding. */
  width: min(96vmin, 1100px);
  aspect-ratio: 1;
  display: block;
  transition:
    opacity   var(--clock-fade, var(--t-slow)) var(--ease),
    transform var(--clock-fade, var(--t-slow)) var(--ease);
  cursor: pointer;
}
.home.is-clock-hidden .home__clock {
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
}

/* Clock — pure HTML/CSS. Every measurement is a percentage of the clock
   box so it scales freely with .home__clock. Letters sit on a circle of
   radius 36.25% (i.e. distance from edge = 13.75%); the hands are
   full-size square layers that rotate around the centre. */
.clock {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  container-type: inline-size;
}

.clock__letters,
.clock__hands {
  position: absolute;
  inset: 0;
}

.clock__letter {
  position: absolute;
  inset: 0;
  transform: rotate(var(--angle));
}
.clock__letter span {
  position: absolute;
  /* Letters sit on a circle of radius 41% — i.e. 9% inset from the
     clock box edge. */
  top: 9%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
  font-family: var(--font-sans);
  font-size: 2.2cqi;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}

.clock__hand {
  position: absolute;
  inset: 0;
  transform: rotate(var(--angle, -90deg));
  transform-origin: 50% 50%;
  /* Snap, don't smooth — the hands tick. */
  transition: none;
}
.clock__hand-label {
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 2cqi;
  letter-spacing: var(--tracking-w);
  white-space: nowrap;
  color: var(--ink);
}

.clock__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5%;
  height: 1.5%;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  /* Mobile keeps the same centered clock + fading slideshow (no scroll). */
  /* Letters sit ~9% inset, so they only span the middle ~83.5% of the
     clock box. Scale the box up so the 3 & 9 o'clock letters land on the
     slideshow's left/right edges. flex-shrink:0 stops .home's flexbox
     from shrinking the box back down (it may overflow the viewport; the
     empty corners are clipped by body overflow-x:clip). */
  .home__clock {
    width: calc((100vw - (2 * var(--frame-sm))) / 0.817);
    flex-shrink: 0;
  }
  .home__screensaver { inset: 10vh var(--frame-sm); }
}