/* Arte (e Som): bolas de pinturas, visualizador, coleções, discografia e glitch pleno. */

/* glitch pleno do marcvs.art: fatias rasgando */
.glitching, .glitch-full.glitching { animation: slice 320ms steps(6, end); }
[data-node] { display: inline-block; }
@keyframes slice {
  0%   { transform: none; clip-path: none; opacity: 1; }
  12%  { transform: translateX(-14px) skewX(-5deg); clip-path: inset(5% 0 68% 0); }
  26%  { transform: translateX(11px) translateY(3px); clip-path: inset(42% 0 28% 0); opacity: .7; }
  40%  { transform: translateX(-9px) scaleX(1.04); clip-path: inset(74% 0 2% 0); }
  55%  { transform: translateX(16px) skewX(4deg); clip-path: inset(18% 0 56% 0); opacity: .85; }
  70%  { transform: translateX(-12px) translateY(-3px); clip-path: inset(60% 0 12% 0); }
  85%  { transform: translateX(6px); clip-path: inset(30% 0 40% 0); opacity: .6; }
  100% { transform: none; clip-path: none; opacity: 1; }
}
.brand.glitch-full { display: inline-block; }

/* prêmio */
.award { max-width: 68ch; margin: 0 0 var(--space-4); padding-left: var(--space-3); border-left: 2px solid var(--accent); color: var(--ink-2); }
.work-title { margin: var(--space-4) 0 var(--space-1); font: 400 var(--fs-title-item)/1.2 var(--font-title); }
.work-title .num { color: var(--ink-soft); font-size: var(--fs-l); margin-left: var(--space-1); }

/* bolas */
.pfield { position: relative; margin-top: var(--space-4); min-height: 40vh; }
.orb { position: absolute; padding: 0; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--surface); cursor: crosshair; border: 1px solid var(--rule); filter: grayscale(.85) contrast(1.05); transition: filter .3s, border-color .3s; animation: bob var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate; }
.orb:hover, .orb:focus-visible { filter: none; border-color: var(--ink-soft); z-index: 5; }
.orb:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(var(--drift, -18px)); } }
.pfield .empty { color: var(--ink-soft); font-size: var(--fs-m); }

/* visualizador */
.viewer { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 48px var(--space-3) var(--space-4); background: rgba(8, 11, 16, .96); cursor: crosshair; }
.viewer.on { display: flex; }
.viewer picture { display: contents; }
.viewer img { max-width: 92vw; max-height: 78vh; border: 1px solid var(--rule); }
.viewer .cap { max-width: 70ch; margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-m); text-align: center; }
.viewer .cap::before { content: "> "; color: var(--accent); }
.viewer .cap a { color: var(--accent); }
.viewer .close { position: absolute; top: 18px; right: 24px; min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--rule); color: var(--ink-2); font: 400 var(--fs-base) var(--font-text); cursor: crosshair; }
.viewer .close:hover { background: var(--ink); color: var(--bg); }

/* coleções */
.collection-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); margin-top: var(--space-2); }
.collection-link { display: block; padding: var(--space-3) 0; border-top: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; }
.collection-chain { color: var(--ink-soft); font-size: var(--fs-s); }
.collection-link h4 { margin: 8px 0 0; color: var(--accent); font: 400 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--font-title); }
.collection-link:hover h4 { text-decoration: underline; text-underline-offset: 5px; }

/* discografia */
.tagline { margin: var(--space-3) 0 0; color: var(--ink-soft); font-size: var(--fs-m); }
.tagline em { font-style: normal; color: var(--ink); }
.group { margin-top: var(--space-5); }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.group-head h2 { margin: 0; font: 400 var(--fs-title-section)/1.2 var(--font-title); }
.group-head .count { color: var(--ink-soft); font-size: var(--fs-s); white-space: nowrap; }
.track { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 200px) 96px 56px; gap: var(--space-3); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink-2); }
.track:hover { background: var(--surface); color: var(--ink); }
.track .num { color: var(--ink-soft); }
.track .t em { font-style: normal; color: var(--ink); }
.track:hover .t em { color: var(--accent); }
.track .notes, .track .type { color: var(--ink-soft); font-size: var(--fs-s); }
.track .y { text-align: right; font-size: var(--fs-s); }

@media (max-width: 760px) {
  .collection-list { grid-template-columns: 1fr; }
  .track { grid-template-columns: 36px minmax(0, 1fr) 48px; gap: 4px var(--space-2); }
  .track .notes, .track .type { grid-column: 2; }
  .track .y { grid-column: 3; grid-row: 1; }
}