/* ═══════════════════════════════════════════════════════════════
   elvas * studio v2 — Selected work (padrão Floema, do lab/explode.html)
   Estado base = grelha CSS (é o que sem JS e reduced-motion vêem).
   .sel.is-scattered (selected.js) espalha os 12 tiles em volta do título com
   posições determinísticas por nth-child; o Flip anima a diferença.
   ═══════════════════════════════════════════════════════════════ */
.sel { position: relative; padding: 116px var(--es-px); background: #fff; color: var(--es-black); overflow: hidden; }
.sel__inner { position: relative; max-width: var(--es-max-w); margin: 0 auto; }
.sel__eyebrow { margin-bottom: 20px; }
.sel__title { font-family: var(--es-font-display); font-weight: 800; font-size: clamp(48px, 9.5vw, 150px); line-height: 0.86; letter-spacing: -0.02em; max-width: 9ch; position: relative; z-index: 2; }
.sel__title em { font-size: 0.96em; letter-spacing: 0.02em; }
.js .sel__title { cursor: pointer; }
.sel__title:focus-visible { outline-offset: 8px; }
.sel__all { margin-top: 40px; position: relative; z-index: 2; }

/* ── Grelha (estado base) ── */
.sel__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; list-style: none; margin: 52px 0 0; padding: 0; }
.sel__item { position: relative; }
.sel__item:hover, .sel__item:focus-within { z-index: 3; }
.sel__tile { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 2px; background: var(--es-gray-1); transition: transform var(--es-t-slow), box-shadow var(--es-t-slow); }
.sel__tile:hover, .sel__tile:focus-visible { transform: translateY(-6px); box-shadow: var(--es-shadow-xl); }
.sel__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--es-ease); }
.sel__tile:hover .sel__img { transform: scale(1.04); }
.sel__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 40px 14px 14px; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(26,26,24,0.72), rgba(26,26,24,0)); /* legibilidade sobre foto, como .case-hero__media::after */
  opacity: 0; transform: translateY(6px); transition: opacity var(--es-t-slow), transform var(--es-t-slow); }
.sel__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__year { flex-shrink: 0; opacity: 0.75; }
.sel__tile:hover .sel__meta, .sel__tile:focus-visible .sel__meta { opacity: 1; transform: none; }

/* ── Espalhado (só com JS, desktop/tablet) ── */
.sel.is-scattered { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.sel.is-scattered .sel__inner { width: 100%; min-height: calc(100svh - 232px); }
.sel.is-scattered .sel__grid { position: absolute; inset: 0; display: block; margin: 0; }
.sel.is-scattered .sel__item { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * var(--k, 1)); transform: rotate(var(--r)); }
.sel.is-scattered .sel__meta { opacity: 0 !important; }
/* posições determinísticas: [x%, y%, largura %, rotação]; os mais perto do título são menores */
.sel__item:nth-child(1)  { --x: 58%; --y: 0%;  --w: 9%;  --r: -7deg; }
.sel__item:nth-child(2)  { --x: 72%; --y: 5%;  --w: 12%; --r: 5deg; }
.sel__item:nth-child(3)  { --x: 89%; --y: 0%;  --w: 10%; --r: -4deg; }
.sel__item:nth-child(4)  { --x: 90%; --y: 34%; --w: 10%; --r: 6deg; }
.sel__item:nth-child(5)  { --x: 77%; --y: 40%; --w: 13%; --r: -5deg; }
.sel__item:nth-child(6)  { --x: 62%; --y: 36%; --w: 9%;  --r: 7deg; }
.sel__item:nth-child(7)  { --x: 0%;  --y: 62%; --w: 11%; --r: -6deg; }
.sel__item:nth-child(8)  { --x: 15%; --y: 68%; --w: 13%; --r: 5deg; }
.sel__item:nth-child(9)  { --x: 33%; --y: 60%; --w: 9%;  --r: -8deg; }
.sel__item:nth-child(10) { --x: 47%; --y: 66%; --w: 12%; --r: 4deg; }
.sel__item:nth-child(11) { --x: 65%; --y: 70%; --w: 10%; --r: -5deg; }
.sel__item:nth-child(12) { --x: 84%; --y: 66%; --w: 13%; --r: 6deg; }

@media (max-width: 1100px) {
  .sel__grid { grid-template-columns: repeat(3, 1fr); }
  .sel.is-scattered .sel__item { --k: 1.25; }
}
@media (max-width: 700px) {
  .sel { padding: 80px var(--es-px); }
  .sel__grid { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .sel__meta { opacity: 1; transform: none; padding-top: 28px; } /* sem hover: nome/ano sempre visíveis */
}
@media (prefers-reduced-motion: reduce) {
  .sel__tile, .sel__img, .sel__meta { transition: none; }
}