/* ==========================================================================
   CADASTECH • DECORAÇÕES DOS TEMAS SAZONAIS (login)
   As cores ficam em config/ctech_temas.php; aqui ficam só os enfeites.
   Classes no <body>: .tema-outubro_rosa .tema-novembro_azul .tema-natal
                      .tema-ano_novo .tema-padrao
   ========================================================================== */

body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------ PADRÃO (circuito) */
.circuito { width: min(320px, 70%); stroke: rgba(255,255,255,.55); stroke-width: 7; }
.circuito path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: desenha 2.4s var(--ease) forwards; }
.circuito path:nth-of-type(2) { animation-delay: .3s; }
.circuito path:nth-of-type(3) { animation-delay: .6s; }
.circuito circle { fill: none; opacity: 0; animation: acende .6s 1.8s forwards, pulsa 2.6s 2.4s ease-in-out infinite; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes acende { to { opacity: 1; } }
@keyframes pulsa { 0%, 100% { stroke: rgba(255,255,255,.55); } 50% { stroke: var(--tema-secundaria); } }

/* ------------------------------------------------------------ LAÇO (rosa / azul) */
.arte-deco { display: flex; align-items: flex-end; gap: 22px; }
.laco { width: 96px; height: auto; overflow: visible; transform-origin: 50% 20%; animation: balanca 4s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
.laco path { fill: none; stroke: var(--tema-secundaria); stroke-width: 17; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: desenha 2.2s var(--ease) forwards; }
.tema-outubro_rosa .laco path { stroke: #ff8fbb; }
.tema-novembro_azul .laco path { stroke: #7db9ff; }
@keyframes balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.bigode { width: 150px; fill: rgba(255,255,255,.92); filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); transform-origin: 50% 60%; animation: bigode 3.2s ease-in-out infinite; }
@keyframes bigode { 0%, 100% { transform: rotate(0) scaleX(1); } 20% { transform: rotate(-5deg) scaleX(1.04); } 40% { transform: rotate(5deg) scaleX(.98); } 60% { transform: rotate(0) scaleX(1.03); } }

.tema-outubro_rosa .card::after, .tema-novembro_azul .card::after {
  position: absolute; top: -16px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18);
  animation: balanca 3s ease-in-out infinite;
}
.tema-outubro_rosa .card::after { content: "🎗️"; }
.tema-novembro_azul .card::after { content: "💙"; }

/* ------------------------------------------------------------ NATAL */
.luzes {
  position: fixed; top: -6px; left: 0; right: 0; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; padding: 0 1vw;
  height: 46px;
  background: radial-gradient(120% 60px at 50% -30px, transparent 70%, rgba(20, 40, 20, .7) 71%, transparent 73%) repeat-x;
  background-size: calc(100% / 14) 46px;
}
.luzes span { position: relative; top: 26px; width: 11px; height: 17px; border-radius: 50% 50% 45% 45%; background: #f2c14e; animation: pisca 1.4s ease-in-out infinite; }
.luzes span::before { content: ""; position: absolute; top: -5px; left: 2px; width: 7px; height: 6px; border-radius: 2px; background: #2c3b2c; }
.luzes span:nth-child(4n+1) { background: #ff4b4b; --brilho: #ff4b4b; animation-delay: .2s; }
.luzes span:nth-child(4n+2) { background: #3ee07a; --brilho: #3ee07a; animation-delay: .6s; }
.luzes span:nth-child(4n+3) { background: #4fb4ff; --brilho: #4fb4ff; animation-delay: 1s; }
.luzes span:nth-child(4n)   { background: #ffd54a; --brilho: #ffd54a; animation-delay: .4s; }
.luzes span:nth-child(odd) { top: 30px; }
@keyframes pisca { 0%, 100% { opacity: 1; box-shadow: 0 0 14px 3px var(--brilho, #ffd54a); } 50% { opacity: .35; box-shadow: none; } }

.enfeites { position: relative; height: 150px; width: 260px; }
.enfeites span { position: absolute; top: 0; width: 2px; background: rgba(255,255,255,.55); transform-origin: top center; animation: pendulo 3.6s ease-in-out infinite; }
.enfeites span::after { content: ""; position: absolute; left: 50%; bottom: -44px; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 6%, transparent 7%), radial-gradient(circle at 50% 50%, var(--c1), var(--c2)); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.enfeites span::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 9px; margin-left: -6px; border-radius: 2px; background: #e8c45a; z-index: 1; }
.enfeites .e1 { left: 30px; height: 60px; --c1: #ff6b6b; --c2: #a3121c; }
.enfeites .e2 { left: 120px; height: 92px; --c1: #ffe58a; --c2: #b8860b; animation-delay: -1.2s; }
.enfeites .e3 { left: 210px; height: 48px; --c1: #6be08f; --c2: #0d6b33; animation-delay: -2.1s; }
@keyframes pendulo { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }

.tema-natal .card { overflow: visible; }
.tema-natal .card::after { /* neve acumulada em cima do card */
  content: ""; position: absolute; left: 10px; right: 10px; top: -12px; height: 22px; pointer-events: none;
  background:
    radial-gradient(14px 12px at 12px 14px, #fff 98%, transparent) 0 0 / 40px 22px repeat-x,
    radial-gradient(18px 14px at 30px 16px, #fff 98%, transparent) 0 0 / 52px 22px repeat-x,
    linear-gradient(#fff, #fff) 0 14px / 100% 8px no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

/* ------------------------------------------------------------ ANO NOVO */
.ano-grande {
  font-family: var(--display); font-weight: 700; font-size: clamp(64px, 10vw, 128px); line-height: 1; letter-spacing: -2px;
  background: linear-gradient(100deg, #b8860b 0%, #ffe9a8 25%, #f5c451 45%, #fff6d6 50%, #f5c451 55%, #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho 4s linear infinite;
  filter: drop-shadow(0 8px 24px rgba(245, 196, 81, .35));
}
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.contagem { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.contagem div { min-width: 74px; padding: 10px 8px; border-radius: 14px; text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(245, 196, 81, .35); backdrop-filter: blur(6px); }
.contagem b { display: block; font-size: 30px; font-weight: 800; color: #ffe9a8; font-variant-numeric: tabular-nums; line-height: 1.1; }
.contagem small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }
.contagem.chegou div { display: none; }
.contagem.chegou::before { content: "🎆 Feliz Ano Novo! 🎆"; font-size: 22px; font-weight: 800; color: #ffe9a8; }

.tema-ano_novo .card { box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(245, 196, 81, .45), 0 0 40px rgba(245, 196, 81, .18); }
.tema-ano_novo .btn-entrar { color: #2b1d00; }

@media (max-width: 920px) {
  .arte-deco { display: none; }
  .luzes { height: 36px; } .luzes span { top: 18px; } .luzes span:nth-child(odd) { top: 22px; }
  .luzes span:nth-child(n+15) { display: none; }
  .contagem div { min-width: 62px; } .contagem b { font-size: 24px; }
}