/* viniciusrossato.com — portfólio de Vinicius Rossato.
   Moldura: papel giz e tinta, quieta. Cada trabalho veste a própria identidade:
   Aurora (noite e amanhecer, a do produto), VINI JOGA (marinho e amarelo da marca; Arena tinta e dourado; Pato madeira),
   Ingresso (coral de bilhete), Print3D (mesa de impressão), processo (uma máquina rodando). */

:root {
  --chalk: #eceef1; --chalk-2: #e2e5ea; --paper: #f7f8fa;
  --ink: #16181d; --ink-2: #4a505b; --line: #cfd4db;
  --live: #1f8a55; --wip: #a86a12;

  --night: #0f1724; --night-2: #1b2434; --night-3: #243145; --dawn: #f1b987; --dawn-2: #dfa170; --mist: #91a8c4; --aurora-soft: #a6b2c8;
  --vj-navy: #111827; --vj-yellow: #ffd23f;
  --arena: #07090c; --gold: #f3c46b;
  --wood: #d08a48; --wood-2: #b8733a; --cream: #fff6e6;
  --coral: #ef5446; --coral-ink: #1c1726;
  --plate: #17191d; --plate-grid: #262a31; --filament: #e8743b;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;

  --max: 1320px;
  --gutter: clamp(16px, 5vw, 56px);
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 17px/1.55 var(--body); overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--ink); color: var(--chalk); }
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
/* o contorno de foco acompanha o chão de cada seção */
.aurora { --focus: var(--dawn); } .vj { --focus: var(--gold); } .pato { --focus: var(--vj-navy); } .mini { --focus: var(--vj-yellow); }
.ingresso { --focus: var(--coral-ink); } .p3d, .loop, .lab, .lightbox { --focus: #fff; }
.ba-frame:has(.ba-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- botões e rótulos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 600 16px/1 var(--body); text-decoration: none; transition: transform .15s var(--ease), background-color .15s, border-color .15s, color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2a2d35; }
.btn-dawn { background: var(--dawn); color: #1b1410; }
.btn-dawn:hover { background: #f5c69c; }
.btn-gold { background: var(--gold); color: #0b0d12; }
.btn-gold:hover { background: #ffd58a; }
.btn-ghost-light { border-color: #ffffff3d; color: #f1f3f5; }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-navy { background: var(--vj-navy); color: #fff; }
.btn-ghost-cream { border-color: var(--vj-navy); color: var(--vj-navy); }
.btn-ghost-cream:hover { background: #1118271a; }
.text-link { background: none; border: 0; padding: 12px 4px; font: 600 16px/1 var(--body); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; color: inherit; }
.kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { color: #7fe0a9; background: #0b3d2a; }
.status.wip { color: #ffcf7a; background: #3b2a0c; }
.lead { font-size: clamp(17px, 1.5vw, 19px); max-width: 46ch; }
.facts { list-style: none; padding: 0; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 18px; max-width: 52ch; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .5; }
.specs { font: 500 13px/1.5 var(--mono); letter-spacing: .02em; opacity: .85; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-note { font: 500 12px/1.4 var(--mono); opacity: .7; }

/* ---- topo */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad) 12px; background: color-mix(in srgb, var(--chalk) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.wordmark { font: 800 19px/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.nav { display: flex; gap: 26px; }
.nav a { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink-2); padding: 8px 0; }
.nav a:hover, .nav a.here { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-btn { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: none; font-weight: 600; }

/* ---- abertura */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 6vw, 72px) var(--pad) 0; }
.hero-copy { display: grid; gap: 22px; }
.hero h1 { display: grid; gap: 10px; }
.hero-name { font: 800 clamp(56px, 10.5vw, 158px)/.86 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.hero-claim { font: 500 clamp(28px, 4vw, 58px)/1.02 var(--display); letter-spacing: -.03em; color: var(--ink-2); }
.hero-lead { font-size: clamp(18px, 1.7vw, 21px); max-width: 38ch; }
.hero-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 16px; min-height: 28px; }
.now-label { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.now-name { font: 800 20px/1 var(--display); }
.now-kind { color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* a bancada: cartões reais empilhados, o da frente muda sozinho e segue o cursor */
.deck { position: relative; height: clamp(320px, 34vw, 440px); perspective: 1400px; --rx: 0deg; --ry: 0deg; --spread: 26px; }
.deck-card { --pos: 0; position: absolute; left: calc(50% - 2 * var(--spread)); top: calc(50% + 1.4 * var(--spread)); width: min(360px, 82%); aspect-ratio: 16 / 11; margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; text-align: left;
  transform: translate(-50%, -50%) translate3d(calc(var(--pos) * var(--spread)), calc(var(--pos) * var(--spread) * -.7), calc(var(--pos) * -70px)) rotate(calc(var(--pos) * 3.2deg)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease), opacity .5s, box-shadow .3s; box-shadow: 0 26px 50px -26px #16181d8c; z-index: calc(10 - var(--pos)); opacity: calc(1 - var(--pos) * .12); }
.deck-card:hover { box-shadow: 0 34px 60px -24px #16181daa; }
.deck-card.front { cursor: pointer; }
.c-aurora { background: radial-gradient(120% 90% at 100% 0%, #f1b98740, transparent 60%), var(--night); color: #fff; padding: 18px; display: grid; align-content: start; gap: 10px; }
.dc-top { display: flex; align-items: center; gap: 8px; font: 600 26px/1 var(--serif); color: var(--dawn); }
.dc-top img { width: 30px; height: 30px; }
.dc-msg { justify-self: start; max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 14px; }
.dc-me { justify-self: end; background: var(--night-3); }
.dc-ai { background: #f1b98722; color: #ffe4cc; }
.dc-path { display: flex; gap: 6px; margin-top: 4px; }
.dc-path i { font: 500 11px/1 var(--mono); font-style: normal; padding: 5px 8px; border-radius: 999px; background: #ffffff10; color: var(--aurora-soft); }
.dc-path i.on { background: var(--dawn); color: #1b1410; }
.c-arena { background: var(--arena); }
.c-arena img { width: 100%; height: 100%; object-fit: cover; }
.dc-label { position: absolute; left: 14px; bottom: 12px; font: 400 26px/1 "Anton", Impact, sans-serif; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 10px #0009; }
.dc-label b { font-weight: 400; color: var(--gold); }
.c-pato { background: linear-gradient(160deg, var(--wood), var(--wood-2)); }
.c-pato .dc-label { font: 700 26px/1 "Fredoka", var(--display); -webkit-text-stroke: .1em var(--vj-navy); paint-order: stroke fill; text-shadow: none; }
.c-pato .dc-label b { color: var(--vj-yellow); font-weight: 700; }
.dc-board { position: absolute; right: 18px; top: 18px; display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; padding: 6px; background: #7a4618; border-radius: 10px; }
.dc-board i { width: 40px; height: 40px; border-radius: 7px; position: relative; }
.dc-board .r0 { background: #ec5f5f; } .dc-board .r1 { background: #4f8fe6; } .dc-board .r2 { background: #5bc05a; } .dc-board .r3 { background: #a878de; }
.dc-board .x::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 26px/1 var(--body); color: #1d1a16; }
.dc-board .duck { background: #ec5f5f url("/assets/img/pato-duck.webp") center / 86% no-repeat; }
.c-ingresso { background: var(--coral); padding: 18px; }
.dc-ticket { position: absolute; left: 18px; top: 20px; right: 70px; display: grid; gap: 4px; padding: 14px 14px 14px 16px; background: #fff; border-radius: 12px; color: var(--coral-ink); transform: rotate(-2deg); }
.dc-ticket b { font: 800 20px/1.05 var(--display); letter-spacing: -.02em; }
.dc-ticket span { font: 500 12px/1.3 var(--mono); color: #6b6478; }
.dc-ticket img { width: 62px; height: 62px; image-rendering: pixelated; margin-top: 6px; }
.dc-ok { position: absolute; right: 16px; bottom: 16px; padding: 8px 12px; border-radius: 999px; background: #0b7a57; color: #fff; font: 700 14px/1 var(--body); }
.c-p3d { background-color: var(--plate); background-image: linear-gradient(var(--plate-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plate-grid) 1px, transparent 1px); background-size: 16px 16px; color: var(--filament); }
.c-p3d svg { position: absolute; right: 16px; top: 10px; width: 58%; height: auto; }
.c-p3d .dc-label { font: 800 26px/1 var(--display); color: #fff; display: grid; gap: 6px; text-shadow: none; }
.c-p3d .dc-label em { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #ffcf7a; }

/* diário: o que foi ao ar nos últimos dias */
.log { grid-column: 1 / -1; margin-top: clamp(28px, 5vw, 56px); padding: 18px 0 clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px 32px; }
.log-t { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 4px; }
.log-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.log-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 12px; font-size: 15px; }
.log-list time { grid-row: 1 / 3; font: 500 13px/1.6 var(--mono); color: var(--ink-2); }
.log-list b { font: 800 17px/1.2 var(--display); }
.log-list span { color: var(--ink-2); }

/* ---- capítulo */
.chapter { padding: clamp(56px, 9vw, 120px) var(--pad) clamp(28px, 4vw, 48px); display: grid; gap: 10px; }
.chapter-k { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.chapter-t { font: 800 clamp(38px, 6.4vw, 92px)/.94 var(--display); letter-spacing: -.04em; max-width: 16ch; text-wrap: balance; }

/* ---- Aurora: noite e amanhecer, a identidade do próprio produto */
.aurora { background: radial-gradient(70% 60% at 88% 0%, #f1b98733, transparent 70%), radial-gradient(60% 50% at 0% 100%, #91a8c41f, transparent 70%), var(--night); color: #fff; padding: clamp(56px, 8vw, 110px) var(--pad); }
.aurora-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.aurora-copy { display: grid; gap: 20px; align-content: start; }
.aurora .kicker { color: var(--dawn); }
.aurora-name { display: flex; align-items: center; gap: 14px; font: 600 clamp(64px, 9vw, 128px)/.9 var(--serif); color: var(--dawn); letter-spacing: -.01em; }
.aurora-name img { width: clamp(56px, 6vw, 84px); height: auto; }
.aurora-tag { font: 500 clamp(20px, 2vw, 26px)/1.2 var(--serif); font-style: italic; color: var(--aurora-soft); }
.aurora .lead { color: #e7ecf4; }
.aurora .facts { color: var(--aurora-soft); }
.aurora .facts li::before { background: var(--dawn); opacity: 1; }
.aurora .btn-dawn { justify-self: start; }
.brain { background: #1b2434e6; border: 1px solid #ffffff14; border-radius: 22px; padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 16px; }
.brain-k { font: 500 13px/1.4 var(--mono); color: var(--mist); }
.brain-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.brain-asks button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffffff26; background: transparent; color: #e7ecf4; font-size: 14px; transition: background-color .15s, border-color .15s; }
.brain-asks button:hover { border-color: var(--dawn); }
.brain-asks button[aria-pressed="true"] { background: var(--dawn); border-color: var(--dawn); color: #1b1410; font-weight: 600; }
.brain-chat { display: grid; gap: 10px; min-height: 108px; align-content: start; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.bubble.me { justify-self: end; background: var(--night-3); border-bottom-right-radius: 4px; }
.bubble.ai { justify-self: start; background: #f1b98724; color: #ffe8d4; border-bottom-left-radius: 4px; min-width: 64px; min-height: 42px; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dawn); animation: blink 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.brain-path { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: st; }
.brain-path li { position: relative; display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff12; transition: background-color .35s, border-color .35s, opacity .35s; }
.brain-path b { font: 600 14px/1.2 var(--body); color: #e7ecf4; }
.brain-path span { font: 500 11.5px/1.35 var(--mono); color: var(--mist); min-height: 1.35em; }
.brain-path li.active { background: #f1b98729; border-color: var(--dawn); }
.brain-path li.active b { color: var(--dawn); }
.brain-path li.done { border-color: #91a8c455; }
.brain-path li.skipped { opacity: .42; }
.brain-path li.fail { border-color: #ff9b8a; background: #ff9b8a1f; }
.brain-after { font-size: 14px; color: var(--mist); padding-top: 12px; border-top: 1px dashed #ffffff1f; transition: color .3s; }
.brain-after.on { color: var(--dawn); }
.brain .demo-note { color: var(--mist); }

/* ---- VINI JOGA */
.vj { background: var(--vj-navy); color: #fff; }
.vj-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(56px, 8vw, 100px) var(--pad) clamp(36px, 5vw, 64px); }
.vj-head img { width: clamp(170px, 22vw, 300px); height: auto; }
.vj-head .kicker { color: var(--vj-yellow); margin-bottom: 8px; }
.vj-head h2 { font: 700 clamp(48px, 7vw, 96px)/.92 "Fredoka", var(--display); color: var(--vj-yellow); -webkit-text-stroke: .06em #0b1020; paint-order: stroke fill; margin-bottom: 14px; }
.vj-head .lead { color: #dfe4ee; }
.game { display: grid; gap: clamp(24px, 4vw, 56px); padding: clamp(48px, 7vw, 96px) var(--pad); }
.game-copy { display: grid; gap: 18px; align-content: start; }

/* Arena 7v7: tinta, dourado e a letra da transmissão */
.arena { background: var(--arena); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.arena .kicker { color: var(--gold); }
.arena-name { font: 400 clamp(60px, 8vw, 120px)/.88 "Anton", Impact, sans-serif; text-transform: uppercase; transform: skew(-6deg); transform-origin: left bottom; }
.arena-name span { color: var(--gold); }
.arena .lead { color: #dfe3ea; }
.arena .specs { color: #a3abb8; }
.film { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px #000; }
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film-btn { position: absolute; right: 14px; top: 14px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #07090cc2; color: #fff; font: 600 14px/1 var(--body); backdrop-filter: blur(6px); }
.film-btn:hover { background: #07090ce6; }
.film figcaption { padding: 12px 16px 14px; font: 500 12.5px/1.45 var(--mono); color: #a3abb8; background: #0d1015; }
.layers { display: grid; gap: 12px; }
.layer-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.layer-tabs button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffffff2e; background: transparent; color: #dfe3ea; font-size: 14px; }
.layer-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #0b0d12; font-weight: 600; }
.layer-panel { border-radius: 14px; overflow: hidden; background: #11151b; border: 1px solid #ffffff12; }
.layer-panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .25s; }
.layer-panel img.contain { object-fit: contain; background: #1d2027; }
.layer-panel figcaption { padding: 10px 14px 12px; font-size: 14px; color: #c6ccd6; min-height: 64px; }

/* Cadê o Pato?: a mesa de madeira, o letreiro com contorno e o minijogo */
.pato { background: linear-gradient(180deg, var(--wood) 0%, var(--wood-2) 100%); color: var(--vj-navy); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
.pato .kicker { color: var(--vj-navy); }
.pato-name { font: 700 clamp(52px, 6.4vw, 96px)/.95 "Fredoka", var(--display); color: #fff; -webkit-text-stroke: .1em var(--vj-navy); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--vj-navy); }
.pato-name span { color: var(--vj-yellow); }
.pato .specs { color: #2a1606; opacity: 1; }
.mini { justify-self: center; width: min(100%, 380px); display: grid; gap: 10px; padding: 16px; background: #7a4618; border-radius: 20px; box-shadow: 0 26px 50px -24px #0000008c, inset 0 0 0 3px #8d5421; }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; }
.mini-t { font: 700 20px/1 "Fredoka", var(--display); color: var(--cream); }
.mini-count { font: 500 13px/1 var(--mono); color: #ffe9c4; }
.mini-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; background: #4a2a10; border-radius: 12px; touch-action: manipulation; }
.cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 8px; padding: 0; min-width: 44px; box-shadow: inset 0 -4px 0 #0003, inset 0 2px 0 #ffffff40; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.cell:active { transform: scale(.94); }
.cell.g0 { background: #ec5f5f; } .cell.g1 { background: #4f8fe6; } .cell.g2 { background: #5bc05a; } .cell.g3 { background: #a878de; } .cell.g4 { background: #f2c14e; }
.cell.x::after { content: ""; position: absolute; inset: 26%; background: linear-gradient(45deg, transparent 43%, #1d1a16 43%, #1d1a16 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #1d1a16 43%, #1d1a16 57%, transparent 57%); }
.cell.miss::after { background: linear-gradient(45deg, transparent 43%, #b3261e 43%, #b3261e 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #b3261e 43%, #b3261e 57%, transparent 57%); }
.cell.duck { background-image: url("/assets/img/pato-duck.webp"); background-size: 90%; background-position: center 60%; background-repeat: no-repeat; animation: pop .35s var(--ease); }
.cell.shake { animation: shake .35s; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mini-help { font: 500 12px/1.4 var(--mono); color: #ffe9c4; text-align: center; }
.mini-msg { min-height: 1.5em; text-align: center; font-weight: 600; color: var(--cream); }
.mini-reset { justify-self: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff6e6a6; background: transparent; color: #fff; font-weight: 600; }
.mini.won .mini-board { box-shadow: 0 0 0 3px var(--vj-yellow); }
.pato-phone { width: 240px; }
.pato-phone img { border-radius: 30px; border: 9px solid var(--vj-navy); box-shadow: 0 30px 50px -24px #0000008c; }

/* ---- Ingresso: o coral do bilhete e o fluxo até a entrada */
.ingresso { background: var(--coral); color: var(--coral-ink); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(56px, 8vw, 110px) var(--pad); }
.ing-copy { display: grid; gap: 20px; align-content: start; }
.ingresso .kicker { color: #3a0f0a; }
.ingresso .status.live { color: #0b5d40; background: #d6f5e6; }
.ing-name { font: 800 clamp(58px, 9vw, 124px)/.9 var(--display); letter-spacing: -.045em; }
.facts.dark { color: #3a0f0a; }
.ingresso .btn-ink { background: var(--coral-ink); justify-self: start; }
.flow { background: #fff6f3; border-radius: 22px; padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 16px; box-shadow: 0 30px 60px -34px #00000073; }
.flow-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; counter-reset: fs; }
.flow-steps li { position: relative; padding: 8px 4px 0; border-top: 4px solid #f2d4ce; font: 500 11.5px/1.3 var(--mono); letter-spacing: .02em; color: #8a6f6a; text-align: center; transition: border-color .3s, color .3s; }
.flow-steps li.done { border-top-color: var(--coral-ink); color: var(--coral-ink); }
.flow-steps li.now { border-top-color: var(--coral); color: var(--coral-ink); font-weight: 700; }
.flow-stage { position: relative; display: grid; place-items: center; min-height: 300px; border-radius: 16px; background: #f4dcd6; overflow: hidden; }
.ticket { --notch: 13px; position: relative; width: min(88%, 380px); background: #fff; border-radius: 16px; color: var(--coral-ink); box-shadow: 0 20px 40px -24px #00000066; transform: rotate(-2deg); transition: transform .6s var(--ease); }
.ticket-main { padding: 18px 20px 14px; display: grid; gap: 8px; }
.ticket-label { justify-self: start; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c23a2c; border: 1.5px solid currentColor; border-radius: 4px; padding: 4px 6px; }
.ticket-event { font: 800 26px/1 var(--display); letter-spacing: -.02em; }
.ticket-facts { display: flex; gap: 22px; }
.ticket-facts dt { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b6478; }
.ticket-facts dd { font-weight: 600; font-size: 14px; }
.ticket-stub { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 20px 16px; border-top: 2px dashed #e4dfe8; }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; top: calc(-1 * var(--notch) - 1px); width: calc(2 * var(--notch)); height: calc(2 * var(--notch)); border-radius: 50%; background: #f4dcd6; }
.ticket-stub::before { left: calc(-1 * var(--notch)); }
.ticket-stub::after { right: calc(-1 * var(--notch)); }
.ticket-stub img { width: 92px; height: 92px; image-rendering: pixelated; }
.ticket-serial { font: 500 14px/1.4 var(--mono); letter-spacing: .12em; }
.viewfinder { position: absolute; inset: 14% 22%; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .3s; box-shadow: 0 0 0 999px #1c172699; }
.viewfinder::before { content: ""; position: absolute; inset: -2px; --c: linear-gradient(#fff, #fff);
  background: var(--c) top left / 34px 3px no-repeat, var(--c) top left / 3px 34px no-repeat, var(--c) top right / 34px 3px no-repeat, var(--c) top right / 3px 34px no-repeat,
    var(--c) bottom left / 34px 3px no-repeat, var(--c) bottom left / 3px 34px no-repeat, var(--c) bottom right / 34px 3px no-repeat, var(--c) bottom right / 3px 34px no-repeat; }
.viewfinder i { position: absolute; left: 6%; right: 6%; top: 10%; height: 2px; background: #7fe0a9; opacity: 0; }
.flow[data-state="scan"] .viewfinder { opacity: 1; }
.flow[data-state="scan"] .viewfinder i { opacity: 1; animation: scan 1s ease-in-out infinite alternate; }
@keyframes scan { from { top: 10%; } to { top: 88%; } }
.flow[data-state="scan"] .ticket { transform: rotate(0deg) scale(.96); }
.verdict { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(10px); padding: 10px 16px; border-radius: 999px; font: 700 15px/1.2 var(--body); color: #fff; opacity: 0; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.verdict.ok { background: #0b7a57; opacity: 1; transform: translateX(-50%); }
.verdict.used { background: #9a6512; opacity: 1; transform: translateX(-50%); }
.ticket.issue { animation: issue .6s var(--ease); }
@keyframes issue { from { opacity: 0; transform: translateY(-26px) rotate(-7deg); } }
.flow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.text-link.on-coral { color: var(--coral-ink); }

/* ---- Print3D: a mesa de impressão */
.p3d { position: relative; background-color: var(--plate); background-image: linear-gradient(var(--plate-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plate-grid) 1px, transparent 1px); background-size: 24px 24px; color: #f1f2f4; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: clamp(56px, 8vw, 100px) var(--pad); overflow: hidden; }
.p3d-copy { display: grid; gap: 16px; align-content: center; justify-items: start; }
.p3d h2 { font: 800 clamp(58px, 9vw, 128px)/.9 var(--display); letter-spacing: -.045em; }
.p3d .lead { color: #c9ccd3; }
.p3d-stage { position: relative; justify-self: center; width: min(100%, 560px); }
.p3d-stage canvas { width: 100%; height: auto; aspect-ratio: 1; }
.p3d-read { position: absolute; left: 8px; bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: #9aa0ab; }
.p3d-read b { color: var(--filament); font-weight: 500; }

/* ---- Como eu trabalho: a máquina rodando um caso real */
.how { padding: clamp(64px, 9vw, 120px) var(--pad); display: grid; gap: clamp(24px, 4vw, 48px); }
.how-head { display: grid; gap: 16px; }
.how-head h2 { font: 800 clamp(44px, 7vw, 104px)/.92 var(--display); letter-spacing: -.045em; }
.loop { background: var(--ink); color: #f1f2f4; border-radius: 24px; padding: clamp(16px, 2.6vw, 30px); display: grid; gap: 18px; }
.loop-track { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; position: relative; }
.loop-track li { position: relative; }
.loop-track button { width: 100%; min-height: 44px; padding: 0 4px; border-radius: 10px; border: 1px solid #ffffff1c; background: #ffffff08; color: #9aa0ab; font: 500 12px/1.2 var(--mono); letter-spacing: .02em; transition: background-color .25s, color .25s, border-color .25s; }
.loop-track button.seen { color: #d6d9df; border-color: #ffffff30; }
.loop-track button.now { background: #f1f2f4; color: var(--ink); border-color: #f1f2f4; font-weight: 700; }
.loop-track button.again { box-shadow: inset 0 -3px 0 #ffcf7a; }
.loop-monitor { display: grid; gap: 10px; }
.loop-step { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9aa0ab; }
.loop-art { min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 3vw, 36px); align-items: center; border-radius: 16px; background: #1f2229; padding: clamp(16px, 2.6vw, 28px); }
.loop-art h3 { font: 800 clamp(26px, 3.2vw, 40px)/1 var(--display); letter-spacing: -.02em; margin-bottom: 10px; }
.loop-art .art-text { font-size: 16px; color: #c9ccd3; max-width: 44ch; }
.loop-art blockquote { margin: 0; font: 500 clamp(20px, 2.4vw, 28px)/1.3 var(--display); letter-spacing: -.01em; color: #fff; }
.loop-art blockquote::before { content: "“"; color: #ffcf7a; }
.loop-art blockquote::after { content: "”"; color: #ffcf7a; }
.loop-art img { width: 100%; border-radius: 10px; border: 1px solid #ffffff1c; }
.loop-art pre { margin: 0; padding: 14px 16px; border-radius: 10px; background: #0d0f13; border: 1px solid #ffffff14; overflow-x: auto; font: 500 12.5px/1.6 var(--mono); color: #d6d9df; }
.loop-art pre .add { color: #7fe0a9; } .loop-art pre .del { color: #ff9b8a; } .loop-art pre .dim { color: #6b7280; } .loop-art pre .ok { color: #7fe0a9; }
.loop-art .flag { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.flag.bad { background: #3d1611; color: #ff9b8a; } .flag.good { background: #0b3d2a; color: #7fe0a9; } .flag.info { background: #2a2e36; color: #c9ccd3; }
.loop-art.solo { grid-template-columns: minmax(0, 1fr); }
.loop-art .rules { list-style: none; padding: 0; display: grid; gap: 8px; }
.loop-art .rules li { padding: 12px 14px; border-radius: 10px; background: #0d0f13; border: 1px solid #ffffff14; font: 500 14px/1.3 var(--mono); color: #f1f2f4; }
.loop-art .meta { margin-top: 10px; font: 500 12px/1.4 var(--mono); color: #9aa0ab; }
.loop-ctrl { display: flex; gap: 8px; justify-content: flex-end; }
.loop-ctrl button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #ffffff2e; background: transparent; color: #f1f2f4; font-weight: 600; font-size: 14px; }
.loop-ctrl button:hover { border-color: #fff; }
.art-fade { animation: artin .45s var(--ease); }
@keyframes artin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Ferramentas: de onde vem e onde aparece */
.tools { padding: clamp(56px, 8vw, 110px) var(--pad); display: grid; gap: clamp(20px, 3vw, 36px); }
.tools-head { display: grid; gap: 14px; }
.tools-head h2 { font: 800 clamp(44px, 7vw, 104px)/.92 var(--display); letter-spacing: -.045em; }
.tools-map { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 90px); }
.tools-col { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; }
.tools-group { display: grid; gap: 6px; }
.tools-group h3 { font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool, .node { min-height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
.tool:hover { border-color: var(--ink); }
.tool.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.node { display: inline-flex; align-items: center; cursor: default; }
.tools-map.picking .node:not(.hot), .tools-map.picking .tool:not(.on) { opacity: .45; }
.node.hot { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.tools-out, .tools-prod { align-content: start; }
.tools-out h3, .tools-prod h3 { font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tools-out .chips, .tools-prod .chips { flex-direction: column; align-items: flex-start; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.wires path { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .75; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: draw .6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wires circle { fill: var(--ink); }
.tools-chain { font: 500 13px/1.5 var(--mono); color: var(--ink-2); min-height: 1.5em; }
.apis { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: grid; gap: 10px; }
.apis h3 { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.apis > p { color: var(--ink-2); font-size: 15px; }

/* ---- Por trás dos projetos: a mesa de luz */
.lab { background: #1c1e23; color: #f1f2f4; padding: clamp(56px, 8vw, 110px) var(--pad); display: grid; gap: clamp(24px, 4vw, 44px); }
.lab-head { display: grid; gap: 14px; }
.lab-head h2 { font: 800 clamp(44px, 7vw, 104px)/.92 var(--display); letter-spacing: -.045em; }
.lab .lead { color: #c9ccd3; }
.lab-sheet { columns: 3 300px; column-gap: 16px; }
.print { display: block; width: 100%; margin: 0 0 16px; padding: 8px 8px 0; break-inside: avoid; border: 0; border-radius: 6px; background: #f3f1ec; color: #2b2d33; text-align: left; box-shadow: 0 14px 30px -18px #000; transition: transform .25s var(--ease), box-shadow .25s; }
.print:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 22px 40px -18px #000; }
.print img { width: 100%; border-radius: 3px; background: #ddd; }
.print > span { display: block; padding: 8px 4px 10px; font: 500 11.5px/1.4 var(--mono); color: #4a4d55; }
.print.term { background: #0d0f13; color: #d6d9df; padding: 14px 16px 0; }
.print.term pre { margin: 0; overflow-x: auto; font: 500 12px/1.65 var(--mono); }
.print.term .dim { color: #6b7280; } .print.term .ok { color: #7fe0a9; }
.print.term > span { color: #9aa0ab; padding: 10px 0 12px; }
.ba { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 12px 32px; align-items: end; }
.ba-frame { --pos: 50%; position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 766 / 680; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-frame::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px #0004; pointer-events: none; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; background: #000a; color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba-tag-l { left: 12px; } .ba-tag-r { right: 12px; }
.ba figcaption { font: 500 13px/1.5 var(--mono); color: #9aa0ab; max-width: 34ch; }
.lightbox { max-width: min(1100px, 94vw); max-height: 92vh; padding: 12px; border: 0; border-radius: 14px; background: #111317; color: #f1f2f4; }
.lightbox::backdrop { background: #0b0c0fd9; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 8px; }
.lightbox p { padding: 10px 4px 4px; font: 500 12.5px/1.4 var(--mono); color: #c9ccd3; }
.lightbox-close { position: absolute; right: 12px; top: 12px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #111; font-weight: 600; }

/* ---- Sobre e rodapé */
.about { padding: clamp(64px, 9vw, 120px) var(--pad); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); }
.about h2 { font: 800 clamp(44px, 7vw, 104px)/.92 var(--display); letter-spacing: -.045em; }
.about-text { display: grid; gap: 18px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 40em; }
.foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 32px; align-items: baseline; padding: 28px var(--pad) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.foot-name { font-weight: 600; color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---- página longa: cada seção abaixo da abertura só passa por layout e pintura quando chega perto da tela.
   O tamanho estimado segura a barra de rolagem; depois do primeiro desenho o navegador lembra o tamanho real. */
#aurora, #vini-joga, #ingresso, #print3d, #como-trabalho, #ferramentas, #bastidores, #sobre { content-visibility: auto; }
#aurora { contain-intrinsic-size: auto 630px; } #vini-joga { contain-intrinsic-size: auto 2300px; } #ingresso { contain-intrinsic-size: auto 460px; }
#print3d { contain-intrinsic-size: auto 500px; } #como-trabalho { contain-intrinsic-size: auto 750px; } #ferramentas { contain-intrinsic-size: auto 880px; }
#bastidores { contain-intrinsic-size: auto 1950px; } #sobre { contain-intrinsic-size: auto 300px; }
@media (max-width: 760px) {
  #aurora { contain-intrinsic-size: auto 1430px; } #vini-joga { contain-intrinsic-size: auto 3080px; } #ingresso { contain-intrinsic-size: auto 910px; }
  #print3d { contain-intrinsic-size: auto 510px; } #como-trabalho { contain-intrinsic-size: auto 690px; } #ferramentas { contain-intrinsic-size: auto 900px; }
  #bastidores { contain-intrinsic-size: auto 1700px; } #sobre { contain-intrinsic-size: auto 460px; }
}

/* ---- trilhas de uma coluna: o conteúdo mínimo de um filho não alarga a seção */
.chapter, .how, .tools, .lab, .hero-copy, .game-copy, .aurora-copy, .ing-copy, .brain, .flow, .loop, .loop-monitor { grid-template-columns: minmax(0, 1fr); }

/* ---- entrada suave: o JS só esconde o que ainda está fora da tela; sem JS tudo aparece */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.wait { opacity: 0; transform: translateY(22px); }

/* ---- tablet */
@media (max-width: 1100px) {
  .deck { --spread: 14px; }
  .deck-card { aspect-ratio: 4 / 3; }
  .c-aurora { padding: 14px; gap: 8px; }
  .dc-msg { font-size: 13px; padding: 7px 11px; }
  .log { grid-template-columns: 1fr; }
  .arena { grid-template-columns: 1fr; }
  .pato { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pato .game-copy { grid-column: 1 / -1; }
  .pato-phone { justify-self: center; width: min(240px, 100%); }
  .tools-map { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}

/* ---- celular: composição própria, não a do computador espremida */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { position: fixed; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top, 0px)); flex-direction: column; gap: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -24px #16181d8c; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 14px 12px; font-size: 17px; color: var(--ink); border-radius: 10px; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 22px; }
  .hero-name { font-size: clamp(52px, 15vw, 88px); }
  /* a bancada vira uma fileira de cartões que se arrasta */
  .deck { height: auto; perspective: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; }
  .deck::-webkit-scrollbar { display: none; }
  .deck-card { position: relative; left: auto; top: auto; flex: 0 0 78%; width: auto; transform: none !important; opacity: 1 !important; scroll-snap-align: center; z-index: auto; }
  .deck-card { aspect-ratio: 4 / 3; }
  .c-aurora { padding: 14px; gap: 8px; }
  .dc-msg { font-size: 13px; padding: 7px 11px; }
  .ba { grid-template-columns: 1fr; }
  .log { grid-template-columns: 1fr; margin-top: 8px; }
  .log-list { grid-template-columns: 1fr; }
  .chapter { padding-top: 56px; }
  .aurora-inner, .ingresso, .p3d, .about { grid-template-columns: 1fr; }
  .brain-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vj-head { grid-template-columns: 1fr; justify-items: start; }
  .vj-head img { width: 180px; }
  .pato { grid-template-columns: 1fr; }
  .pato-phone { width: 200px; }
  .flow-steps li { font-size: 11px; }
  .flow-stage { min-height: 260px; }
  .p3d-stage { width: min(100%, 420px); }
  /* a máquina vira uma trilha vertical curta: só o passo atual e os vizinhos à mostra */
  .loop-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loop-art { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .loop-ctrl { justify-content: stretch; }
  .loop-ctrl button { flex: 1; min-width: 0; padding: 0 8px; }
  .tools-map { grid-template-columns: 1fr; gap: 18px; }
  .tools-out, .tools-prod { display: none; }
  .wires { display: none; }
  .tools-chain { font-size: 13.5px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
  .lab-sheet { columns: 2 150px; column-gap: 10px; }
  .print { margin-bottom: 10px; padding: 6px 6px 0; }
  .print > span { font-size: 11px; }
  .print.term { column-span: all; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .brain-path { grid-template-columns: 1fr; }
  .loop-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal.wait { opacity: 1; transform: none; }
}