/* Solar Hoje · motion graphics do site institucional.
   Regras (herdadas do lobran-site): só transform e opacity; o estado natural do elemento é o estado FINAL
   (sem JS, com prefers-reduced-motion ou para robôs, tudo aparece completo e parado). Orquestração em
   site.js: pausa fora da tela (.is-wait), "ver de novo" (.is-replay), revelação ao rolar (.rv).
   Sem contador animado e sem o mesmo fade em todo elemento (marcas de template). */

:root { --out: cubic-bezier(.22, 1, .36, 1); }

/* ---------- hero com motion graphic lateral ---------- */
.hero__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) {
  .hero--aside .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s8); }
  .hero--aside .h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); }
}
.cs { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0); transition: transform 1s var(--out); }

@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: heroIn .8s var(--out) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__copy > :nth-child(5) { animation-delay: .3s; }
.hero__aside { animation: heroIn .9s var(--out) .3s both; }
.reading > div { animation: heroIn .7s var(--out) both; }
.reading > div:nth-child(1) { animation-delay: .38s; }
.reading > div:nth-child(2) { animation-delay: .46s; }
.reading > div:nth-child(3) { animation-delay: .54s; }
.reading > div:nth-child(4) { animation-delay: .62s; }

/* revelação ao rolar (site.js aplica só abaixo da dobra) */
.rv { opacity: 0; transform: translateY(20px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .7s var(--out), transform .9s var(--out); }

/* ---------- cartão de motion graphic ---------- */
.viz { --t0: .75s; border-radius: var(--r-lg); padding: var(--s5); background: rgba(2, 71, 78, .55); border: 1px solid rgba(231, 241, 241, .16); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6); }
@media (max-width: 479px) { .viz { padding: var(--s4); } }
.viz__hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.viz__t { font-family: var(--f-mono); font-weight: 500; color: #fff; font-size: .86rem; }
.viz__lg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .74rem; color: var(--on-deep-3); }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.lg:first-child { margin-left: 0; }
.lg--use { background: rgba(231, 241, 241, .3); }
.lg--comp { background: var(--teal-400); }
.viz__ft { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s3); font-size: .8rem; line-height: 1.5; color: var(--on-deep-3); }
@media (max-width: 559px) { .viz__ft { flex-wrap: wrap; } }
.viz__replay { flex-shrink: 0; font: inherit; font-weight: 600; color: var(--sun-200); background: rgba(245, 129, 30, .12); border: 1px solid rgba(245, 129, 30, .35); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer;
  transition: transform .22s var(--spring), background-color .18s var(--ease), border-color .18s var(--ease); }
.viz__replay:hover { background: rgba(245, 129, 30, .2); border-color: rgba(245, 129, 30, .65); transform: translateY(-1px); }
.viz__replay:active { transform: scale(.96); }
.viz.is-wait *, .viz.is-wait *::before, .viz.is-wait *::after { animation-play-state: paused !important; }
.viz.is-replay *, .viz.is-replay *::before, .viz.is-replay *::after { animation: none !important; }

/* ---------- 1. fluxo de energia (ciclo de 15 s: dia, noite, rua apagada) ---------- */
.fx { display: block; width: 100%; height: auto; overflow: visible; }
.fx-w path { fill: none; stroke: rgba(231, 241, 241, .3); stroke-width: 2; stroke-linejoin: round; }
.fx-n rect { fill: var(--deep); stroke: rgba(231, 241, 241, .24); stroke-width: 1.2; }
.fx-n--hub rect { fill: var(--deep-2); stroke: var(--sun-300); stroke-width: 1.5; }
.fx-t { fill: #fff; font: 600 13px var(--f-body); }
.fx-s { fill: rgba(231, 241, 241, .6); font: 400 10px var(--f-mono); }
.fx-cut circle { fill: var(--danger); stroke: #fff; stroke-width: 1.5; }
.fx-cut path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.fd { fill: var(--sun-300); }
.fd--bat, .fd--grid.fd--rev { fill: var(--teal-400); }

@keyframes fdPv { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(0, 90px); } 92% { opacity: 1; } 100% { transform: translate(110px, 90px); opacity: 0; } }
@keyframes fdHome { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(44px, 0); opacity: 0; } }
@keyframes fdGrid { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 44.6% { transform: translate(0, -87px); } 92% { opacity: 1; } 100% { transform: translate(108px, -87px); opacity: 0; } }
@keyframes fdBat { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 53% { transform: translate(0, 95px); } 92% { opacity: 1; } 100% { transform: translate(-84px, 95px); opacity: 0; } }
@keyframes fdCar { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 53% { transform: translate(0, 95px); } 92% { opacity: 1; } 100% { transform: translate(84px, 95px); opacity: 0; } }
.fd { opacity: 0; animation: 2.1s linear infinite both; }
.fd--pv { animation-name: fdPv; }
.fd--home { animation-name: fdHome; animation-duration: 1.1s; }
.fd--grid { animation-name: fdGrid; }
.fd--bat { animation-name: fdBat; }
.fd--car { animation-name: fdCar; }
.fd--rev { animation-direction: reverse; }
.fd--d1 { animation-delay: .7s; }
.fd--d2 { animation-delay: 1.4s; }
.fd--home.fd--d1 { animation-delay: .37s; }
.fd--home.fd--d2 { animation-delay: .74s; }

@keyframes scDia { 0%, 31% { opacity: 1; } 33.3%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scNoite { 0%, 31.3% { opacity: 0; } 33.3%, 64.6% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes scApagao { 0%, 64.6% { opacity: 0; } 66.6%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes legDia { 0%, 31% { opacity: 1; } 33.3%, 98% { opacity: .4; } 100% { opacity: 1; } }
@keyframes legNoite { 0%, 31.3% { opacity: .4; } 33.3%, 64.6% { opacity: 1; } 66.6%, 100% { opacity: .4; } }
@keyframes legApagao { 0%, 64.6% { opacity: .4; } 66.6%, 98% { opacity: 1; } 100% { opacity: .4; } }
@keyframes gridDim { 0%, 64.6% { opacity: 1; } 66.6%, 98% { opacity: .35; } 100% { opacity: 1; } }
.fx-sc--dia { animation: scDia 15s linear infinite both; }
.fx-sc--noite { animation: scNoite 15s linear infinite both; }
.fx-sc--apagao, .fx-cut { animation: scApagao 15s linear infinite both; }
.fx-n--grid { animation: gridDim 15s linear infinite both; }
.fx-leg { display: grid; gap: 6px; margin-top: var(--s3); font-size: .86rem; line-height: 1.45; color: var(--on-deep-2); }
.fx-leg li { position: relative; padding-left: 18px; }
.fx-leg li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--sun-300); }
.fx-leg--noite::before { background: var(--teal-400) !important; }
.fx-leg--apagao::before { background: var(--danger) !important; }
.fx-leg strong { color: #fff; }
.fx-leg--dia { animation: legDia 15s linear infinite both; }
.fx-leg--noite { animation: legNoite 15s linear infinite both; }
.fx-leg--apagao { animation: legApagao 15s linear infinite both; }

/* celular: o SVG encolhe; some a segunda linha dos nós e o nome cresce (a legenda abaixo explica as cenas) */
@media (max-width: 559px) {
  .fx-s { display: none; }
  .fx-t { font-size: 17px; transform: translateY(6px); }
}

/* ---------- 2. quadro de circuitos: a rua apaga, o essencial continua ---------- */
.qc { border-radius: var(--r); background: var(--paper); color: var(--ink); padding: var(--s3) var(--s4) var(--s4); }
.qc__grid { display: grid; font-family: var(--f-mono); font-size: .82rem; padding-bottom: var(--s3); border-bottom: 2px dashed var(--line-2); }
.qc__grid > span { grid-area: 1 / 1; }
.qc__on { color: var(--teal-700); opacity: 0; }
.qc__off { color: var(--danger); font-weight: 500; }
.qc__list { display: grid; }
@media (min-width: 480px) { .qc__list { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }
.qc__c { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.qc__brk { position: relative; grid-row: span 2; width: 16px; height: 26px; border-radius: 3px; border: 1.5px solid var(--text-3); background: var(--white); }
.qc__brk i { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 9px; border-radius: 2px; background: var(--line-2); }
.qc__c.is-ess .qc__brk { border-color: var(--teal-700); }
.qc__c.is-ess .qc__brk i { top: 2px; bottom: auto; background: var(--sun); }
.qc__n { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.qc__st { font-family: var(--f-mono); font-size: .72rem; color: var(--teal-700); }
.qc__c:not(.is-ess) { opacity: .45; }
.qc__c:not(.is-ess) .qc__st { color: var(--text-3); }
.qc__bat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; margin-top: var(--s3); }
.qc__bl { font-size: .86rem; font-weight: 600; color: var(--teal-700); }
.qc__bv { font-family: var(--f-mono); font-size: .86rem; }
.qc__bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qc__bar i { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, var(--teal-600), var(--teal-400)); transform-origin: left; transform: scaleX(.86); }

@keyframes qcOn { from { opacity: 1; } to { opacity: 0; } }
@keyframes qcOff { from { opacity: 0; } to { opacity: 1; } }
@keyframes qcDim { from { opacity: 1; } to { opacity: .45; } }
@keyframes qcBrk { from { transform: translateY(-11px); background: var(--sun); } to { transform: none; } }
@keyframes qcBat { from { transform: scaleX(1); } to { transform: scaleX(.86); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qc__on { animation: qcOn .3s var(--ease) calc(var(--t0) + 1.2s) both; }
.qc__off { animation: qcOff .3s var(--ease) calc(var(--t0) + 1.25s) both; }
.qc__c:not(.is-ess) { animation: qcDim .45s var(--ease) calc(var(--t0) + 1.45s) both; }
.qc__c:not(.is-ess) .qc__brk i { animation: qcBrk .3s var(--out) calc(var(--t0) + 1.35s) both; }
.qc__st { animation: qcOff .4s var(--ease) calc(var(--t0) + 1.6s) both; }
.qc__bat { animation: rise .5s var(--out) calc(var(--t0) + 1.5s) both; }
.qc__bar i { animation: qcBat 3.2s linear calc(var(--t0) + 1.7s) both; }

/* ---------- 3. gestão de carga na garagem ---------- */
.gc { border-radius: var(--r); background: var(--paper); color: var(--ink); padding: var(--s4); display: grid; gap: var(--s4); }
.gc__tot { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.gc__tl { font-size: .86rem; font-weight: 600; }
.gc__tv { display: grid; font-family: var(--f-mono); font-size: 1.05rem; text-align: right; }
.gc__tv b { grid-area: 1 / 1; font-weight: 500; }
.gc__v1, .gc__v2, .gc__v3 { opacity: 0; }
.gc__track { grid-column: 1 / -1; position: relative; height: 14px; border-radius: 99px; background: var(--line); }
.gc__fill { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, var(--teal-600), var(--sun-400)); transform-origin: left; transform: scaleX(.8); }
.gc__lim { position: absolute; left: 80%; top: -5px; bottom: -5px; width: 2px; background: var(--danger); }
.gc__lim::after { content: 'limite'; position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-style: normal; font-size: .66rem; color: var(--danger); }
.gc__cars { display: grid; gap: 8px; margin-top: 6px; }
.gc__car { display: grid; grid-template-columns: 64px 1fr 56px; gap: 10px; align-items: center; font-size: .86rem; }
.gc__cn { font-family: var(--f-mono); font-size: .78rem; color: var(--text-2); }
.gc__cb { position: relative; height: 10px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.gc__cb i { position: absolute; inset: 0; border-radius: 99px; background: var(--teal-600); transform-origin: left; transform: scaleX(.743); }
.gc__cv { font-family: var(--f-mono); font-size: .78rem; text-align: right; }
.gc__note { font-size: .84rem; color: var(--text-2); padding-top: var(--s3); border-top: 2px dashed var(--line-2); }

@keyframes gcFill { 0%, 4.5% { transform: scaleX(0); } 12%, 29.5% { transform: scaleX(.269); } 37%, 54.5% { transform: scaleX(.538); } 62%, 79.5% { transform: scaleX(.796); } 87%, 100% { transform: scaleX(.8); } }
@keyframes gcV1 { 0%, 8% { opacity: 0; } 12%, 29.5% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes gcV2 { 0%, 33% { opacity: 0; } 37%, 54.5% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes gcV3 { 0%, 58% { opacity: 0; } 62%, 79.5% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes gcV4 { 0%, 83% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes gcC1 { 0%, 4.5% { transform: scaleX(0); } 12%, 54.5% { transform: scaleX(1); } 62%, 79.5% { transform: scaleX(.986); } 87%, 100% { transform: scaleX(.743); } }
@keyframes gcC2 { 0%, 29.5% { transform: scaleX(0); } 37%, 54.5% { transform: scaleX(1); } 62%, 79.5% { transform: scaleX(.986); } 87%, 100% { transform: scaleX(.743); } }
@keyframes gcC3 { 0%, 54.5% { transform: scaleX(0); } 62%, 79.5% { transform: scaleX(.986); } 87%, 100% { transform: scaleX(.743); } }
@keyframes gcC4 { 0%, 79.5% { transform: scaleX(0); } 87%, 100% { transform: scaleX(.743); } }
@keyframes gcR1 { 0%, 4.5% { opacity: .35; } 12%, 100% { opacity: 1; } }
@keyframes gcR2 { 0%, 29.5% { opacity: .35; } 37%, 100% { opacity: 1; } }
@keyframes gcR3 { 0%, 54.5% { opacity: .35; } 62%, 100% { opacity: 1; } }
@keyframes gcR4 { 0%, 79.5% { opacity: .35; } 87%, 100% { opacity: 1; } }
@keyframes gcEnd { 0%, 85% { opacity: 0; } 95%, 100% { opacity: 1; } }
.viz--load { --gd: 4.6s; }
.gc__fill { animation: gcFill var(--gd) var(--ease) var(--t0) both; }
.gc__v1 { animation: gcV1 var(--gd) linear var(--t0) both; }
.gc__v2 { animation: gcV2 var(--gd) linear var(--t0) both; }
.gc__v3 { animation: gcV3 var(--gd) linear var(--t0) both; }
.gc__v4 { animation: gcV4 var(--gd) linear var(--t0) both; }
.gc__car--1 .gc__cb i { animation: gcC1 var(--gd) var(--ease) var(--t0) both; }
.gc__car--2 .gc__cb i { animation: gcC2 var(--gd) var(--ease) var(--t0) both; }
.gc__car--3 .gc__cb i { animation: gcC3 var(--gd) var(--ease) var(--t0) both; }
.gc__car--4 .gc__cb i { animation: gcC4 var(--gd) var(--ease) var(--t0) both; }
.gc__car--1 { animation: gcR1 var(--gd) linear var(--t0) both; }
.gc__car--2 { animation: gcR2 var(--gd) linear var(--t0) both; }
.gc__car--3 { animation: gcR3 var(--gd) linear var(--t0) both; }
.gc__car--4 { animation: gcR4 var(--gd) linear var(--t0) both; }
.gc__cv, .gc__note { animation: gcEnd var(--gd) linear var(--t0) both; }

/* ---------- 4. histórico da conta (barras como as da conta de luz) ---------- */
.hb { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; padding: var(--s5) var(--s3) var(--s2); border-radius: var(--r); background: var(--paper); }
.hb__m { display: grid; gap: 6px; justify-items: center; }
.hb__bar { position: relative; width: 100%; max-width: 26px; height: 150px; }
@media (max-width: 479px) { .hb__bar { height: 120px; } }
.hb__bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 1px 1px; transform-origin: bottom; }
.hb__use { background: #cfc6b9; }
.hb__comp { background: var(--teal-600); }
.hb__l { font-family: var(--f-mono); font-size: .66rem; color: var(--text-3); }
.hb__mark { position: absolute; left: calc(5 / 12 * 100% + 4px); top: 8px; bottom: 26px; border-left: 2px dashed var(--sun); padding-left: 6px; font-family: var(--f-mono); font-size: .7rem; color: var(--sun-ink); }
.hb__h0 { height: 0; } .hb__h1 { height: 5%; } .hb__h2 { height: 10%; } .hb__h3 { height: 15%; } .hb__h4 { height: 20%; }
.hb__h5 { height: 25%; } .hb__h6 { height: 30%; } .hb__h7 { height: 35%; } .hb__h8 { height: 40%; } .hb__h9 { height: 45%; }
.hb__h10 { height: 50%; } .hb__h11 { height: 55%; } .hb__h12 { height: 60%; } .hb__h13 { height: 65%; } .hb__h14 { height: 70%; }
.hb__h15 { height: 75%; } .hb__h16 { height: 80%; } .hb__h17 { height: 85%; } .hb__h18 { height: 90%; } .hb__h19 { height: 95%; } .hb__h20 { height: 100%; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hb__use { animation: grow .55s var(--out) both; }
.hb__comp { animation: grow .6s var(--out) both; }
.hb__mark { animation: rise .5s var(--out) calc(var(--t0) + .9s) both; }
.hb__m:nth-child(1) .hb__use { animation-delay: calc(var(--t0) + .00s); }
.hb__m:nth-child(2) .hb__use { animation-delay: calc(var(--t0) + .06s); }
.hb__m:nth-child(3) .hb__use { animation-delay: calc(var(--t0) + .12s); }
.hb__m:nth-child(4) .hb__use { animation-delay: calc(var(--t0) + .18s); }
.hb__m:nth-child(5) .hb__use { animation-delay: calc(var(--t0) + .24s); }
.hb__m:nth-child(6) .hb__use { animation-delay: calc(var(--t0) + .30s); }
.hb__m:nth-child(7) .hb__use { animation-delay: calc(var(--t0) + .36s); }
.hb__m:nth-child(8) .hb__use { animation-delay: calc(var(--t0) + .42s); }
.hb__m:nth-child(9) .hb__use { animation-delay: calc(var(--t0) + .48s); }
.hb__m:nth-child(10) .hb__use { animation-delay: calc(var(--t0) + .54s); }
.hb__m:nth-child(11) .hb__use { animation-delay: calc(var(--t0) + .60s); }
.hb__m:nth-child(12) .hb__use { animation-delay: calc(var(--t0) + .66s); }
.hb__m:nth-child(6) .hb__comp { animation-delay: calc(var(--t0) + 1.2s); }
.hb__m:nth-child(7) .hb__comp { animation-delay: calc(var(--t0) + 1.32s); }
.hb__m:nth-child(8) .hb__comp { animation-delay: calc(var(--t0) + 1.44s); }
.hb__m:nth-child(9) .hb__comp { animation-delay: calc(var(--t0) + 1.56s); }
.hb__m:nth-child(10) .hb__comp { animation-delay: calc(var(--t0) + 1.68s); }
.hb__m:nth-child(11) .hb__comp { animation-delay: calc(var(--t0) + 1.8s); }
.hb__m:nth-child(12) .hb__comp { animation-delay: calc(var(--t0) + 1.92s); }

/* ---------- 5. revisão da fatura + mensagem ---------- */
.viz--doc { --t0: .7s; }
.doc { position: relative; overflow: hidden; border-radius: var(--r); background: var(--paper); color: var(--ink); padding: var(--s2) var(--s4) var(--s3); }
.doc__rows { display: grid; }
.doc__row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 10px 2px; border-bottom: 1px dashed var(--line-2); font-size: .9rem; line-height: 1.4; }
.doc__row:last-child { border-bottom: 0; }
.doc__row span { position: relative; z-index: 1; color: var(--text-2); }
.doc__row.is-flag span { color: var(--ink); font-weight: 600; }
.doc__row.is-flag::before { content: ''; position: absolute; inset: 2px -8px; border-radius: 8px; background: rgba(245, 129, 30, .14); box-shadow: inset 0 0 0 1px rgba(245, 129, 30, .45); }
.doc__st { position: relative; z-index: 1; flex-shrink: 0; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; border-radius: var(--r-pill); padding: 3px 10px; }
.doc__st--ok { color: var(--teal-700); background: rgba(12, 99, 106, .1); }
.doc__st--flag { color: var(--sun-ink); background: rgba(245, 129, 30, .24); }
.doc__scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - 46px), rgba(68, 165, 174, .16) calc(100% - 3px), var(--teal-400) calc(100% - 2px), var(--teal-400) 100%); }
@keyframes docScan { 0% { opacity: 1; transform: translateY(-100%); } 88% { opacity: 1; transform: translateY(-4%); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.doc__scan { animation: docScan 2.6s cubic-bezier(.45, 0, .55, 1) var(--t0) both; }
.doc__st { animation: pop .45s var(--out) both; }
.doc__row:nth-child(1) .doc__st { animation-delay: calc(var(--t0) + .45s); }
.doc__row:nth-child(2) .doc__st { animation-delay: calc(var(--t0) + .8s); }
.doc__row:nth-child(3) .doc__st { animation-delay: calc(var(--t0) + 1.15s); }
.doc__row:nth-child(4) .doc__st { animation-delay: calc(var(--t0) + 1.5s); }
.doc__row:nth-child(5) .doc__st { animation-delay: calc(var(--t0) + 1.85s); }
.doc__row:nth-child(6) .doc__st { animation-delay: calc(var(--t0) + 2.2s); }
.doc__row.is-flag::before { animation: fade .5s var(--ease) calc(var(--t0) + 1.85s) both; }
.msg { margin-top: var(--s3); display: grid; gap: 8px; justify-items: start; animation: rise .55s var(--out) calc(var(--t0) + 2.8s) both; }
.msg__b { max-width: 92%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--ink); font-size: .9rem; line-height: 1.45; }
.msg__k { display: flex; flex-wrap: wrap; gap: 6px; }
.msg__k span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--teal-400); color: #fff; font-size: .8rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cs { transform: none; }
  .rv { opacity: 1; transform: none; }
  .fd, .fx-cut { display: none; }
  .fx-leg li { opacity: 1 !important; }
}