/* VeroServ — camada de THEMING SAZONAL (festividades do Brasil) v2.
 * Recolore só a "moldura" festiva (faixa + guirlanda + decorações); os CTAs
 * mantêm a cor de marca (contraste/conversão preservados). Tudo gated por
 * [data-intensity] e [data-motion]/prefers-reduced-motion. */

:root { --rib-from:#0d47a1; --rib-to:#43a047; --rib-text:#fff; --skin-accent:#0d47a1; }

/* ===== Paletas por tema (cores fiéis a cada festa) ===== */
[data-skin="ano_novo"]      { --rib-from:#0b1530; --rib-to:#caa53d; --rib-text:#fff; --skin-accent:#caa53d; }
[data-skin="carnaval"]      { --rib-from:#ff1493; --rib-to:#8e44ad; --rib-mid:#ffd700; --rib-text:#fff; --skin-accent:#8e44ad; }
[data-skin="pascoa"]        { --rib-from:#b39ddb; --rib-to:#ffe082; --rib-text:#4a3b00; --skin-accent:#9575cd; }
[data-skin="corpus"]        { --rib-from:#5e35b1; --rib-to:#b39ddb; --rib-text:#fff; --skin-accent:#5e35b1; }
[data-skin="futebol"]       { --rib-from:#009c3b; --rib-to:#ffcc00; --rib-mid:#0d47a1; --rib-text:#fff; --skin-accent:#009c3b; }
[data-skin="sao_joao"]      { --rib-from:#c62828; --rib-to:#f9a825; --rib-mid:#1e88e5; --rib-text:#fff; --skin-accent:#c62828; }
[data-skin="namorados"]     { --rib-from:#e0115f; --rib-to:#ff69b4; --rib-text:#fff; --skin-accent:#e0115f; }
[data-skin="maes"]          { --rib-from:#ec407a; --rib-to:#f8bbd0; --rib-text:#5a0026; --skin-accent:#ec407a; }
[data-skin="pais"]          { --rib-from:#1f3a5f; --rib-to:#42a5f5; --rib-text:#fff; --skin-accent:#1f3a5f; }
[data-skin="criancas"]      { --rib-from:#ff7043; --rib-to:#29b6f6; --rib-mid:#ffca28; --rib-text:#fff; --skin-accent:#ff7043; }
[data-skin="natal"]         { --rib-from:#c8102e; --rib-to:#1e5631; --rib-mid:#d4af37; --rib-text:#fff; --skin-accent:#1e5631; }
[data-skin="independencia"] { --rib-from:#009c3b; --rib-to:#002776; --rib-mid:#ffdf00; --rib-text:#fff; --skin-accent:#009c3b; }

/* ===== Faixa festiva (topo) ===== */
.vs-ribbon {
  display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  background:linear-gradient(90deg, var(--rib-from), var(--rib-mid, var(--rib-to)), var(--rib-to));
  background-size:200% 100%; color:var(--rib-text); font-size:.82rem; font-weight:600;
  padding:.4rem 2.4rem .4rem 1rem; position:relative; text-align:center; line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .vs-ribbon { animation: vs-shimmer 9s ease infinite; }
}
@keyframes vs-shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.vs-ribbon a { text-decoration:underline; color:inherit; font-weight:700; }
.vs-ribbon .vs-ribbon-close {
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.25); color:var(--rib-text); border:0; cursor:pointer;
  width:1.3rem; height:1.3rem; border-radius:999px; line-height:1; font-size:.8rem;
}
.vs-ribbon .vs-ribbon-close:hover { background:rgba(255,255,255,.45); }

/* ===== Guirlanda do topo (em fluxo, abaixo da faixa) ===== */
.vs-garland { width:100%; display:none; pointer-events:none; line-height:0; }
[data-intensity="low"] .vs-garland,
[data-intensity="medium"] .vs-garland,
[data-intensity="high"] .vs-garland { display:flex; }

/* bandeirinhas (festa junina) */
.vs-garland--junina { height:22px; }
.vs-garland--junina i { flex:1 1 auto; height:20px; display:block; clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.vs-garland--junina i:nth-child(5n+1){background:#e53935} .vs-garland--junina i:nth-child(5n+2){background:#fdd835}
.vs-garland--junina i:nth-child(5n+3){background:#1e88e5} .vs-garland--junina i:nth-child(5n+4){background:#43a047}
.vs-garland--junina i:nth-child(5n+5){background:#fb8c00}

/* bandeirinhas verde-amarelo-azul (Brasil / futebol / pátria) */
.vs-garland--flags { height:22px; }
.vs-garland--flags i { flex:1 1 auto; height:20px; display:block; clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.vs-garland--flags i:nth-child(3n+1){background:#009c3b} .vs-garland--flags i:nth-child(3n+2){background:#ffdf00}
.vs-garland--flags i:nth-child(3n+3){background:#002776}

/* luzes de natal */
.vs-garland--lights { height:18px; gap:14px; justify-content:center; padding:0 8px; }
.vs-garland--lights i { width:9px; height:9px; border-radius:999px; display:block; align-self:flex-start; }
.vs-garland--lights i:nth-child(4n+1){background:#e53935; box-shadow:0 0 7px #e53935}
.vs-garland--lights i:nth-child(4n+2){background:#ffd54f; box-shadow:0 0 7px #ffd54f}
.vs-garland--lights i:nth-child(4n+3){background:#43a047; box-shadow:0 0 7px #43a047}
.vs-garland--lights i:nth-child(4n+4){background:#42a5f5; box-shadow:0 0 7px #42a5f5}
@media (prefers-reduced-motion: no-preference) { [data-motion="on"] .vs-garland--lights i { animation:vs-twinkle 1.8s ease-in-out infinite; } [data-motion="on"] .vs-garland--lights i:nth-child(2n){animation-delay:.9s} }

/* serpentinas de carnaval */
.vs-garland--streamers { height:16px; }
.vs-garland--streamers i { flex:1 1 auto; height:14px; display:block; }
.vs-garland--streamers i:nth-child(6n+1){background:#ff1493} .vs-garland--streamers i:nth-child(6n+2){background:#ffd700}
.vs-garland--streamers i:nth-child(6n+3){background:#1abc9c} .vs-garland--streamers i:nth-child(6n+4){background:#8e44ad}
.vs-garland--streamers i:nth-child(6n+5){background:#ff7f11} .vs-garland--streamers i:nth-child(6n+6){background:#2ecc71}

/* ===== Partículas ===== */
.vs-deco { position:fixed; inset:0; pointer-events:none; z-index:35; overflow:hidden; }
[data-intensity="off"] .vs-deco { display:none; }
.vs-deco .vs-particle { display:none; position:absolute; top:-8%; font-size:1.3rem; opacity:.92; will-change:transform; }
[data-intensity="medium"] .vs-deco .vs-particle,
[data-intensity="high"]   .vs-deco .vs-particle { display:block; }
[data-intensity="high"] .vs-particle { font-size:1.6rem; }

/* Partículas: UMA passada só (saudação breve), depois somem (fill-mode forwards). */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .vs-fall { animation:vs-fall linear 1 forwards; }
  [data-motion="on"] .vs-rise { animation:vs-rise linear 1 forwards; }
  [data-motion="on"] .vs-twk  { animation:vs-twinkle 2.2s ease-in-out 2 forwards; }
}
@keyframes vs-fall { 0%{transform:translateY(-12vh) rotate(0)} 100%{transform:translateY(112vh) rotate(360deg)} }
@keyframes vs-rise { 0%{transform:translateY(112vh) scale(.8); opacity:0} 12%{opacity:.95} 100%{transform:translateY(-14vh) scale(1.12); opacity:0} }
@keyframes vs-twinkle { 0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:1; transform:scale(1.12)} }

@media (max-width:640px) { .vs-deco .vs-particle:nth-child(n+11){display:none} }
