/** * style.css * ────────────────────────────────────────────── * Reset + layout estrutural. Este é o único arquivo * que define posicionamento de telas inteiras (.screen). * Ordem de import no : * variables → typography → animations → themes * → buttons → cards → style → responsive */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* navegação é por tela cheia, não por scroll */ background: var(--bg); } body { min-height: 100vh; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } button { font: inherit; } a { color: inherit; text-decoration: none; } /* ── App shell ────────────────────────────────── */ #app { position: relative; width: 100%; height: 100vh; height: 100dvh; } .screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-4) var(--space-3); } .screen.is-active { display: flex; } /* ── Splash ───────────────────────────────────── */ #screen-splash { z-index: var(--z-splash); background: var(--bg); } .splash-heart { font-size: 3.4rem; line-height: 1; } /* ── Chrome fixo (topo) ───────────────────────── */ .app-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome); display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) 0; pointer-events: none; } .app-chrome > * { pointer-events: auto; } .music-dots { display: flex; gap: 0.5rem; align-items: center; margin: 0 auto; } .music-dots__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); transition: background var(--dur-base) var(--ease-in-out), transform var(--dur-base) var(--ease-in-out); } .music-dots__dot.is-filled { background: var(--accent); transform: scale(1.2); } .chrome-spacer { width: 2.5rem; } /* ── Área de transição de capítulo ────────────── */ #screen-chapter { z-index: var(--z-transition); } /* ── Partículas ambientes ─────────────────────── */ #particles-layer { position: fixed; inset: 0; z-index: var(--z-particles); pointer-events: none; } /* ── Varredura de ciclo (troca de etapa) ──────── */ #cycle-wipe { position: fixed; inset: 0; z-index: var(--z-wipe); pointer-events: none; opacity: 1; clip-path: circle(0% at 50% 50%); will-change: clip-path; } /* ── Progresso textual discreto ───────────────── */ .progress-caption { position: fixed; bottom: var(--space-3); left: 0; right: 0; text-align: center; z-index: var(--z-chrome); pointer-events: none; } /* ── Utilitários ──────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .u-mt-1 { margin-top: var(--space-1); } .u-mt-2 { margin-top: var(--space-2); } .u-mt-3 { margin-top: var(--space-3); } .u-mt-4 { margin-top: var(--space-4); }