/* ============================================================================
   MOTION — camada livre (Fase 2). Só anima elementos existentes.
   Estados iniciais só aplicam com .motion-on (JS + sem reduced-motion),
   preservando o baseline estático e a degradação acessível.
   ========================================================================== */

/* Grão de superfície (identidade de textura, não de conteúdo) */
.grain::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.06; mix-blend-mode:overlay;
}

/* CAPA — a máquina de máscara por sílaba */
.capa .capa-title{ position:relative; }
.capa .eri{ display:block; will-change:transform,opacity,filter; }
.motion-on .capa .eri{ } /* estados definidos via GSAP para evitar FOUC */

/* clip de sílaba (var A) */
.capa .eri .eri-inner{ display:inline-block; }

/* Ken Burns (var C) — desligado por padrão, ligado por classe */
.capa .capa-bg .ph img.main{ transform-origin:60% 40%; }

@media (prefers-reduced-motion: reduce){
  .capa .eri, .capa .chamadas > *, .capa .capa-sub, .capa .temas-bar { opacity:1 !important; transform:none !important; filter:none !important; }
  .capa .capa-bg .ph img.main{ animation:none !important; }
}

/* INVERNO — anoitecer dirigido pelo scroll */
.inverno-grain::after{ opacity: var(--grao, 0); }              /* grão sobe com o scroll */
.inverno-vinheta{ position: relative; }
.inverno-vinheta::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(9,14,18,0.9) 100%);
  opacity: var(--vig, 0); }
.night-overlay{ position: fixed; inset:0; z-index:40; pointer-events:none; background:#0c1319; opacity:0; }
#inverno .luz{ color: var(--coral); will-change: color, text-shadow; }
#inverno .wrap{ position: relative; z-index: 2; }  /* conteúdo acima da vinheta */