/* ============================================================
   Henry Collins — live moodboard
   Layout is a faithful port of the Canva prototype:
   a fixed 1366 x 768 canvas, scaled as a whole to fit any
   viewport so the composition stays pixel-exact everywhere.
   ============================================================ */

/* --- Typeface -------------------------------------------------
   Instrument Sans throughout — a neo-grotesque in the Helvetica
   line, set slightly tight the way Helvetica usually is.

   ------------------------------------------------------------- */
:root {
  --font: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-size: 18px;     /* the three intro beats */
  --cue-size: 14px;      /* "Click around to explore." — quieter than the rest */
  --panel-size: 16px;    /* the writing behind each photograph */
  --panel-leading: 1.4;
  --tracking: -0.006em;

  --ink: #000000;
  --paper: #ffffff;

  /* Canvas dimensions from the Canva design */
  --canvas-w: 1366;
  --canvas-h: 768;
  --scale: 1;

  /* Motion */
  --ease-board: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 320ms;
  --dur-scatter: 900ms;
  --dur-assemble: 1000ms;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
}

/* --- Stage ----------------------------------------------------
   The 1366x768 canvas, scaled as one piece to fit the window so the
   layout stays exactly as designed at any size.

   Deliberately NOT overflow:hidden. The canvas is usually smaller
   than the window — a browser window is wider than 16:9 once the
   tab and address bars take their share — so clipping here would
   cut the scattering photographs off at an invisible line inside
   the window. Instead they run past the canvas and are clipped by
   the window itself; script.js pushes each one out far enough to
   clear the real screen edge.
   ------------------------------------------------------------- */
#stage {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(var(--canvas-w) * 1px);
  height: calc(var(--canvas-h) * 1px);
  background: var(--paper);
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--scale));
}

/* --- Tiles ----------------------------------------------------
   Each tile is positioned at 0,0 and placed with a transform so
   only compositor-friendly properties animate.
   ------------------------------------------------------------- */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: center center;
  will-change: transform;
  transition: transform var(--dur-hover) var(--ease-board);
  -webkit-tap-highlight-color: transparent;
}

/* Pointer interaction is handled by the static hit zones below,
   never by the tiles themselves — a tile that moves out from under
   the cursor would fire mouseleave and oscillate. Tiles stay
   focusable and keyboard-operable. */
.tile { pointer-events: none; }

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* Object positions derived from the crop values in the Canva file */
#tile-corkboard  img { object-position: 50% 50%; }
#tile-sunset     img { object-position: 50% 50%; }
#tile-polaroid   img { object-position: 50% 0%; }
#tile-balenciaga img { object-position: 50% 50%; }
#tile-baybridge  img { object-position: 65.36% 50%; }

/* Paint order from the Canva design (corkboard at back) */
#tile-corkboard  { z-index: 2; }
#tile-sunset     { z-index: 3; }
#tile-polaroid   { z-index: 4; }
#tile-balenciaga { z-index: 5; }
#tile-baybridge  { z-index: 6; }

/* --- Click targets ---------------------------------------------
   Invisible, and they never move. The photographs take no pointer
   events, so these stationary rectangles carry the clicks — which
   also means a photograph flying away from the cursor can never
   disturb the pointer state.
   ---------------------------------------------------------------- */
.hit {
  position: absolute;
  z-index: 10;
  background: transparent;
  cursor: pointer;
}

/* Interaction is disabled during the intro. Once a photograph is open,
   the targets stand down too: any click returns to the board, and the
   panels' links need to be reachable underneath them. */
#stage[data-phase="intro"] .hit { cursor: default; pointer-events: none; }
#stage[data-focused="true"] .hit { pointer-events: none; }

/* --- Panels ----------------------------------------------------
   The writing behind each photograph. Positions, widths and
   alignment are taken from pages 5, 7, 9, 11 and 13 of the Canva
   design; the type is the page face at the size set there.

   These fade IN only — once open they stay put, so there's no
   timer pulling the words away mid-sentence. They fade back out
   only when the board is restored.
   ---------------------------------------------------------------- */
.panel {
  position: absolute;
  z-index: 8;
  font-size: var(--panel-size);
  line-height: var(--panel-leading);
  letter-spacing: 0;      /* body copy, so none of the display tracking */
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.panel.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}

.panel.align-end { text-align: right; }

/* A blank line between paragraphs, matching the design's spacing —
   derived from the type size so it stays a true blank line if the
   size changes. */
.panel p { margin: 0 0 calc(var(--panel-size) * var(--panel-leading)); }
.panel p:last-child { margin-bottom: 0; }

/* Links stay clickable even though the panel itself lets clicks
   through to the board beneath it. */
.panel a {
  pointer-events: auto;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.panel a:hover { text-decoration-thickness: 2px; }

/* --- Intro -----------------------------------------------------
   Four beats, each centred on the canvas centre line (x 683) —
   where the original two lines were centred in the Canva design.
   ---------------------------------------------------------------- */
.intro-line {
  position: absolute;
  z-index: 7;
  top: 372px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-size);
  letter-spacing: var(--tracking);
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.intro-line.is-visible { opacity: 1; }

/* The cue sits below the assembled board — the lowest photograph ends
   at y 650, so this is centred in the clear band beneath it, and set
   smaller than the intro beats since it's an aside rather than a line
   of the greeting. */
.intro-line.cue {
  top: 697px;
  font-size: var(--cue-size);
}

/* --- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-scatter: 1ms;
    --dur-assemble: 1ms;
  }
  .intro-line { transition-duration: 1ms; }
}