/* SiloPimentel.mkt · Animações explicativas AO + IA · v2.1 · 29/10/2026
   Base técnica compartilhada: fonte, tokens, página, controles, legenda, camadas de cena e movimento.
   O cenário de cada oferta fica em ao-celular.css e ia-editor.css. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --carvao: #181C1A;
  --carvao-2: #202523;
  --carvao-3: #2A302D;
  --marfim: #F3ECE2;
  --areia: #EAE0D2;
  --cobre: #A85C3A;
  --cobre-claro: #D7A06D;
  --tinta: #181C1A;
  --tinta-2: #46504B;
  --texto-claro: #F3ECE2;
  --texto-claro-2: rgba(243, 236, 226, .78);
  --linha-clara: rgba(24, 28, 26, .14);
  --linha-escura: rgba(243, 236, 226, .16);
  --ease: cubic-bezier(.22, .7, .2, 1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carvao);
  color: var(--texto-claro);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
p, h1, h2, h3, ol, ul, dl, dd { margin: 0; }
button { font: inherit; }
a { color: var(--cobre-claro); }

/* ---------- página avulsa ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 8px var(--gutter) 28px; }
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--linha-escura);
}
.page-head img { height: 24px; width: auto; }
.page-head .crumb { font-size: 14px; color: var(--texto-claro-2); text-align: right; }
.page-head .crumb a { color: var(--texto-claro-2); }

/* ---------- módulo ---------- */
.demo { display: grid; min-width: 0; }
.demo-head { grid-area: head; min-width: 0; }
.stage { grid-area: stage; position: relative; display: grid; min-width: 0; }
.caption { grid-area: cap; }
.demo-ctl { grid-area: ctl; }
.demo-script { grid-area: script; }

.kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre-claro); }
.kicker .ex { color: var(--texto-claro-2); font-weight: 600; letter-spacing: .06em; }
.demo-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin-top: 4px; letter-spacing: -.01em; }

.scene { grid-area: 1 / 1; min-width: 0; }
.scene-cap { display: none; }

.caption .count { color: var(--cobre-claro); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.caption .text { font-size: 19px; font-weight: 550; line-height: 1.38; margin-top: 4px; }

.controls { display: flex; gap: 8px; }
.ctl {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linha-escura); background: transparent;
  color: var(--texto-claro); cursor: pointer; flex: none;
}
.ctl svg { width: 18px; height: 18px; fill: currentColor; }
.ctl .ctl-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctl:hover { border-color: var(--cobre-claro); }
.ctl-play { background: var(--marfim); color: var(--tinta); border-color: var(--marfim); width: 64px; border-radius: 999px; }
.ctl-restart { border-color: rgba(215, 160, 109, .6); }
.ctl:focus-visible, .seg:focus-visible, .demo-script summary:focus-visible { outline: 3px solid var(--cobre-claro); outline-offset: 3px; }
.progress { display: flex; gap: 5px; margin-top: 8px; }
.seg { flex: 1; position: relative; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: rgba(243, 236, 226, .18); }
.seg i { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 4px; background: var(--cobre-claro); width: 0; }

.demo-script { margin-top: 18px; border-top: 1px solid var(--linha-escura); padding-top: 12px; color: var(--texto-claro-2); }
.demo-script summary { cursor: pointer; font-weight: 650; color: var(--texto-claro); font-size: 16px; }
.demo-script ol { margin: 10px 0 0; padding-left: 22px; }
.demo-script li { margin: 6px 0; font-size: 16px; }
.demo-script .fict { margin-top: 8px; font-size: 14px; }

/* ---------- sem JS: storyboard empilhado ---------- */
.no-js .demo { display: block; }
.no-js .demo-ctl, .no-js .caption { display: none; }
.no-js .stage { display: block; margin-top: 16px; }
.no-js .scene { padding: 18px 0 22px; border-bottom: 1px solid var(--linha-escura); }
.no-js .scene-cap { display: block; margin-top: 14px; font-size: 17px; color: var(--texto-claro); }
.no-js .scene-cap b { color: var(--cobre-claro); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-right: 8px; }

/* ---------- player ---------- */
.js .scene { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.js .scene.is-active { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.js .demo.reduced .scene { transition: none; }

/* ---------- movimento ----------
   Regra: o estilo padrão é o estado FINAL de cada cena.
   Animações só existem com JS, na cena ativa, fora do modo estático. */
.js .demo:not(.static) .scene.is-active .a-in { animation: aIn .5s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-pop { animation: aPop .45s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-wipe { animation: aWipe var(--t, 1.4s) steps(var(--n, 3), end) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-strike { animation: aStrike .45s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-hl { animation: aHl .5s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-gone { animation: aGone var(--t, 1.2s) linear both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-tap { animation: aTap .7s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-dim { animation: aDim .5s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-blink i { animation: aBlink 1s ease-in-out infinite; }
.js .demo:not(.static) .scene.is-active .a-blink i:nth-child(2) { animation-delay: .15s; }
.js .demo:not(.static) .scene.is-active .a-blink i:nth-child(3) { animation-delay: .3s; }
.js .demo:not(.static) .scene.is-active .a-collapse { animation: aCollapse var(--t, 1.2s) linear both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-grow { animation: aGrow .7s var(--ease) both; animation-delay: var(--d, 0s); overflow: hidden; }
.js .demo:not(.static) .scene.is-active .a-expand { animation: aExpand .45s var(--ease) both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-draw { animation: aDraw .6s ease-out both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-pulse { animation: aPulse 1.3s var(--ease) 2 both; animation-delay: var(--d, 0s); }
.js .demo:not(.static) .scene.is-active .a-glow { animation: aGlow 1.1s ease-out 2 both; animation-delay: var(--g, 0s); }
.js .demo.is-paused .scene.is-active * { animation-play-state: paused !important; }

@keyframes aIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes aPop { from { opacity: 0; transform: scale(.88); } }
@keyframes aWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aStrike { from { background-size: 0% 2px; color: var(--tinta); } }
@keyframes aHl { from { background-color: var(--hl-from, transparent); box-shadow: none; } }
@keyframes aGone { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aTap { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes aDim { from { opacity: 1; } }
@keyframes aCollapse { 0%, 78% { max-height: 12em; opacity: 1; } 88% { max-height: 12em; opacity: 0; } 100% { max-height: 0; opacity: 0; } }
@keyframes aExpand { from { max-height: 0; opacity: 0; } to { max-height: 4em; opacity: 1; } }
@keyframes aGrow { 0% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } 55% { max-height: 12em; opacity: 0; } 100% { max-height: 12em; opacity: 1; } }
@keyframes aDraw { from { stroke-dashoffset: 1; } }
@keyframes aPulse { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes aGlow { 0% { outline: 2px solid rgba(215, 160, 109, .95); outline-offset: 0; } 100% { outline: 2px solid rgba(215, 160, 109, 0); outline-offset: 9px; } }
@keyframes aBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ligações de foco (desenhadas por links.js, só desktop) e brilho do bloco ativo */
.set, .ed { position: relative; }
.lk-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.lk-path { fill: none; stroke: rgba(215, 160, 109, .5); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.scene:not(.is-active) .lk-svg, .scene:not(.is-active) .lk-pulse { visibility: hidden; }
.lk-pulse { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; offset-rotate: 0deg; offset-anchor: center;
  background: var(--cobre-claro); box-shadow: 0 0 0 4px rgba(215, 160, 109, .22), 0 0 14px rgba(215, 160, 109, .9);
  opacity: 0; pointer-events: none; z-index: 4; }

/* elementos transitórios: estado final escondido */
.a-gone, .a-tap { opacity: 0; }
.no-js .a-gone, .no-js .a-tap, .demo.static .a-gone, .demo.static .a-tap { visibility: hidden; }

/* texto que some e libera o espaço (ex.: rascunho no campo de mensagem depois de enviado) */
.a-collapse { max-height: 0; opacity: 0; overflow: hidden; }
.no-js .a-collapse, .demo.static .a-collapse { display: none; }
.a-expand { overflow: hidden; }

/* troca no mesmo lugar (ex.: [cidade] → Olinda) */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }

/* corte de revisão */
.strike { background: linear-gradient(var(--cobre), var(--cobre)) 0 58% / 100% 2px no-repeat; color: var(--tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .js .scene, .js .scene.is-active { transition: none; }
}

/* ---------- celular (layout) ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .page-head { padding-bottom: 6px; margin-bottom: 8px; }
  .page-head img { height: 22px; }
  .page-head .crumb { font-size: 13px; }
  .demo { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "ctl" "stage" "cap" "script" !important; grid-template-rows: none !important; }
  .demo-title { font-size: 18px; margin-top: 2px; }
  .demo-ctl { margin-top: 10px; }
  .controls { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr; gap: 8px; }
  .ctl, .ctl-play { width: auto; border-radius: 999px; }
  .progress { margin-top: 4px; }
  .stage { margin-top: 6px; }
  .caption { margin-top: 10px; }
  .caption .text { font-size: 17px; }
  .m-hide { display: none !important; }
}
@media (min-width: 641px) { .d-hide { display: none !important; } }