/* viewport-clock.css — the shared viewport grid and media-hover clock.
   The geometry follows withok.kr: four square anchors, a centred crosshair,
   twelve radial ticks and live Amsterdam/Korea hands. */

:root {
  --viewport-clock-accent: #0000ff;
  --viewport-clock-line-width: 0.065rem;
  --viewport-clock-corner-size: 1rem;
  --viewport-clock-corner-centre-size: 0.5rem;
}

.viewport-clock {
  --media-clock-color: var(--viewport-clock-accent);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: calc(100dvh + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  /* Above the split detail iframe (120), below consent (200) and loading (4000). */
  z-index: 180;
}

.viewport-clock[hidden] { display: none !important; }

/* A desktop split panel already keeps the parent site's header on the left.
   The iframe is only half a viewport wide, so its own responsive breakpoint
   would otherwise show a second, mobile-style header on the right. */
html.is-detail-embed .site-header { display: none; }
html.is-detail-embed .project-detail { margin-top: 0; }

/* JS adds this class to every existing or dynamically-created media frame. */
.media-clock-target:not(.viewport-clock) { position: relative; }

.media-clock-face {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  transform: scale(0.98);
  transform-origin: center;
  transition: opacity 0.15s ease, transform 0.2s ease;
  pointer-events: none;
}

.media-clock-target:hover > .media-clock-face,
.media-clock-target:focus-within > .media-clock-face,
.media-clock-target.is-clock-visible > .media-clock-face {
  opacity: 1;
  transform: scale(1);
}

.media-clock-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.media-clock-tick,
.media-clock-hand {
  fill: none;
  stroke: var(--media-clock-color, var(--viewport-clock-accent));
  stroke-width: var(--viewport-clock-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.media-clock-corner {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--viewport-clock-corner-size);
  height: var(--viewport-clock-corner-size);
  background: var(--media-clock-color, var(--viewport-clock-accent));
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.2s ease;
  pointer-events: none;
}

.media-clock-corner[data-corner="0"] { top: 0; left: 0; }
.media-clock-corner[data-corner="1"] { top: 0; right: 0; }
.media-clock-corner[data-corner="2"] { bottom: 0; left: 0; }
.media-clock-corner[data-corner="3"] { right: 0; bottom: 0; }

.media-clock-target:hover > .media-clock-corner,
.media-clock-target:focus-within > .media-clock-corner,
.media-clock-target.is-clock-visible > .media-clock-corner {
  opacity: 1;
  transform: scale(1);
}

.media-clock-crosshair {
  position: absolute;
  z-index: 7;
  background: var(--media-clock-color, var(--viewport-clock-accent));
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.media-clock-crosshair[data-axis="h"] {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--viewport-clock-line-width);
  transform: translateY(calc(var(--viewport-clock-line-width) / -2)) scaleX(0);
  transform-origin: center;
}

.media-clock-crosshair[data-axis="v"] {
  top: 0;
  left: 50%;
  width: var(--viewport-clock-line-width);
  height: 100%;
  transform: translateX(calc(var(--viewport-clock-line-width) / -2)) scaleY(0);
  transform-origin: center;
}

.media-clock-target:hover > .media-clock-crosshair,
.media-clock-target:focus-within > .media-clock-crosshair,
.media-clock-target.is-clock-visible > .media-clock-crosshair {
  opacity: 1;
}

.media-clock-target:hover > .media-clock-crosshair[data-axis="h"],
.media-clock-target:focus-within > .media-clock-crosshair[data-axis="h"],
.media-clock-target.is-clock-visible > .media-clock-crosshair[data-axis="h"] {
  transform: translateY(calc(var(--viewport-clock-line-width) / -2)) scaleX(1);
}

.media-clock-target:hover > .media-clock-crosshair[data-axis="v"],
.media-clock-target:focus-within > .media-clock-crosshair[data-axis="v"],
.media-clock-target.is-clock-visible > .media-clock-crosshair[data-axis="v"] {
  transform: translateX(calc(var(--viewport-clock-line-width) / -2)) scaleY(1);
}

/* The viewport version is always drawn; only its four small corner hit areas
   accept a pointer, leaving navigation, scrolling and the detail panel usable. */
.viewport-clock > .media-clock-face {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: none;
}

.viewport-clock > .media-clock-face--korea {
  z-index: 5;
  transition: none;
}

.viewport-clock > .media-clock-face--korea .media-clock-hand {
  stroke: rgba(143, 143, 143, 0.72);
  stroke: color-mix(
    in srgb,
    var(--ink, var(--main-color, #e4e3dd)) 45%,
    var(--bg, var(--background-color, #111110))
  );
}

.viewport-clock > .media-clock-corner {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  cursor: pointer;
}

.viewport-clock > .media-clock-corner:hover::before {
  content: '';
  width: var(--viewport-clock-corner-centre-size);
  height: var(--viewport-clock-corner-centre-size);
  flex: 0 0 auto;
  background: var(--bg, var(--background-color, #ffffff));
}

.viewport-clock > .media-clock-crosshair { opacity: 1; }
.viewport-clock > .media-clock-crosshair[data-axis="h"] {
  transform: translateY(calc(var(--viewport-clock-line-width) / -2)) scaleX(1);
}
.viewport-clock > .media-clock-crosshair[data-axis="v"] {
  transform: translateX(calc(var(--viewport-clock-line-width) / -2)) scaleY(1);
}

/* Direct project gallery media are replaced at runtime with one neutral wrapper
   so an absolutely-positioned clock can share each image/video's exact box. */
.project-media > .media-clock-project {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 var(--grid-gap, 1rem);
  break-inside: avoid;
}

.project-media > .media-clock-project--lead { column-span: all; }
.project-media > .media-clock-project--solo {
  column-span: all;
  width: min(100%, calc(78svh * var(--media-clock-ratio, 1)));
  margin-right: auto;
  margin-left: auto;
}

.project-media > .media-clock-project > img,
.project-media > .media-clock-project > video,
.project-media > .media-clock-project > .project-media-lead,
.project-media > .media-clock-project > .project-media-solo {
  width: 100%;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .media-clock-face,
  .media-clock-corner,
  .media-clock-crosshair {
    transition: none;
  }
}

@media print {
  .viewport-clock,
  .media-clock-face,
  .media-clock-corner,
  .media-clock-crosshair {
    display: none !important;
  }
}