/* ============================================================
   auroo.art — "The Board": an infinite canvas of client films.
   Loaded only by /mirrorless-2. Consumes the tokens in site.css.

   Progressive enhancement: without .js-ready on <html> the world
   collapses to an ordinary responsive grid and every clip is a
   plain poster + <video> link. Nothing here is JS-only content.
   ============================================================ */

/* ---------- 1. Section chrome ---------- */
.bleed {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.board-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: var(--s-4);
}
.board-intro__legend {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-meta);
  line-height: 1.9;
}
.board-intro__legend b { color: var(--acid); font-weight: 600; }

/* ---------- 2. The board shell ---------- */
.board {
  position: relative;
  height: clamp(560px, 86vh, 980px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #050505;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

/* expanded: takes the whole window, page scroll is locked by JS */
.board.is-full {
  position: fixed;
  inset: 0;
  z-index: 300;
  height: 100dvh;
  width: 100vw;
  max-width: none;
  border-radius: 0;
  border: 0;
}

.board__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.js-ready .board__viewport {
  cursor: grab;
  touch-action: none;
  /* the dot grid is painted here and re-offset by JS so it travels
     with the world instead of sitting still behind it */
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0;
}
.js-ready .board__viewport.is-dragging { cursor: grabbing; }
.board__viewport:focus-visible { outline: 2px solid var(--acid); outline-offset: -4px; }

/* vignette so tiles fade out at the edges rather than hard-clipping */
.board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.js-ready .board__world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---------- 3. Tiles ---------- */
.js-ready .tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  rotate: var(--r, 0deg);
  margin: 0;
}

/* Oversized cluster wordmarks sitting behind the tiles. They exist so the
   board still reads as three places when it is zoomed all the way out and
   the caption type has collapsed to a few pixels. */
.tile--ghost {
  z-index: 0;
  font-family: var(--f-display);
  font-size: 240px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  user-select: none;
}

.tile--media {
  z-index: 2;
  display: block;
  padding: 0;
  text-align: left;
  border-radius: 14px;
  background: #0c0c0c;
  transition:
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-mid) var(--e-out);
  box-shadow: 0 18px 60px -30px rgba(0, 0, 0, 0.9);
}
.js-ready .tile--media:hover,
.js-ready .tile--media:focus-visible {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1);
  z-index: 3;
}

.tile__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 9 / 16);
  overflow: hidden;
  border-radius: 14px;
  background: #101010;
  border: 1px solid var(--line-soft);
}
.tile__frame > img,
.tile__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile__frame > video {
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-out);
  z-index: 1;
}
.tile__frame > video.is-live { opacity: 1; }

/* de-saturate at rest so the board reads as one surface; colour
   returns on hover and whenever the clip is actually rolling */
.tile__poster { filter: saturate(0.7) contrast(1.02); transition: filter var(--d-mid) var(--e-out); }
.tile--media:hover .tile__poster,
.tile--media.is-playing .tile__poster { filter: none; }

/* play affordance */
.tile__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring);
}
.tile__play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 20px solid var(--acid);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.tile--media:hover .tile__play,
.tile--media:focus-visible .tile__play { opacity: 1; transform: scale(1); }

/* caption bar under each clip */
.tile__bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 4px 0;
  font-family: var(--f-ui);
  font-size: 22px;
  line-height: 1.3;
}
.tile__idx {
  color: var(--acid);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.tile__name { color: var(--fg); font-weight: 500; }
.tile__meta {
  margin-left: auto;
  color: var(--fg-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 18px;
  white-space: nowrap;
}

/* ---------- 4. Text objects on the canvas ---------- */
.tile--card {
  z-index: 1;
  padding: 34px 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(16, 16, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tile--head {
  border-color: rgba(225, 255, 0, 0.28);
  background: rgba(20, 22, 8, 0.7);
}
.card__idx {
  font-family: var(--f-ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--acid);
  margin-bottom: 14px;
}
.card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.tile--note .card__title { font-size: 40px; font-family: var(--f-case); font-weight: 600; letter-spacing: -0.01em; }
.card__meta {
  font-family: var(--f-ui);
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin-top: 12px;
}
.card__body {
  font-family: var(--f-case);
  font-size: 27px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 18px;
}
.card__list { margin-top: 18px; display: grid; gap: 8px; }
.card__list li {
  font-family: var(--f-ui);
  font-size: 21px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.card__list li::before { content: '— '; color: var(--acid); }

/* ---------- 5. Overlaid controls ---------- */
.board__ui {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 0.4rem;
  pointer-events: none;
}
.board__ui > * { pointer-events: auto; }

.board__ui--clusters { top: 0.9rem; left: 0.9rem; flex-wrap: wrap; max-width: calc(100% - 1.8rem); }
.board__ui--zoom { bottom: 0.9rem; right: 0.9rem; }
.board__ui--hint { bottom: 0.9rem; left: 0.9rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.chip:hover { color: var(--acid); border-color: rgba(225, 255, 0, 0.4); }
.chip[aria-pressed="true"] { background: var(--acid); color: #000; border-color: var(--acid); }
.chip__n { font-variant-numeric: tabular-nums; opacity: 0.6; }
.chip[aria-pressed="true"] .chip__n { opacity: 0.55; }

.chip--icon { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 15px; }
/* a class selector outranks the UA rule for [hidden], so the sound toggle
   would still show on the print tile without this */
.chip[hidden] { display: none; }

/* the chip row has to survive a 375px viewport: drop to numbers only */
.chip__short { display: none; }
@media (max-width: 640px) {
  .chip__t { display: none; }
  .chip__short { display: inline; }
  .chip { padding: 0.5rem 0.7rem; }
  .chip__n { opacity: 1; }
}

.board__hint {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-meta);
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.9rem;
  transition: opacity var(--d-mid) var(--e-out);
}
.board.is-touched .board__hint { opacity: 0.25; }

/* ---------- 6. Lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}
.lb[hidden] { display: none; }

.lb__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(10px);
  animation: lbFade var(--d-fast) var(--e-out) both;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lb__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  max-width: 1180px;
  width: 100%;
  animation: lbIn var(--d-mid) var(--e-out) both;
}
@keyframes lbIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Sized from the ratio so both a 9:16 phone cut and a 16:9 in-store loop
   land inside the window without letterboxing: take the tallest height the
   viewport allows, derive the width from it, then cap that at the column.
   --ar is written by board.js as a plain number (16/9 -> 1.7778). */
.lb__stage {
  --stage-h: min(78vh, 820px);
  position: relative;
  justify-self: end;
  width: min(100%, calc(var(--stage-h) * var(--ar, 0.5625)));
  aspect-ratio: var(--ar, 0.5625);
  max-height: var(--stage-h);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.lb__stage > video,
.lb__stage > img { width: 100%; height: 100%; object-fit: contain; background: #000; }

.lb__idx {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--acid);
}
.lb__title {
  font-family: var(--f-case);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.7rem;
}
.lb__meta {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin-top: 0.7rem;
}
.lb__copy {
  font-family: var(--f-case);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-muted);
  margin-top: 1.1rem;
}
.lb__actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }

.lb__close {
  position: absolute;
  top: -0.25rem;
  right: 0;
  z-index: 2;
}
.lb__count {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-meta);
  margin-top: 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. Engagement write-ups ---------- */
.engage { border-top: 1px solid var(--line-soft); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.engage:last-of-type { border-bottom: 1px solid var(--line-soft); }
.engage__grid {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}
.engage__idx {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--acid);
  padding-top: 0.5rem;
}
.engage__title { font-family: var(--f-display); font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; }
.engage__sub {
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin-top: 0.9rem;
}
.engage__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.engage__tags li {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.7rem;
}
.engage__body { font-family: var(--f-case); font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); }
.engage__body p + p { margin-top: 1rem; }
.engage__body strong { color: var(--fg); font-weight: 500; }

/* ---------- 8. No-JS / fallback grid ---------- */
html:not(.js-ready) .board { height: auto; overflow: visible; background: none; border: 0; }
html:not(.js-ready) .board::after,
html:not(.js-ready) .board__ui { display: none; }
html:not(.js-ready) .board__viewport { position: static; }
html:not(.js-ready) .board__world {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
html:not(.js-ready) .tile { rotate: none; width: auto; }
html:not(.js-ready) .tile--head { grid-column: 1 / -1; }
html:not(.js-ready) .tile--ghost { display: none; }
/* the grid fallback renders the world at 1:1, where type sized for a
   canvas viewed at ~0.5 scale would be enormous — bring it back to page scale */
html:not(.js-ready) .tile--card { padding: 1.4rem 1.5rem; }
html:not(.js-ready) .card__idx { font-size: 12px; margin-bottom: 0.75rem; }
html:not(.js-ready) .card__title { font-size: 40px; }
html:not(.js-ready) .tile--note .card__title { font-size: 22px; }
html:not(.js-ready) .card__meta { font-size: 11px; margin-top: 0.6rem; }
html:not(.js-ready) .card__body { font-size: 15px; margin-top: 0.9rem; }
html:not(.js-ready) .card__list { margin-top: 0.9rem; gap: 0.3rem; }
html:not(.js-ready) .card__list li { font-size: 12px; }
html:not(.js-ready) .tile__bar { font-size: 13px; padding: 0.6rem 0.15rem 0; gap: 0.5rem; }
html:not(.js-ready) .tile__meta { font-size: 11px; }

/* ---------- 9. Responsive ---------- */
@media (max-width: 900px) {
  .board-intro { grid-template-columns: 1fr; align-items: start; }
  .lb__panel { grid-template-columns: 1fr; align-content: start; max-height: 100%; overflow-y: auto; }
  .lb__stage { --stage-h: min(52vh, 460px); justify-self: center; }
  .lb__close { top: 0.25rem; right: 0.25rem; }
  .engage__grid { grid-template-columns: 1fr; }
  .engage__idx { padding-top: 0; }
}
@media (max-width: 640px) {
  .board { height: clamp(460px, 72vh, 620px); }
  .board__ui--hint { display: none; }
}

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tile--media,
  .tile__poster,
  .tile__play,
  .chip { transition: none; }
  .lb__scrim, .lb__panel { animation: none; }
  .js-ready .tile--media:hover { transform: none; }
}