/* NOCCI — constelação (16/09/2026)
   Desktop (≥ 700px): o galeria.js solta os cards pela página, cada um no seu tamanho e no seu ponto, respirando e flutuando devagar.
   Celular: a mesma constelação numa coluna, com parallax e inclinação (galeria.js). Sem JS: grade CSS de 2 colunas. */

.work { padding: 1rem 2rem 5rem; }
.work__head { display: flex; justify-content: center; margin-bottom: 3rem; }
.work__switch { display: flex; border: 1px solid rgba(42, 39, 36, .35); }
.work__switch button { background: none; border: 0; padding: .6rem 1.2rem; cursor: pointer; font: inherit; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); transition: background .3s, color .3s; }
.work__switch button.is-on { background: var(--dark); color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
.galeria.is-js { display: block; }
.card { position: relative; overflow: hidden; background: #dcdad7; display: block; aspect-ratio: 4 / 5; }
.card:nth-child(5n + 1) { grid-column: span 2; aspect-ratio: 16 / 10; }
.galeria.is-js .card { position: absolute; left: 0; top: 0; aspect-ratio: auto; will-change: transform, width, height; }
.card.is-hidden { display: none; }
.card img, .card video { position: absolute; inset: -6%; width: 112%; max-width: none; height: 112%; object-fit: cover; filter: saturate(.85); animation: deriva var(--drift, 22s) ease-in-out infinite alternate; transition: filter .5s; }
.card:nth-child(2n) img, .card:nth-child(2n) video { --drift: 26s; animation-delay: -9s; }
.card:nth-child(3n) img, .card:nth-child(3n) video { --drift: 19s; animation-delay: -5s; animation-direction: alternate-reverse; }
.card:nth-child(4n + 1) img, .card:nth-child(4n + 1) video { --drift: 31s; animation-delay: -14s; }
.card:hover img, .card:hover video { filter: saturate(1); }
@keyframes deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2.2%, 1.6%) scale(1.05); } 100% { transform: translate(1.8%, -1.4%) scale(1.02); } }
.card__n { position: absolute; top: 12px; left: 14px; font-size: .62rem; letter-spacing: .14em; color: rgba(240, 237, 234, .6); z-index: 1; }
.card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; justify-content: space-between; align-items: end; gap: 12px; background: linear-gradient(0deg, rgba(10, 10, 10, .72), rgba(10, 10, 10, 0)); color: var(--cream); opacity: 0; transition: opacity .35s; z-index: 1; }
.card:hover .card__cap, .card:focus-visible .card__cap { opacity: 1; }
.card__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, 1.4vw, 1.6rem); line-height: 1; letter-spacing: .005em; }
.card__cat { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(240, 237, 234, .6); white-space: nowrap; }
.card[data-kind="pequeno"] .card__cat, .card[data-kind="pequeno"] .card__n { display: none; }
.card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 699px) { .card__cap { opacity: 1; padding: 10px; background: linear-gradient(0deg, rgba(10, 10, 10, .6), rgba(10, 10, 10, 0)); } .card__title { font-size: .95rem; } .card[data-kind="pequeno"] .card__cap { display: none; } .card__n { display: none; } .work { padding: .5rem 1rem 3rem; } .work__head { margin-bottom: 1.5rem; } }

/* lightbox: o filme (YouTube sem cookies) ou a foto */
.lb { position: fixed; inset: 0; z-index: 9500; background: rgba(10, 10, 10, .96); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lb.is-open { display: flex; }
.lb__frame { width: min(100%, 1400px); aspect-ratio: 16 / 9; background: #000; position: relative; }
.lb__frame iframe, .lb__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.lb__close { position: absolute; top: 18px; right: 84px; background: none; border: 1px solid rgba(240, 237, 234, .4); color: var(--cream); font: inherit; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .6rem 1rem; cursor: pointer; }
.lb__title { position: absolute; left: 4vw; bottom: 3vw; color: var(--cream); font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; }
.lb__title small { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(240, 237, 234, .6); margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { .card img, .card video { animation: none; } }