/* Base comum: reset, modo mapa, fallbacks. Cada versão define sua pele. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Modo mapa (com JS) ---------- */

html.js, html.js body { height: 100%; overflow: hidden; overscroll-behavior: none; }

html.js .viewport {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
html.js .viewport.is-dragging { cursor: grabbing; }
html.js .viewport.is-overview { cursor: zoom-in; }
html.js .viewport.is-overview.is-dragging { cursor: grabbing; }

html.js .world {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}
html.js .stop { position: absolute; }

/* Na visão geral o conteúdo vira mapa: nada dentro é clicável individualmente. */
html.js .viewport.is-overview .stop * { pointer-events: none; }
html.js .viewport.is-overview .stop { cursor: pointer; }

/* Texto selecionável onde importa */
html.js .selectable { user-select: text; -webkit-user-select: text; cursor: text; }

/* Corte seco quando o movimento está desligado */
.viewport.is-cut { animation: sc-cut 260ms ease-out; }
@keyframes sc-cut { from { opacity: 0.25; } to { opacity: 1; } }

/* ---------- Sem JS: os capítulos em sequência ---------- */

html.no-js .stop { position: relative; min-height: 100vh; }
html.no-js .intro, html.no-js .hud-bottom, html.no-js [data-map-toggle], html.no-js [data-motion-toggle], html.no-js [data-lang-toggle] { display: none !important; }

/* ---------- Mídia dos trabalhos ---------- */

.work-media { position: relative; overflow: hidden; }
.work-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease-out; }
.work-media.is-ready video { opacity: 1; }
.work-ph { position: absolute; inset: 0; display: none; }
.work-media.is-missing .work-ph { display: block; }
.work-media.is-missing video { display: none; }

/* ---------- Imagens com fallback ---------- */

.img-slot { position: relative; display: block; overflow: hidden; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slot.is-missing img { display: none; }

.mark { display: inline-flex; align-items: center; }
.mark-img { height: 100%; width: auto; }
.mark .mark-text { display: none; }
.mark.is-text .mark-text { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .work-media video { transition: none; }
}