/* ==========================================================================
   events.css, 2026-10-21. The Events collection: an infinite, pannable grid of
   event highlights (the playground pattern the owner referenced from
   cathydolle.com/playground), rebuilt in plain DOM + CSS for this site.
   Intro: a tight collage that zooms in and opens up into a spaced grid.
   Click a tile: the grid zooms onto it and the event's small gallery opens.
   Works with events.js; data lives in /collections/events/events.json.
   ========================================================================== */

html.ev-html, html.ev-html body { overflow: hidden; overscroll-behavior: none; height: 100%; }

/* --- Playground stage ------------------------------------------------------ */
.ev-stage {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; background: var(--fo-bg);
}
.ev-stage.is-dragging { cursor: grabbing; }
.ev-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.ev-tile {
  position: absolute; left: 0; top: 0; overflow: hidden;
  background: var(--fo-line);
  opacity: 0;
  transition: opacity 2s cubic-bezier(.215, .61, .355, 1);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.ev-tile.is-in { opacity: 1; }
.ev-tile .ev-media {
  position: absolute; inset: 0;
  transform: scale(1.5);
  filter: grayscale(1);
  transition: transform 2.25s cubic-bezier(.645, .045, .355, 1) 1.25s, filter 2s cubic-bezier(.215, .61, .355, 1) 2.25s;
}
.ev-stage.is-live .ev-tile .ev-media { transform: none; filter: none; }
.ev-tile img, .ev-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}

/* focus: every other tile fades out, the chosen one stays */
.ev-stage.is-focus .ev-tile { transition-duration: 1.2s; transition-delay: 0s !important; }
.ev-stage.is-focus .ev-tile:not(.is-target) { opacity: 0; }
.ev-tile.is-target.is-hidden { opacity: 0; transition-duration: .25s; }

/* --- Pointer marker (same square + label language as the folio marker) ---- */
.ev-cursor {
  position: fixed; left: 0; top: 0; z-index: 65; pointer-events: none; color: var(--fo-ink);
  opacity: 0; transition: opacity .25s ease;
}
.ev-cursor.is-on { opacity: 1; }
.ev-cursor-box {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px;
  border: 1px solid currentColor; display: grid; place-items: center;
  transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), width .4s cubic-bezier(.2, .7, .2, 1), height .4s cubic-bezier(.2, .7, .2, 1);
  background: color-mix(in srgb, var(--fo-bg) 35%, transparent);
}
.ev-cursor-dot { width: 5px; height: 5px; background: currentColor; transform: scale(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ev-cursor.is-on .ev-cursor-box { transform: translate(-50%, -50%) rotate(90deg); width: 20px; height: 20px; }
.ev-cursor.is-on .ev-cursor-dot { transform: scale(1); }
.ev-cursor-label { position: absolute; left: 0; top: 0; transform: translate(18px, -50%); white-space: nowrap; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ev-cursor-label span { display: inline-block; padding: 3px 6px; background: var(--fo-bg); }

/* --- Fixed page chrome ----------------------------------------------------- */
.ev-head {
  position: fixed; left: clamp(16px, 2.4vw, 30px); bottom: 18px; z-index: 60;
  display: flex; align-items: baseline; gap: 18px;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: opacity .5s ease;
}
.ev-head a { color: var(--fo-mut); text-decoration: none; }
.ev-head a:hover { color: var(--fo-ink); }
.ev-head .ev-hint { color: var(--fo-mut); }
.ev-head .ev-hint span { color: var(--fo-ink); }
body.ev-open .ev-head, body.ev-open .fo-contact { opacity: 0; pointer-events: none; }
.fo-contact { transition: opacity .5s ease; }

/* --- Gallery (opens over the focused tile) -------------------------------- */
.ev-gal { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
body.ev-open .ev-gal { pointer-events: auto; }
.ev-gal-scrim { position: absolute; inset: 0; background: transparent; }
body.ev-list-open .ev-gal-scrim { background: var(--fo-bg); }

.ev-frame {
  position: absolute; left: 50%; top: 50%; overflow: hidden;
  background: var(--fo-line);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width .6s cubic-bezier(.645, .045, .355, 1), height .6s cubic-bezier(.645, .045, .355, 1), opacity .3s ease;
}
.ev-frame.is-on { opacity: 1; }
.ev-frame.no-anim { transition: none; }
.ev-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; object-fit: cover; transition: opacity .35s ease; }
.ev-frame > .is-leaving { opacity: 0; }

.ev-ui { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
body.ev-open.ev-ui-on .ev-ui { opacity: 1; pointer-events: auto; }

.ev-close {
  position: absolute; top: 54px; right: clamp(16px, 2.4vw, 30px);
  background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--fo-ink);
  font: inherit; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}
.ev-cap {
  position: absolute; left: clamp(16px, 2.4vw, 30px); bottom: 18px; max-width: 30vw;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.6;
}
.ev-cap .t { color: var(--fo-ink); display: block; }
.ev-cap .m { color: var(--fo-mut); }
.ev-cap a { color: var(--fo-mut); text-decoration: none; display: inline-block; margin-top: 6px; }
.ev-cap a:hover { color: var(--fo-ink); }
.ev-count { position: absolute; right: clamp(16px, 2.4vw, 30px); bottom: 18px; font-size: 11px; letter-spacing: 0.04em; color: var(--fo-mut); font-variant-numeric: tabular-nums; }
.ev-count b { color: var(--fo-ink); font-weight: 400; }

.ev-thumbs {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 6px; max-width: min(60vw, 900px); overflow-x: auto; scrollbar-width: none;
  padding: 2px;
}
.ev-thumbs::-webkit-scrollbar { display: none; }
.ev-thumbs button {
  flex: 0 0 auto; height: 44px; padding: 0; border: 0; background: var(--fo-line); cursor: pointer;
  opacity: .45; transition: opacity .25s ease; outline-offset: 2px;
}
.ev-thumbs button:hover, .ev-thumbs button[aria-current="true"] { opacity: 1; }
.ev-thumbs img { height: 100%; width: auto; display: block; pointer-events: none; }

.ev-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--fo-ink); font: inherit; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 6px; }
.ev-prev { left: clamp(16px, 2.4vw, 30px); }
.ev-next { right: clamp(16px, 2.4vw, 30px); }
.ev-nav[hidden], .ev-thumbs[hidden] { display: none; }

.ev-keys { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); white-space: nowrap; }

.ev-close:focus-visible, .ev-nav:focus-visible, .ev-thumbs button:focus-visible, .ev-cap a:focus-visible { outline: 2px solid var(--fo-accent); outline-offset: 3px; }

/* --- List view: rows per event, opens the same gallery --------------------- */
body.view-list .ev-stage, body.view-list .ev-head .ev-hint, body.view-list .ev-cursor { display: none; }
body.view-list.folio-page { overflow: auto; }
html.ev-html:has(body.view-list) { overflow: auto; }
html.ev-html:has(body.view-list) body { overflow: auto; height: auto; }
.ev-list .fo-row { cursor: pointer; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; }

/* --- Phones ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .ev-cursor { display: none; }
  .ev-cap { max-width: 60vw; bottom: 72px; }
  .ev-count { bottom: 72px; }
  .ev-thumbs { max-width: calc(100vw - 32px); bottom: 16px; }
  .ev-thumbs button { height: 40px; }
  .ev-nav, .ev-keys { display: none; }
  .ev-head .ev-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-tile, .ev-tile .ev-media, .ev-frame, .ev-frame > * { transition: none !important; }
}

.ev-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ev-err { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.ev-gal:focus { outline: none; }