/* ==========================================================================
   Almanaque · a vida da página (06/10/2026)
   O jornal como organismo: nada "entra" na tela; tudo já está lá e respira.
   Papel amassado, luz que passeia devagar, árvores que balançam, nuvens que
   vão, a tropa que trota e anda, a flâmula do mastro ao vento, um viajante
   que percorre a estrada das seis paradas, fotos que respiram, o selo cuja
   tinta pulsa, o brasão com um brilho que passa e pó dourado.
   Quem pede menos movimento recebe o jornal parado (fim do arquivo).
   ========================================================================== */

/* ---------- o papel: amassado (relevo de luz) e uma luz quente que passeia ---------- */
body { position: relative; }
body::after { content: ""; position: absolute; inset: 0; z-index: 45; pointer-events: none; mix-blend-mode: multiply; opacity: .37;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.0028' numOctaves='3' seed='17' stitchTiles='stitch' result='n'/><feDiffuseLighting in='n' surfaceScale='4' diffuseConstant='1.22' lighting-color='%23fff6e4'><feDistantLight azimuth='235' elevation='32'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>") 0 0 / 1800px 1800px; }
body::before { content: ""; position: fixed; inset: -20%; z-index: 44; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 40% 35% at 50% 50%, rgb(255 236 196 / .55), transparent 70%),
    radial-gradient(ellipse 120% 110% at 50% 45%, transparent 55%, rgb(110 75 35 / .22));
  animation: luz 38s ease-in-out infinite alternate; }
@keyframes luz { from { transform: translate(-12%, -6%); } to { transform: translate(12%, 8%); } }

/* ---------- a paisagem respira ---------- */
.pg-arvore { transform-box: fill-box; transform-origin: 50% 100%; animation: balanca var(--d, 5s) ease-in-out infinite alternate; animation-delay: var(--a, 0s); }
@keyframes balanca { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.pg-nuvem { animation: vai var(--d, 80s) linear infinite alternate; animation-delay: var(--a, 0s); }
@keyframes vai { from { transform: translateX(-90px); } to { transform: translateX(160px); } }
.pg-aves { animation: aves 14s ease-in-out infinite alternate; }
@keyframes aves { from { transform: translate(-30px, 4px); } to { transform: translate(60px, -6px); } }
.pg-ave { transform-box: fill-box; transform-origin: center; animation: bate .7s ease-in-out infinite alternate; animation-delay: var(--a, 0s); }
@keyframes bate { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }
.pg-sol { transform-box: fill-box; transform-origin: center; animation: girar 80s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.pg-flamula { transform-box: fill-box; transform-origin: 0 50%; animation: vento 1.6s ease-in-out infinite alternate; }
@keyframes vento { 0% { transform: skewY(-6deg) scaleX(.92); } 100% { transform: skewY(5deg) scaleX(1.04); } }
.pg-cav { transform-box: fill-box; transform-origin: 50% 100%; animation: trote 1.05s ease-in-out infinite alternate; animation-delay: var(--a, 0s); }
@keyframes trote { from { transform: translateY(0) rotate(-.5deg); } to { transform: translateY(-.8px) rotate(.5deg); } }
/* em <use> solto, só deslocamento (o giro usaria a origem errada) */
@keyframes trote-solto { from { transform: translateY(0); } to { transform: translateY(-.8px); } }
.pg-tropa { animation: caminhar 34s ease-in-out infinite alternate; }
@keyframes caminhar { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.dia-cena .cn-cena use { animation: trote-solto 1.1s ease-in-out infinite alternate; }
.dia-cena .cn-cena use:nth-child(2n) { animation-delay: -.5s; }

/* ---------- o viajante percorre a estrada das seis paradas ---------- */
.viajante { animation: viagem 48s linear infinite; }
.viajante use { animation: trote-solto .9s ease-in-out infinite alternate; }
@keyframes viagem { 0% { left: -4%; opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.paradas a:hover svg use { animation: trote-solto .45s ease-in-out infinite alternate; }

/* ---------- fotografias que respiram ---------- */
.cliche .papel img { animation: respirar 18s ease-in-out infinite alternate; transform-origin: 50% 40%; will-change: transform; }
.cliche:nth-child(2n) .papel img { animation-duration: 21s; animation-delay: -7s; transform-origin: 40% 60%; }
.cliche:nth-child(3n) .papel img { animation-duration: 24s; animation-delay: -12s; transform-origin: 60% 45%; }
.cliche.gravura .papel img { animation-duration: 30s; }
@keyframes respirar { from { transform: scale(1.01); } to { transform: scale(1.07) translate(-1.2%, -.8%); } }

/* ---------- o selo: a tinta pulsa e ele assenta no papel ---------- */
.selo-vivo .carimbo { animation: carimbo 9s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes carimbo { from { opacity: .78; transform: rotate(-4deg) scale(.99); } to { opacity: .95; transform: rotate(3deg) scale(1.01); } }

/* ---------- o brasão: brilho que passa e pó dourado ---------- */
.brasao::after, .barra-brasao::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(255 236 190 / .75) 48%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  -webkit-mask: url("assets/logo/brasao-metal.png") center / contain no-repeat; mask: url("assets/logo/brasao-metal.png") center / contain no-repeat;
  mix-blend-mode: screen; animation: brilho 8s ease-in-out infinite; }
.barra-brasao { position: relative; display: block; }
@keyframes brilho { 0%, 72% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.brasao img { animation: flutua 7s ease-in-out infinite alternate; }
@keyframes flutua { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.po { position: absolute; z-index: 2; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
  background: #e9c77a; box-shadow: 0 0 6px 1px rgb(233 199 122 / .7); opacity: 0; animation: subir var(--d, 6s) ease-out infinite; animation-delay: var(--a, 0s); }
@keyframes subir { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x, 10px), -70px) scale(1); } }

/* ---------- a tinta dos links se espalha devagar ---------- */
.continua a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; border-bottom-color: rgb(154 27 22 / .35); transition: background-size .6s ease; }
.continua a:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  body::before, .pg-arvore, .pg-nuvem, .pg-aves, .pg-ave, .pg-sol, .pg-flamula, .pg-cav, .pg-tropa, .dia-cena .cn-cena use,
  .viajante, .viajante use, .paradas a:hover svg use, .cliche .papel img, .selo-vivo .carimbo, .brasao::after, .barra-brasao::after, .brasao img, .po { animation: none !important; }
  .po, .viajante { display: none; }
}