/* The home page: a fixed composition of rows (not a free masonry). The four rows repeat, and the page is plain placeholder
   boxes for now: no hover, no reveal, no motion on them.

     a  landscape | 4:5            c  4:5 | landscape
     b  4:5 | 4:5 | square          d  square | 4:5 | 4:5

   A landscape fills the height of the 4:5 beside it; a square sits at the top of its row. */

/* .page is everything that eases back behind a sheet, and rises into place when the holding screen lifts */
.page {
  transform-origin: 50% var(--oy, 50vh);
  transition: transform var(--dur-lift) var(--ease-in-out), scale var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out);
}
html.is-holding:not(.is-lifting) .page { transform: translateY(14vh); }
html.sheet-open .page { scale: 0.98; opacity: 0.7; transition-duration: var(--dur-lift), var(--dur-slow), var(--dur-slow); transition-timing-function: var(--ease-in-out), var(--ease-out), var(--ease-out); }
html.sheet-open { overflow: hidden; }

.home { padding: 0 var(--pad) var(--pad); }

/* the grid fades out and back in when a filter changes */
#grid { transition: opacity var(--dur-fast) var(--ease-out); }
#grid.is-changing { opacity: 0; }

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.box { position: relative; display: block; }

/* the picture: it is the part that moves on hover (see below); the text over it never does */
.box-media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); background: var(--box); isolation: isolate; transition: opacity var(--dur-base) var(--ease-out), scale calc(var(--dur-base) * 1.2) var(--ease-out); }
.box-zoom { position: absolute; inset: -2px; will-change: scale;   /* a little over the card on every side, so the picture's edge is never a pixel short of the clip */ transition: scale calc(var(--dur-slow) * 1.6) cubic-bezier(0.33, 0, 0.2, 1); }
.box-media.has-pic { background: transparent; }   /* no grey card behind a picture, so nothing light can show round its edge */
.box-zoom > img, .box-zoom > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.box-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; transition: opacity var(--dur-base) var(--ease-out);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 62%); }

/* hovering a card: only the picture moves. It eases in a touch (no drift) and a soft light follows the pointer slowly. The other cards
   stay exactly as they were (no dimming), and the card itself and its text stay put. */
@media (hover: hover) {
  .box:hover .box-zoom { scale: 1.035; }
  .box:hover .box-media::before { opacity: 1; }
}

/* the title and subtitle top left, the tags bottom left, over soft scrims so they read on any picture (light cards use dark text) */
.box-over {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--r);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 38%),
    linear-gradient(to top, rgba(0, 0, 0, 0.36), transparent 34%);
}
.box-title { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: var(--fw-medium); line-height: 1.15; }
.box-sub { margin: 3px 0 0; font-size: clamp(13px, 1.1vw, 15px); }
.box-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.box-tags span {
  padding: 7px 12px 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: clamp(12px, 1vw, 14px);
  text-transform: capitalize;
  text-shadow: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.box:hover .box-tags span { border-color: rgba(255, 255, 255, 0.7); }
/* a coming-soon card has no tags, so nothing sits at the bottom to need the darkening: its picture shows as it is */
.box--soon .box-over { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 38%); }
.box[data-tone="dark"] .box-over { color: var(--ink); text-shadow: none; background: none; }
.box[data-tone="dark"] .box-tags span { border-color: rgba(29, 29, 27, 0.35); background: rgba(255, 255, 255, 0.35); }
.box[data-tone="dark"]:hover .box-tags span { border-color: rgba(29, 29, 27, 0.65); }
.box--wide { grid-column: span 8; }
.box--tall { grid-column: span 4; aspect-ratio: 4 / 5; }
.box--square { grid-column: span 4; aspect-ratio: 1; align-self: start; }

/* phones: one box per line, each at its own shape */
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; }
  .box--wide, .box--tall, .box--square { grid-column: auto; }
  .box--wide { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-holding:not(.is-lifting) .page { transform: none; }
}

/* the "View" bubble that follows the pointer over a card (js/cursor.js); it only exists where there is a pointer to follow */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; }
.cursor span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-light);
  font-size: 13px;
  font-weight: var(--fw-medium);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-spring);
}
.cursor.is-on span { transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* the logos card (js/grid.js initLogos): it rests on its cover, then each mark shows on its own colour. No hover effect on the picture; the text
   takes each mark's ink, and the tags go while a mark fills the card */
.logo-stage { position: absolute; inset: 0; isolation: isolate; }
.logo-slide { position: absolute; inset: 0; display: grid; place-items: center; }
.logo-slide:not(:first-child) { opacity: 0; }
.logo-slide img, .logo-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.box.box-logos:hover .box-zoom { scale: 1; }
.box.box-logos:hover .box-media::before { opacity: 0; }
.box-logos .box-over, .box-logos .flip-count { color: var(--logo-ink, #fff); transition: color 0.6s var(--ease-out); }
.box-logos .box-over { text-shadow: none; background: none; }
.box-logos[data-on-cover] .box-over { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 38%), linear-gradient(to top, rgba(0, 0, 0, 0.36), transparent 34%); }
.box-logos .box-tags { transition: opacity var(--dur-base); }
.box-logos[data-on-full] .box-tags { opacity: 0; }
.box-logos .box-tags span { border-color: color-mix(in srgb, currentColor 40%, transparent); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.box-logos:hover .box-tags span { border-color: currentColor; }
.flip-count {
  position: absolute; z-index: 3;
  right: clamp(16px, 1.8vw, 24px); bottom: clamp(16px, 1.8vw, 24px);
  font-size: var(--fs-s); font-weight: var(--fw-medium); letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}

/* a photo card is only a picture: no hover effect */
.box-photo:hover .box-zoom { scale: 1; }
.box-photo:hover .box-media::before { opacity: 0; }