/* Play page: dark, loud, a little unruly */
html.dark, html.dark body { background: var(--onyx); color: var(--ivory); }

/* ---- Arena: the big word; its letters fill with images ---- */
.arena { position: relative; height: 100svh; min-height: 560px; overflow-x: clip; overflow-y: visible; display: grid; place-items: center; background: #0a0a0a url("/assets/img/floral.webp") center / cover no-repeat; }
.arena::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,10,10,.1) 0%, rgba(10,10,10,.65) 100%); }
.word {
  position: relative; margin: 0; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; cursor: default;
  font: 600 clamp(190px, 46vw, 860px)/.9 var(--serif); letter-spacing: -.03em; padding-bottom: .24em;
}
.ltr { position: relative; display: inline-block; will-change: transform; cursor: grab; touch-action: none; }
.ltr.drag { cursor: grabbing; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }
.ltr::after {
  content: attr(data-c); position: absolute; inset: -.2em -.12em; padding: .2em .12em; box-sizing: border-box; color: transparent; opacity: 0; transition: opacity .35s ease;
  background: var(--img) center / cover no-repeat; -webkit-background-clip: text; background-clip: text;
}
.ltr.on::after { opacity: 1; }
.lede { position: absolute; z-index: 3; left: var(--pad); bottom: var(--pad); margin: 0; white-space: nowrap; font: 400 clamp(15px, 1.3vw, 19px)/1.4 var(--sans); color: #c9c5bd; }
.hint { position: absolute; z-index: 3; right: var(--pad); bottom: var(--pad); margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .06em; transition: opacity .6s; }
.hint::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blush); margin-right: 10px; }
.hint.gone { opacity: 0; }

/* ---- Viewer ---- */
.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; --bg: 0; --bg-t: .5s; }
.lb::before { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.95); opacity: var(--bg); transition: opacity var(--bg-t) ease; }
.lb > * { position: relative; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; max-width: min(90vw, 1400px); max-height: 82svh; display: grid; place-items: center; }
.lb-fig img { cursor: zoom-out; }
.lb-fig img, .lb-fig video { max-width: 100%; max-height: 82svh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); will-change: transform; }
.lb-fig .pop { animation: lbIn .5s cubic-bezier(.2,.7,.2,1); }
.lb.flying .lb-x, .lb.flying .lb-nav { opacity: 0; }
.lb-x, .lb-nav { transition: opacity .5s ease .35s, color .3s; }
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-x, .lb-nav { position: absolute; background: none; border: 0; color: var(--ivory); cursor: pointer; font: 600 13px/1 var(--sans); letter-spacing: .06em; padding: 16px; transition: color .3s; }
.lb-x { top: calc(var(--pad) - 6px); right: calc(var(--pad) - 10px); }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 26px; letter-spacing: 0; }
.lb-prev { left: calc(var(--pad) - 10px); }
.lb-next { right: calc(var(--pad) - 10px); }
.lb-x:hover, .lb-nav:hover { color: var(--blush); }



/* ---- Gallery: a collage of flat, oversized images on the same floral pattern as the word above ---- */
.gallery {
  position: relative; background: #0a0a0a url("/assets/img/floral.webp") center top / min(1500px, 150vw) auto repeat;
  padding: clamp(90px, 11vw, 170px) 0 clamp(90px, 11vw, 170px);
}
.gallery::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,10,10,.1) 0%, rgba(10,10,10,.68) 100%); }
.spreads { position: relative; display: grid; gap: clamp(70px, 11vw, 190px); }
.spread { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 0 var(--pad); }

.shot { position: relative; display: block; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; overflow: hidden; line-height: 0; opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.shot.in-view { opacity: 1; transform: none; }
.shot img, .shot video { display: block; width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); pointer-events: none; -webkit-user-drag: none; }
.shot:hover img, .shot:hover video, .shot:focus-visible img, .shot:focus-visible video { transform: scale(1.035); }
.shot:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; }

/* three images: a wide frame, one that crosses it lower on the left, and a small one tucked underneath */
.spread.t3 .s-b { grid-column: 6 / 12; grid-row: 1; z-index: 2; }
.spread.t3 .s-a { grid-column: 2 / 8; grid-row: 1 / span 2; margin-top: clamp(70px, 10vw, 170px); }
.spread.t3 .s-c { grid-column: 8 / 12; grid-row: 2; margin-top: clamp(16px, 2vw, 30px); }
/* two images: a tall frame, and a wider one stepping off to the right */
.spread.t2 .s-a { grid-column: 2 / 7; grid-row: 1; }
.spread.t2 .s-b { grid-column: 7 / 13; grid-row: 1; margin-top: clamp(90px, 13vw, 220px); z-index: 2; }
/* every other spread mirrors, so the page keeps moving */
.spread.flip.t3 .s-b { grid-column: 3 / 8; }
.spread.flip.t3 .s-a { grid-column: 6 / 12; }
.spread.flip.t3 .s-c { grid-column: 2 / 6; }
.spread.flip.t2 .s-a { grid-column: 7 / 12; }
.spread.flip.t2 .s-b { grid-column: 1 / 7; }

@media (max-width: 800px) {
  .spread { display: block; }
  .shot, .spread .shot { margin: 0 0 clamp(10px, 2.6vw, 18px); }
}

.h-touch { display: none; }
@media (hover: none) { .h-fine { display: none; } .h-touch { display: inline; } }
@media (prefers-reduced-motion: reduce) { .shot { opacity: 1; transform: none; transition: none; } .shot img, .shot video { transition: none; } }

@media (max-width: 700px) { .word { font-size: 40vw; } }

@media (max-width: 700px) { .hint { right: auto; left: var(--pad); bottom: calc(var(--pad) + 30px); } }

/* the gallery pieces can be dragged around (mouse); they use the separate `translate` property so the reveal is untouched */
.shot { translate: var(--dx, 0px) var(--dy, 0px); cursor: grab; touch-action: pan-y; }
.shot.drag { cursor: grabbing; filter: drop-shadow(0 28px 34px rgba(0,0,0,.55)); }
.shot.settle { transition: translate .7s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }


/* the letters sit above the pattern with a soft shadow (it follows the letter shape, so it works on the picture-filled ones too) */
.ltr { filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.ltr.drag { filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }

/* letters and pictures share one stack: whatever you picked up last is on top (z-index is set when you grab it) */