/* ═══════════════════════════════════════════════════════════════════════
   TEMAS DA ÉPOCA: Carnaval, Páscoa, Dia das Mães, Festa Junina, aniversário da
   Techplam, Dia dos Pais, Halloween, Natal, Réveillon e o aniversário de cada pessoa
   (26/10/2026)

   Quem liga e desliga é pages/temas-epoca.js (calendário, preferência em Meu Perfil
   e os desenhos em SVG). Aqui mora só o visual. Regras da casa que valem aqui:
   - o tema VESTE o painel: céu da barra de cima, enfeite pendurado embaixo dela,
     o visitante que cruza a barra, o login, a saudação do dia e o fundo da página
     (atrás dos cartões). Nenhuma tela de trabalho e nenhum botão mudam de cor;
   - só transform e opacity animam. html.tep-pausa (aba escondida ou um minuto sem
     mexer) congela tudo, e prefers-reduced-motion tira o movimento e deixa o tema;
   - os dois temas do painel (claro e escuro) estão cobertos em cada peça;
   - toda peça é pointer-events:none: enfeite nunca rouba clique.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Paleta de cada época ─────────────────────────────────────────── */
html.tep-halloween {
  --tep-1:#F97316; --tep-2:#FBBF24; --tep-3:#A855F7; --tep-claro:#FED7AA;
  --tep-txt:#C2410C; --tep-txt-escuro:#FDBA74; --tep-brilho:rgba(249,115,22,.42);
  --tep-noite:linear-gradient(150deg, #1a0b2c 0%, #2b1142 60%, #3b1450 100%);
}
html.tep-natal {
  --tep-1:#F5C451; --tep-2:#F0525A; --tep-3:#3CC58A; --tep-claro:#FDE9B0;
  --tep-txt:#A16207; --tep-txt-escuro:#FCD980; --tep-brilho:rgba(245,196,81,.38);
  --tep-noite:linear-gradient(150deg, #051430 0%, #0a2753 60%, #12407f 100%);
}
html.tep-pascoa {
  --tep-1:#C4B5FD; --tep-2:#F9A8D4; --tep-3:#6EE7B7; --tep-claro:#EDE9FE;
  --tep-txt:#6D28D9; --tep-txt-escuro:#C4B5FD; --tep-brilho:rgba(196,181,253,.45);
  --tep-noite:linear-gradient(150deg, #2a2670 0%, #4a3a96 60%, #7a4fae 100%);
}
html.tep-carnaval {
  --tep-1:#EC4899; --tep-2:#FACC15; --tep-3:#22D3EE; --tep-claro:#FBCFE8;
  --tep-txt:#BE185D; --tep-txt-escuro:#F9A8D4; --tep-brilho:rgba(236,72,153,.42);
  --tep-noite:linear-gradient(150deg, #2a0838 0%, #4c0d5e 60%, #6d1470 100%);
}
html.tep-junina {
  --tep-1:#F59E0B; --tep-2:#EF4444; --tep-3:#3B82F6; --tep-claro:#FDE68A;
  --tep-txt:#B45309; --tep-txt-escuro:#FCD34D; --tep-brilho:rgba(245,158,11,.42);
  --tep-noite:linear-gradient(150deg, #0c1430 0%, #1b1f4a 60%, #3b2448 100%);
}
html.tep-maes {
  --tep-1:#F472B6; --tep-2:#FB7185; --tep-3:#86EFAC; --tep-claro:#FCE7F3;
  --tep-txt:#BE185D; --tep-txt-escuro:#F9A8D4; --tep-brilho:rgba(244,114,182,.42);
  --tep-noite:linear-gradient(150deg, #3a0f2e 0%, #6a1d4c 60%, #9a3466 100%);
}
html.tep-pais {
  --tep-1:#E0A43A; --tep-2:#60A5FA; --tep-3:#34D399; --tep-claro:#FDE7B0;
  --tep-txt:#92400E; --tep-txt-escuro:#FCD34D; --tep-brilho:rgba(224,164,58,.40);
  --tep-noite:linear-gradient(150deg, #0b1830 0%, #13274a 60%, #1c3a66 100%);
}
html.tep-aniversario {
  --tep-1:#F43F5E; --tep-2:#F59E0B; --tep-3:#3B82F6; --tep-claro:#FFE4E6;
  --tep-txt:#BE123C; --tep-txt-escuro:#FDA4AF; --tep-brilho:rgba(244,63,94,.40);
  --tep-noite:linear-gradient(150deg, #2a0b33 0%, #4a1250 60%, #6e1a5a 100%);
}
html.tep-techplam {
  --tep-1:#E8B93E; --tep-2:#3B82F6; --tep-3:#93C5FD; --tep-claro:#FDE9B0;
  --tep-txt:#8A5A0B; --tep-txt-escuro:#F2D78A; --tep-brilho:rgba(232,185,62,.40);
  --tep-noite:linear-gradient(150deg, #04112e 0%, #0b2a5c 60%, #13438f 100%);
  /* as flâmulas lisas: marinho, ouro, azul e ouro claro (no escuro o marinho sobe um tom) */
  --tep-f1:#0B2A5C; --tep-f2:#D9A732; --tep-f3:#1F5FB8; --tep-f4:#F2C94C;
}
html.tep-techplam body.dark { --tep-f1:#2C5AA6; --tep-f3:#4D8BE0; }
html.tep-reveillon {
  --tep-1:#F2C94C; --tep-2:#C4B5FD; --tep-3:#93C5FD; --tep-claro:#FDF2C8;
  --tep-txt:#8A5A0B; --tep-txt-escuro:#F2D78A; --tep-brilho:rgba(242,201,76,.38);
  --tep-noite:linear-gradient(150deg, #03050d 0%, #0a0f2a 60%, #171c4a 100%);
}

.tep-deco, .tep-deco * { pointer-events:none; }
.tep-svg { display:block; width:100%; height:auto; overflow:visible; }

/* ── 1. O céu da barra de cima ───────────────────────────────────────────
   Camada com z-index -1 DENTRO do #navbar (que já é contexto próprio por ser fixo
   com z-index): fica por cima do fundo da barra e por baixo dos itens. Nada de
   isolation nas linhas da barra: a etiqueta dos atalhos ficaria presa (DESIGN.md). */
.tep-ceu { position:absolute; inset:0; z-index:-1; overflow:hidden; contain:strict; }
html.tep-halloween .tep-ceu {
  background:
    radial-gradient(42% 150% at 100% 125%, rgba(168,85,247,.34), transparent 70%),
    radial-gradient(30% 120% at 0% 120%, rgba(249,115,22,.16), transparent 72%),
    linear-gradient(100deg, #160a25 0%, #26103a 46%, #1b0f34 100%);
}
html.tep-natal .tep-ceu {
  background:
    radial-gradient(40% 150% at 100% -10%, rgba(147,197,253,.20), transparent 70%),
    linear-gradient(100deg, #051430 0%, #0a2753 52%, #0d3a7a 100%);
}
/* a Páscoa é o céu mais claro dos três (aurora lilás e pêssego), para não se confundir
   com o roxo-noite do Halloween; o lado mais claro, à direita, ainda dá mais de 5:1
   com o texto branco */
html.tep-pascoa .tep-ceu {
  background:
    radial-gradient(34% 160% at 100% 125%, rgba(253,186,116,.40), transparent 70%),
    radial-gradient(30% 130% at 46% -35%, rgba(244,114,182,.22), transparent 72%),
    radial-gradient(26% 120% at 0% 0%, rgba(110,231,183,.16), transparent 72%),
    linear-gradient(100deg, #262468 0%, #3d3390 48%, #5f44a0 100%);
}
/* Carnaval: noite de baile, com refletor magenta de um lado e turquesa do outro */
html.tep-carnaval .tep-ceu {
  background:
    radial-gradient(38% 160% at 100% 120%, rgba(236,72,153,.42), transparent 70%),
    radial-gradient(30% 140% at 0% -20%, rgba(34,211,238,.24), transparent 72%),
    radial-gradient(24% 120% at 52% 130%, rgba(250,204,21,.16), transparent 72%),
    linear-gradient(100deg, #1f0830 0%, #3a0c4f 50%, #520f5e 100%);
}
/* Festa Junina: noite de São João, com o clarão da fogueira vindo de baixo */
html.tep-junina .tep-ceu {
  background:
    radial-gradient(36% 160% at 0% 125%, rgba(245,158,11,.40), transparent 70%),
    radial-gradient(30% 140% at 100% 130%, rgba(239,68,68,.18), transparent 72%),
    linear-gradient(100deg, #0b1330 0%, #15204a 55%, #1d2552 100%);
}
/* Dia das Mães: entardecer rosado */
html.tep-maes .tep-ceu {
  background:
    radial-gradient(36% 160% at 100% 125%, rgba(251,113,133,.36), transparent 70%),
    radial-gradient(30% 130% at 40% -30%, rgba(244,114,182,.24), transparent 72%),
    radial-gradient(24% 120% at 0% 0%, rgba(253,230,138,.14), transparent 72%),
    linear-gradient(100deg, #2e0c2b 0%, #4f1642 50%, #6d1f52 100%);
}
/* Dia dos Pais: fim de tarde azul-marinho, com luz dourada */
html.tep-pais .tep-ceu {
  background:
    radial-gradient(36% 160% at 100% 125%, rgba(224,164,58,.34), transparent 70%),
    radial-gradient(30% 130% at 0% -20%, rgba(96,165,250,.20), transparent 72%),
    linear-gradient(100deg, #0a1730 0%, #112547 52%, #17345f 100%);
}
/* Aniversário: noite de festa, com luz coral de um lado, âmbar do outro e azul embaixo */
html.tep-aniversario .tep-ceu {
  background:
    radial-gradient(36% 160% at 100% 125%, rgba(251,113,133,.40), transparent 70%),
    radial-gradient(30% 140% at 0% -20%, rgba(245,158,11,.22), transparent 72%),
    radial-gradient(26% 120% at 48% 135%, rgba(59,130,246,.20), transparent 72%),
    linear-gradient(100deg, #1c0b30 0%, #3a0f48 50%, #5a1450 100%);
}
/* Techplam: o azul da marca, com luz dourada */
html.tep-techplam .tep-ceu {
  background:
    radial-gradient(38% 160% at 100% 125%, rgba(232,185,62,.36), transparent 70%),
    radial-gradient(30% 130% at 0% -20%, rgba(147,197,253,.24), transparent 72%),
    linear-gradient(100deg, #061638 0%, #0c3170 52%, #12449a 100%);
}
/* Réveillon: meia-noite, quase preto, com um clarão dourado no alto */
html.tep-reveillon .tep-ceu {
  background:
    radial-gradient(40% 150% at 100% -10%, rgba(242,201,76,.18), transparent 70%),
    radial-gradient(30% 140% at 8% 130%, rgba(167,139,250,.20), transparent 72%),
    linear-gradient(100deg, #03050e 0%, #0a0f2b 55%, #141a42 100%);
}
/* no escuro o céu desce um tom, como o resto da barra */
html.tep body.dark .tep-ceu::after { content:''; position:absolute; inset:0; background:rgba(2,6,20,.28); }

/* a luz que respira: lua no Halloween, dourado atrás do logo no Natal, aurora na Páscoa */
.tep-ceu-luz { position:absolute; border-radius:50%; animation:tepRespira 6.5s ease-in-out infinite; }
html.tep-halloween .tep-ceu-luz { left:clamp(170px, 27%, 470px); top:-60px; width:220px; height:200px;
  background:radial-gradient(closest-side, rgba(251,146,60,.36), rgba(251,146,60,0)); }
html.tep-natal .tep-ceu-luz { left:-60px; top:-70px; width:330px; height:220px;
  background:radial-gradient(closest-side, rgba(245,196,81,.30), rgba(245,196,81,0)); }
html.tep-pascoa .tep-ceu-luz { right:-80px; bottom:-120px; width:520px; height:240px;
  background:radial-gradient(closest-side, rgba(253,186,116,.40), rgba(253,186,116,0)); }
html.tep-carnaval .tep-ceu-luz { right:-60px; bottom:-120px; width:480px; height:230px;
  background:radial-gradient(closest-side, rgba(236,72,153,.38), rgba(236,72,153,0)); }
html.tep-junina .tep-ceu-luz { left:-80px; bottom:-130px; width:520px; height:240px;
  background:radial-gradient(closest-side, rgba(245,158,11,.42), rgba(245,158,11,0)); }
html.tep-maes .tep-ceu-luz { right:-80px; bottom:-120px; width:520px; height:240px;
  background:radial-gradient(closest-side, rgba(251,113,133,.38), rgba(251,113,133,0)); }
html.tep-pais .tep-ceu-luz { right:-60px; bottom:-120px; width:500px; height:230px;
  background:radial-gradient(closest-side, rgba(224,164,58,.36), rgba(224,164,58,0)); }
html.tep-aniversario .tep-ceu-luz { right:-80px; bottom:-120px; width:520px; height:240px;
  background:radial-gradient(closest-side, rgba(251,113,133,.38), rgba(251,113,133,0)); }
html.tep-techplam .tep-ceu-luz { left:-60px; top:-70px; width:340px; height:220px;
  background:radial-gradient(closest-side, rgba(242,201,76,.32), rgba(242,201,76,0)); }
html.tep-reveillon .tep-ceu-luz { right:-60px; top:-90px; width:480px; height:220px;
  background:radial-gradient(closest-side, rgba(242,201,76,.26), rgba(242,201,76,0)); }
@keyframes tepRespira { 0%,100% { opacity:.65; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }

/* Halloween: a lua cheia na faixa vazia entre o logo e o relógio */
.tep-ceu-lua { position:absolute; left:calc(clamp(170px, 27%, 470px) + 95px); top:7px; width:30px; height:30px; border-radius:50%;
  box-shadow:0 0 14px 3px rgba(251,191,36,.38), 0 0 40px 10px rgba(249,115,22,.20); }
.tep-nevoa { position:absolute; left:0; bottom:-14px; width:75%; height:46px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(196,181,253,.16), rgba(196,181,253,0)); animation:tepNevoa 38s ease-in-out infinite alternate; }
@keyframes tepNevoa { from { transform:translate3d(-14%,0,0); } to { transform:translate3d(30%,0,0); } }

/* Natal: brilho de quatro pontas na linha de cima. Recortado em estrela (clip-path) e
   sem girar: a primeira versão era uma cruz de traços que, girada 45 graus, virava um
   "x" e parecia botão de fechar. */
.tep-estrela { position:absolute; width:11px; height:11px; margin:-5.5px;
  background:radial-gradient(circle, #FFFFFF 0 20%, rgba(255,244,214,.9) 55%, rgba(255,244,214,.45) 100%);
  clip-path:polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); }
/* Carnaval: a mesma cintilância, em purpurina colorida */
.tep-purpurina { position:absolute; width:9px; height:9px; margin:-4.5px;
  background:radial-gradient(circle, #FFFFFF 0 18%, color-mix(in srgb, var(--c) 78%, #fff) 45%, color-mix(in srgb, var(--c) 40%, transparent) 100%);
  clip-path:polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); }
/* as estrelas piscam em DOIS grupos alternados: só o grupo anima (ver ladrilho() no JS) */
.tep-estrelas { position:absolute; inset:0; animation:tepCintila 3.4s ease-in-out infinite; }
.tep-eg-b { animation-duration:4.3s; animation-delay:-2.1s; }
@keyframes tepCintila { 0%,100% { opacity:.18; } 50% { opacity:1; } }
/* Techplam e Réveillon: as faíscas são douradas */
html.tep-techplam .tep-estrela, html.tep-reveillon .tep-estrela {
  background:radial-gradient(circle, #FFFFFF 0 20%, rgba(253,230,138,.95) 55%, rgba(232,185,62,.5) 100%); }

/* Techplam: o reflexo que corre pela barra de vez em quando, como num cartão metalizado.
   Atravessa em ~2,3 s e descansa o resto do ciclo. */
.tep-ceu-reflexo { position:absolute; top:-40%; bottom:-40%; left:0; width:130px; opacity:0;
  background:linear-gradient(100deg, rgba(255,244,194,0) 0%, rgba(255,244,194,.16) 42%, rgba(255,255,255,.30) 50%, rgba(255,244,194,.16) 58%, rgba(255,244,194,0) 100%);
  transform:translate3d(-170px,0,0) skewX(-18deg); animation:tepReflexo 9s cubic-bezier(.45,.05,.35,1) 2s infinite; }
@keyframes tepReflexo { 0% { opacity:0; transform:translate3d(-170px,0,0) skewX(-18deg); } 4% { opacity:1; }
  26% { opacity:1; transform:translate3d(calc(100vw + 40px),0,0) skewX(-18deg); }
  27%,100% { opacity:0; transform:translate3d(calc(100vw + 40px),0,0) skewX(-18deg); } }

/* Réveillon: fogos de artifício. O desenho (raios e pontas) abre e apaga numa animação só; com
   rastro (.sobe), um risco sobe antes de abrir, no mesmo compasso (mesmo --d e --a). Na barra
   e no login rodam em ciclo; no visitante, uma vez por voo. */
.tep-fogo { position:absolute; width:0; height:0; --h:44px; }
.tep-fogo-b { position:absolute; left:calc(var(--t) * -.5); top:calc(var(--t) * -.5); width:var(--t); height:var(--t); opacity:0; }
.tep-fogo-b::before { content:''; position:absolute; inset:-45%; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 34%, transparent), transparent); }
.tep-fogo-b .tep-svg { position:relative; }
.tep-fogo-r { position:absolute; left:-1px; top:0; width:2px; height:22px; border-radius:2px; opacity:0;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--c) 65%, #fff), rgba(255,255,255,0)); }
.tep-ceu .tep-fogo-b { animation:tepFogoLoop var(--d) var(--a) infinite; }
@keyframes tepRastroLoop { 0% { opacity:0; transform:translate3d(0, var(--h), 0); animation-timing-function:cubic-bezier(.2,.6,.35,1); }
  2% { opacity:1; } 14% { opacity:1; transform:translate3d(0,0,0); } 17%,100% { opacity:0; transform:translate3d(0,0,0); } }
@keyframes tepFogoLoop { 0%,14% { opacity:0; transform:scale(.12); animation-timing-function:cubic-bezier(.1,.8,.3,1); }
  16% { opacity:1; } 26% { opacity:1; transform:scale(1); animation-timing-function:ease-in; }
  44%,100% { opacity:0; transform:translateY(5px) scale(1.08); } }

/* ── 2. Partículas ────────────────────────────────────────────────────────
   Na barra e no fundo da página: CAMADAS em ladrilho (ver ladrilho() no JS). Um
   elemento por camada, com o desenho repetido como fundo, que desliza exatamente um
   ladrilho (--lh) e recomeça sem emenda, balançando de lado no caminho. Medido em
   26/10/2026: cada animação viva é recalculada em todo quadro que o painel desenha por
   conta própria; com partícula solta o tema custava ~490 ms de processador a cada 6 s
   no Dashboard do admin. */
.tep-camada { position:absolute; left:-16px; right:-16px; background-image:var(--img); background-repeat:repeat;
  background-size:var(--lw) var(--lh); --sw:8px;
  animation-duration:var(--d); animation-delay:var(--a); animation-iteration-count:infinite; animation-timing-function:linear; }
.tep-camada.tep-perto { --sw:13px; }
body:not(.dark) .tep-fundo .tep-camada { background-image:var(--img-claro, var(--img)); }
.tep-cai { top:calc(var(--lh) * -1); bottom:0; animation-name:tepCamadaCai; }
.tep-sobe { top:0; bottom:calc(var(--lh) * -1); animation-name:tepCamadaSobe; }
@keyframes tepCamadaCai {
  0%    { transform:translate3d(0, 0, 0); }
  12.5% { transform:translate3d(calc(var(--sw) * .7), calc(var(--lh) * .125), 0); }
  25%   { transform:translate3d(var(--sw), calc(var(--lh) * .25), 0); }
  37.5% { transform:translate3d(calc(var(--sw) * .7), calc(var(--lh) * .375), 0); }
  50%   { transform:translate3d(0, calc(var(--lh) * .5), 0); }
  62.5% { transform:translate3d(calc(var(--sw) * -.7), calc(var(--lh) * .625), 0); }
  75%   { transform:translate3d(calc(var(--sw) * -1), calc(var(--lh) * .75), 0); }
  87.5% { transform:translate3d(calc(var(--sw) * -.7), calc(var(--lh) * .875), 0); }
  100%  { transform:translate3d(0, var(--lh), 0); } }
/* subindo, com a chama oscilando (brasa) ou o bokeh respirando (Páscoa) */
@keyframes tepCamadaSobe {
  0%    { transform:translate3d(0, 0, 0); opacity:.85; }
  12.5% { transform:translate3d(calc(var(--sw) * .7), calc(var(--lh) * -.125), 0); opacity:1; }
  25%   { transform:translate3d(var(--sw), calc(var(--lh) * -.25), 0); opacity:.7; }
  37.5% { transform:translate3d(calc(var(--sw) * .7), calc(var(--lh) * -.375), 0); opacity:.95; }
  50%   { transform:translate3d(0, calc(var(--lh) * -.5), 0); opacity:.8; }
  62.5% { transform:translate3d(calc(var(--sw) * -.7), calc(var(--lh) * -.625), 0); opacity:1; }
  75%   { transform:translate3d(calc(var(--sw) * -1), calc(var(--lh) * -.75), 0); opacity:.72; }
  87.5% { transform:translate3d(calc(var(--sw) * -.7), calc(var(--lh) * -.875), 0); opacity:.95; }
  100%  { transform:translate3d(0, calc(var(--lh) * -1), 0); opacity:.85; } }

/* No login, na saudação: partícula solta (são telas de passagem; cada uma traz
   --x, --s, --d, --a, --v, --o) */
.tep-p { position:absolute; left:var(--x); top:0; width:var(--s); height:var(--s); border-radius:50%;
  animation-duration:var(--d); animation-delay:var(--a); animation-timing-function:linear; animation-iteration-count:infinite; }
.tep-neve { background:radial-gradient(circle at 50% 45%, #fff 0 32%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 72%); }
.tep-brasa { background:radial-gradient(circle, #FFF7D6 0 18%, #FBBF24 38%, rgba(249,115,22,.45) 62%, rgba(249,115,22,0) 74%); }
.tep-brasa.tep-p-b { background:radial-gradient(circle, #FFE4C7 0 18%, #FB923C 40%, rgba(234,88,12,.4) 62%, rgba(234,88,12,0) 74%); }
/* pétalas (Páscoa): caem girando */
.tep-petala { border-radius:72% 0 72% 0; background:linear-gradient(135deg, #FBCFE8, #F472B6); animation-name:tepPetala; }
.tep-petala:nth-of-type(3n+1) { background:linear-gradient(135deg, #EDE9FE, #A78BFA); }
.tep-petala:nth-of-type(3n+2) { background:linear-gradient(135deg, #FEF3C7, #FBBF24); }
.tep-petala:nth-of-type(5n) { background:linear-gradient(135deg, #D1FAE5, #34D399); }
@keyframes tepPetala { 0% { transform:translate3d(0,-24px,0) rotate(0deg); opacity:0; } 8% { opacity:var(--o); } 92% { opacity:var(--o); }
  100% { transform:translate3d(calc(var(--v) * 90px), 104vh, 0) rotate(calc(var(--v) * 420deg + 200deg)); opacity:0; } }
/* pétalas cor-de-rosa (Dia das Mães) */
html.tep-maes .tep-petala { background:linear-gradient(135deg, #FFE4E6, #FB7185); }
html.tep-maes .tep-petala:nth-of-type(3n+1) { background:linear-gradient(135deg, #FCE7F3, #F472B6); }
html.tep-maes .tep-petala:nth-of-type(3n+2) { background:linear-gradient(135deg, #FFF1F2, #FDA4AF); }
html.tep-maes .tep-petala:nth-of-type(5n) { background:linear-gradient(135deg, #FDF2F8, #EC4899); }
/* papel picado (Carnaval): a tirinha cai girando e virando de face */
.tep-confete { width:calc(var(--s) * .5); height:var(--s); border-radius:1.5px; background:#EC4899; animation-name:tepConfete; }
.tep-confete:nth-of-type(6n+1) { background:#FACC15; }
.tep-confete:nth-of-type(6n+2) { background:#22D3EE; }
.tep-confete:nth-of-type(6n+3) { background:#A3E635; }
.tep-confete:nth-of-type(6n+4) { background:#A855F7; }
.tep-confete:nth-of-type(6n+5) { background:#F97316; }
@keyframes tepConfete { 0% { transform:translate3d(0,-24px,0) rotate(0deg) rotateX(0deg); opacity:0; } 8% { opacity:var(--o); } 92% { opacity:var(--o); }
  100% { transform:translate3d(calc(var(--v) * 80px), 104vh, 0) rotate(calc(var(--v) * 300deg + 160deg)) rotateX(900deg); opacity:0; } }
/* pó dourado (Dia dos Pais): sobe devagar, como a brasa */
.tep-ouro { background:radial-gradient(circle, #FFFBEA 0 20%, #FCD34D 42%, rgba(224,164,58,.4) 64%, rgba(224,164,58,0) 76%); }
/* Techplam: o papel picado é azul e ouro */
html.tep-techplam .tep-confete { background:#E8B93E; }
html.tep-techplam .tep-confete:nth-of-type(6n+1) { background:#FDE68A; }
html.tep-techplam .tep-confete:nth-of-type(6n+2) { background:#93C5FD; }
html.tep-techplam .tep-confete:nth-of-type(6n+3) { background:#F2C94C; }
html.tep-techplam .tep-confete:nth-of-type(6n+4) { background:#FFF7D6; }
html.tep-techplam .tep-confete:nth-of-type(6n+5) { background:#3B82F6; }

/* ── 3. O enfeite pendurado embaixo da barra ──────────────────────────────
   Mora dentro do #topbar (a faixa do título, sticky com z-index: contexto próprio) com
   z-index -1: pinta por cima do fundo da faixa e por BAIXO do ícone e do título. Na
   primeira versão ele ficava na barra de cima e os ovos caíam em cima do "Dashboard". */
.tep-pend { position:absolute; left:0; right:0; top:0; height:0; z-index:-1; animation:tepPendEntra .9s cubic-bezier(.22,1,.36,1) .25s both; }
@keyframes tepPendEntra { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.tep-fio, .tep-fita { position:absolute; left:0; top:-1px; overflow:visible; }
/* Natal: cordão de luzes */
.tep-fio { color:#1F4D35; }
body.dark .tep-fio { color:#2C6B4B; }
.tep-lamp { position:absolute; width:6px; height:10px; margin-left:-3px; transform-origin:50% 0; transform:rotate(var(--r)); }
.tep-lamp::before { content:''; position:absolute; left:1.4px; top:0; width:3.2px; height:3.4px; border-radius:1px; background:#24402F; }
.tep-lamp::after { content:''; position:absolute; left:0; top:2.8px; width:6px; height:7.6px;
  border-radius:50% 50% 50% 50% / 42% 42% 58% 58%;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.95) 0 1.1px, var(--c) 2.8px, color-mix(in srgb, var(--c) 68%, #000) 100%); }
/* o brilho: quatro camadas (fases), cada uma com os halos de uma lâmpada a cada quatro;
   só a camada anima. Tempos diferentes para as fases saírem e voltarem de compasso. */
.tep-luzes { position:absolute; left:0; top:0; width:0; height:0; animation:tepPisca 2.8s ease-in-out infinite; }
.tep-fase-1 { animation-duration:3.3s; animation-delay:-.9s; }
.tep-fase-2 { animation-duration:2.4s; animation-delay:-1.7s; }
.tep-fase-3 { animation-duration:3.8s; animation-delay:-2.6s; }
.tep-luzes > i { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 70%, #fff) 0 2.4px, color-mix(in srgb, var(--c) 55%, transparent) 4.4px, transparent 70%); }
@keyframes tepPisca { 0%,100% { opacity:.22; } 42% { opacity:1; } 58% { opacity:.8; } }
/* Páscoa: varal de ovinhos */
.tep-fita { color:#A78BFA; }
body.dark .tep-fita { color:#C4B5FD; }
.tep-ovo-pend { position:absolute; width:12px; margin-left:-6px; transform-origin:50% 0; transform:rotate(var(--g, 0deg)); }
.tep-ovo-pend.balanca { animation:tepOvoBalanca 3.2s ease-in-out infinite; animation-delay:var(--a); }
.tep-ovo-pend::before { content:''; position:absolute; left:50%; top:0; width:1px; height:4px; background:#A78BFA; }
.tep-ovo-pend .tep-ovo { position:absolute; left:0; top:3.6px; width:12px; }
@keyframes tepOvoBalanca { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg); } }
/* Halloween: a aranha no fio, que de vez em quando sobe e volta. O fio começa 46px
   ACIMA da faixa, atrás da barra de cima (que cobre a faixa): a aranha inteira, fio e
   corpo, balança e sobe com UMA animação, girando em volta de um ponto escondido. */
.tep-aranha-fio { position:absolute; top:-46px; width:18px; height:84px; margin-left:-9px; transform-origin:50% 0;
  --tep-aranha:#1A1024; --tep-teia:rgba(26,16,36,.42);
  animation:tepAranhaVida 4.2s ease-in-out infinite; }
body.dark .tep-aranha-fio { --tep-aranha:#D8CCF5; --tep-teia:rgba(226,232,240,.5); }
.tep-aranha-fio > i { position:absolute; left:50%; top:0; width:1px; height:68px; margin-left:-.5px; background:var(--tep-teia); }
.tep-aranha-fio .tep-aranha { position:absolute; left:0; top:61.5px; width:18px; color:var(--tep-aranha); }
.tep-aranha-fio.sobe { animation:tepAranhaSobe 4.2s cubic-bezier(.45,0,.3,1) both; }
@keyframes tepAranhaVida { 0%,100% { transform:translateY(0) rotate(-2.4deg); } 50% { transform:translateY(6.6px) rotate(2.4deg); } }
/* a menor, mais acima e fora de compasso com a outra */
.tep-aranha-mini { height:76px; margin-left:-7px; width:14px; animation-delay:-2.2s; animation-duration:3.6s; }
.tep-aranha-mini > i { height:59px; }
.tep-aranha-mini .tep-aranha { width:14px; top:54.6px; }
/* a teia no canto da direita da faixa (o desenho nasce no canto da esquerda: espelhado) */
.tep-teia-canto { position:absolute; right:0; top:0; width:70px; transform:scaleX(-1); color:rgba(76,29,149,.20); }
body.dark .tep-teia-canto { color:rgba(226,232,240,.18); }
.tep-teia-canto .tep-teia { width:70px; }
@keyframes tepAranhaBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6.6px); } }
/* sobe até quase encostar na barra e desce de novo */
@keyframes tepAranhaSobe { 0%,100% { transform:translateY(0); } 35%,62% { transform:translateY(-14px); } }
/* Carnaval: a fita de duas cores e as serpentinas enroladas (uma a cada quatro balança) */
.tep-serp-pend { position:absolute; width:10px; margin-left:-5px; transform-origin:50% 0; transform:rotate(var(--g, 0deg)); }
.tep-serp-pend.balanca { animation:tepOvoBalanca 3.2s ease-in-out infinite; animation-delay:var(--a); }
.tep-serp-pend .tep-serp { position:absolute; left:0; top:-1px; width:10px; }
/* Festa Junina: bandeirinhas de papel com o corte em V. Duas camadas (festões pares e
   ímpares, cada uma com o seu barbante) balançam no vento fora de compasso: as partes de
   baixo andam mais que as de cima, e a bandeira nunca se solta do barbante. */
.tep-bands { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.tep-barbante { position:absolute; left:0; top:-1px; overflow:visible; color:#C9A878; }
body.dark .tep-barbante { color:#E7D3B5; }
.tep-band { position:absolute; width:9px; height:12px; margin-left:-4.5px; transform-origin:50% 0; transform:rotate(var(--r));
  background:linear-gradient(170deg, rgba(255,255,255,.38), rgba(255,255,255,0) 46%), var(--c);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.tep-vento-0 { animation:tepVento 3.6s ease-in-out infinite; }
.tep-vento-1 { animation:tepVento 4.4s ease-in-out -1.7s infinite; }
@keyframes tepVento { 0%,100% { transform:skewX(-8deg); } 50% { transform:skewX(8deg); } }
/* Dia das Mães: a vinha com folhinhas e uma rosa em cada festão */
.tep-vinha { position:absolute; left:0; top:-1px; overflow:visible; color:#4D7C0F; }
body.dark .tep-vinha { color:#65A30D; }
.tep-flor-pend { position:absolute; width:15px; margin:-7.5px 0 0 -7.5px; transform:rotate(var(--g, 0deg)); }
.tep-flor-pend.balanca { animation:tepFlorBalanca 3.6s ease-in-out infinite; animation-delay:var(--a); }
.tep-flor-pend .tep-rosa { width:15px; }
@keyframes tepFlorBalanca { 0%,100% { transform:rotate(-10deg) scale(1); } 50% { transform:rotate(10deg) scale(1.06); } }
/* Dia dos Pais: varal de gravatinhas */
.tep-fita-pais { color:#B08A55; }
body.dark .tep-fita-pais { color:#D6B98C; }
.tep-grav-pend { position:absolute; width:9px; margin-left:-4.5px; transform-origin:50% 0; transform:rotate(var(--g, 0deg)); }
.tep-grav-pend.balanca { animation:tepOvoBalanca 3.2s ease-in-out infinite; animation-delay:var(--a); }
.tep-grav-pend::before { content:''; position:absolute; left:50%; top:0; width:1px; height:2px; background:#B08A55; }
.tep-grav-pend .tep-gravata { position:absolute; left:0; top:1.6px; width:9px; }
/* no escuro a gravata marinho e a vinho sumiam na faixa: um tom acima (filtro parado) */
body.dark .tep-grav-pend .tep-gravata { filter:brightness(1.5) saturate(1.1); }
/* Aniversário (e Techplam): flâmulas de festa. O recado tem uma letra por flâmula, cada
   palavra no seu festão; as duas camadas (festões pares e ímpares) balançam de leve, fora de
   compasso, sem tirar a leitura. A flâmula é um <i>: a letra precisa sair do itálico. */
.tep-flams { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
.tep-brisa-0 { animation:tepBrisa 4.4s ease-in-out infinite; }
.tep-brisa-1 { animation:tepBrisa 5.2s ease-in-out -2.3s infinite; }
@keyframes tepBrisa { 0%,100% { transform:skewX(-3.5deg); } 50% { transform:skewX(3.5deg); } }
.tep-flam { position:absolute; width:15px; height:19px; margin-left:-7.5px; box-sizing:border-box;
  transform-origin:50% 0; transform:rotate(var(--r));
  background:linear-gradient(100deg, rgba(255,255,255,.34), rgba(255,255,255,0) 40%, rgba(0,0,0,.12)), var(--c);
  clip-path:polygon(0 0, 100% 0, 50% 100%); }
/* a flâmula com letra é maior: o recado é o que se lê de longe */
.tep-flam.com { width:21px; height:27px; margin-left:-10.5px; padding-top:3.2px;
  font-style:normal; font-size:12px; font-weight:800; line-height:1; letter-spacing:0; text-align:center; color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.18); }
/* tela estreita: as flâmulas com letra encolhem para "PARABÉNS" e o nome caberem juntos */
.tep-flam.com.mini { width:16px; height:21px; margin-left:-8px; padding-top:2.6px; font-size:9.5px; }
/* Techplam: o número dos anos pendurado é a peça principal da faixa */
html.tep-techplam .tep-pend-num .tep-foil-i { width:25px; }
html.tep-reveillon .tep-pend-num .tep-foil-i { width:21px; }
/* O número em balão metalizado (os anos da Techplam; o ano novo no Réveillon), pendurado no
   ponto mais baixo do festão do meio. Um algarismo sim, um não balança. */
.tep-pend-num { position:absolute; transform:translateX(-50%); }
.tep-foils { display:flex; gap:1px; }
.tep-foil-i { display:block; position:relative; width:19px; transform-origin:50% 0; transform:rotate(-3deg); }
.tep-foil-i:nth-child(even) { transform:rotate(2deg); animation:tepFoil 3.8s ease-in-out infinite; animation-delay:calc(var(--i) * -.9s); }
@keyframes tepFoil { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
/* Réveillon: guirlanda de contas douradas com estrelas de ouro e de prata */
.tep-contas { position:absolute; left:0; top:-1px; overflow:visible; }
.tep-estr-pend { position:absolute; width:12px; margin-left:-6px; transform-origin:50% 0; transform:rotate(var(--g, 0deg)); }
.tep-estr-pend.balanca { animation:tepOvoBalanca 3.2s ease-in-out infinite; animation-delay:var(--a); }
.tep-estr-pend::before { content:''; position:absolute; left:50%; top:0; width:1px; height:4px; background:#C9962B; }
.tep-estr-pend .tep-estrela5 { position:absolute; left:0; top:2.6px; width:12px; }

/* ── 4. O visitante que cruza a barra (o JS liga .voa de tempos em tempos) ── */
.tep-voo { position:absolute; left:0; right:0; top:0; height:46px; z-index:1; overflow:hidden; }
.tep-voo-i { position:absolute; left:0; top:var(--y, 10px); opacity:0; transform:translate3d(-90px,0,0); }
.tep-voo.voa .tep-voo-i { animation:tepCruza 8.5s linear both; animation-delay:var(--a, 0s); }
@keyframes tepCruza { from { opacity:1; transform:translate3d(-90px,0,0); } to { opacity:1; transform:translate3d(calc(100vw + 60px),0,0); } }
.tep-voo-b { display:block; }
.tep-voo.voa .tep-voo-b { animation:tepOndula 1.3s ease-in-out infinite alternate; }
@keyframes tepOndula { from { transform:translateY(-4px); } to { transform:translateY(5px); } }
/* morcegos */
.tep-morcego { width:calc(28px * var(--t, 1)); fill:#120A1F; stroke:rgba(233,213,255,.30); stroke-width:.7; }
.tep-asa { transform-box:fill-box; }
.tep-asa-e { transform-origin:100% 40%; }
.tep-asa-d { transform-origin:0% 40%; }
.tep-voo.voa .tep-asa-e, .tep-login-bando .tep-asa-e { animation:tepAsaE .24s ease-in-out infinite alternate; }
.tep-voo.voa .tep-asa-d, .tep-login-bando .tep-asa-d { animation:tepAsaD .24s ease-in-out infinite alternate; }
@keyframes tepAsaE { from { transform:rotate(-20deg); } to { transform:rotate(26deg) scaleY(.7); } }
@keyframes tepAsaD { from { transform:rotate(20deg); } to { transform:rotate(-26deg) scaleY(.7); } }
/* Natal: a estrela cadente passa por trás dos itens */
html.tep-natal .tep-voo { z-index:-1; }
.tep-cadente { position:absolute; left:0; top:8px; width:96px; height:1.6px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,240,200,.95)); }
.tep-cadente::after { content:''; position:absolute; right:-2px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px 2px rgba(255,236,170,.85); }
.tep-voo.voa .tep-cadente { animation:tepCadente 1.6s cubic-bezier(.3,.1,.3,1) both; }
@keyframes tepCadente { 0% { opacity:0; transform:translate3d(10vw,-12px,0) rotate(11deg); } 15% { opacity:1; }
  80% { opacity:.9; } 100% { opacity:0; transform:translate3d(58vw,40px,0) rotate(11deg); } }
/* Páscoa: o coelho cruza pulando na faixa do título, por trás do texto (z-index -1
   dentro do #topbar, como o enfeite pendurado) */
html.tep-pascoa .tep-voo { top:0; height:52px; z-index:-1; }
.tep-coelho-x { --y:21px; }
.tep-voo.voa .tep-coelho-x { animation-duration:11s; }
.tep-coelho-pulo { width:30px; }
.tep-voo.voa .tep-coelho-x .tep-voo-b { transform-origin:50% 100%; animation:tepPulo .64s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes tepPulo { 0%,100% { transform:translateY(0) scale(1.06,.93); } 18% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-12px) scale(.97,1.04) rotate(-6deg); } 84% { transform:translateY(0) scale(1); } }
/* Carnaval: a serpentina jogada atravessa a barra ondulando (começa toda fora da tela) */
.tep-serp-x { margin-left:-28px; }
.tep-serp-voo { width:calc(96px * var(--t, 1)); }
.tep-voo.voa .tep-serp-x { animation-duration:7.5s; }
/* Festa Junina: vaga-lumes piscando, por trás dos itens da barra */
html.tep-junina .tep-voo { z-index:-1; }
.tep-vagalume i { display:block; width:calc(10px * var(--t, 1)); height:calc(10px * var(--t, 1)); border-radius:50%;
  background:radial-gradient(circle, #FEFCE8 0 18%, #D9F99D 34%, rgba(163,230,53,.45) 56%, rgba(163,230,53,0) 72%); }
.tep-voo.voa .tep-vagalume { animation-duration:13s; }
/* o vaivém e o pisca numa animação só (duas por vaga-lume, não três) */
.tep-voo.voa .tep-vagalume .tep-voo-b { animation:tepVagalume 1.9s ease-in-out infinite alternate; animation-delay:var(--a); }
@keyframes tepVagalume { 0% { transform:translateY(-5px) scale(.75); opacity:.25; } 45% { transform:translateY(1px) scale(1.1); opacity:1; }
  100% { transform:translateY(6px) scale(.85); opacity:.55; } }
/* Dia das Mães: borboletas; as asas batem a partir do corpo */
.tep-borb-x .tep-borboleta { width:calc(26px * var(--t, 1)); }
.tep-voo.voa .tep-borb-x { animation-duration:11s; }
.tep-asa-b { transform-box:fill-box; }
.tep-asa-be { transform-origin:100% 50%; }
.tep-asa-bd { transform-origin:0% 50%; }
.tep-voo.voa .tep-asa-b { animation:tepBateAsa .32s ease-in-out infinite alternate; }
@keyframes tepBateAsa { from { transform:scaleX(1); } to { transform:scaleX(.28); } }
/* pousada (login e saudação): abre e fecha devagar, sem fechar de todo */
.tep-login-borb .tep-asa-b, .tep-saud-borb .tep-asa-b { animation:tepAbreAsa 1.5s ease-in-out infinite alternate; }
@keyframes tepAbreAsa { from { transform:scaleX(1); } to { transform:scaleX(.6); } }
/* Dia dos Pais: o avião de papel planando */
.tep-aviao { width:calc(48px * var(--t, 1)); }
.tep-voo.voa .tep-aviao-x { animation-duration:9.5s; }
.tep-voo.voa .tep-aviao-x .tep-voo-b { animation:tepPlana 2.6s ease-in-out infinite alternate; }
@keyframes tepPlana { from { transform:translateY(-3px) rotate(-3deg); } to { transform:translateY(4px) rotate(4deg); } }
/* Aniversário: cachos de balões escapando, por trás dos itens da barra (11 s: o voo dura 12) */
html.tep-aniversario .tep-voo { z-index:-1; }
.tep-cacho-x .tep-cacho { width:calc(30px * var(--t, 1)); }
.tep-voo.voa .tep-cacho-x { animation-duration:11s; }
.tep-voo.voa .tep-cacho-x .tep-voo-b { transform-origin:50% 100%; animation:tepBalaoVoo 2.8s ease-in-out infinite alternate; }
@keyframes tepBalaoVoo { from { transform:translateY(-3px) rotate(-5deg); } to { transform:translateY(3px) rotate(4deg); } }
/* Techplam: um cometa dourado com faíscas no rastro, por trás dos itens */
html.tep-techplam .tep-voo { z-index:-1; }
.tep-cometa { position:absolute; left:0; top:15px; width:190px; height:3px; border-radius:3px; opacity:0;
  background:linear-gradient(90deg, rgba(232,185,62,0), rgba(242,201,76,.35) 40%, rgba(253,230,138,.8) 80%, rgba(255,250,230,1)); }
.tep-cometa::after { content:''; position:absolute; right:-6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, #FDE68A 50%, rgba(232,185,62,0) 74%); box-shadow:0 0 18px 7px rgba(242,201,76,.55); }
/* as faíscas do rastro andam junto com o cometa (paradas em relação a ele) */
.tep-cometa > i { position:absolute; left:20px; top:-7px; width:140px; height:16px;
  background:
    radial-gradient(circle at 8% 30%, #FFF4C2 0 1px, transparent 1.6px),
    radial-gradient(circle at 22% 78%, #FDE68A 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 38% 22%, #FFF4C2 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 55% 70%, #FFFFFF 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 28%, #FDE68A 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 86% 64%, #FFFFFF 0 1.4px, transparent 2px); }
.tep-voo.voa .tep-cometa { animation:tepCometa 3.6s cubic-bezier(.4,.05,.3,1) both; }
@keyframes tepCometa { 0% { opacity:0; transform:translate3d(-210px,8px,0) rotate(-1deg); } 10% { opacity:1; } 86% { opacity:1; }
  100% { opacity:0; transform:translate3d(calc(100vw + 10px),-6px,0) rotate(-1deg); } }
/* Réveillon: três fogos sobem e abrem em sequência, por trás dos itens */
html.tep-reveillon .tep-voo { z-index:-1; }
.tep-voo.voa .tep-fogo-b { animation:tepFogoLoop 3.4s var(--a) both; }
.tep-voo.voa .tep-fogo-r { animation:tepRastroLoop 3.4s var(--a) both; }

/* ── 5. A barra entra na época: legenda do logo, brilho, lente e vidro ──── */
html.tep #navbar-logo .sub-painel { transform:translateY(-110%); opacity:0; }
#navbar-logo .sub-epoca { color:var(--tep-claro); font-weight:700; }
#navbar-logo .sub-epoca svg { width:9px; height:9px; flex-shrink:0; color:var(--tep-1); }
@media (hover:hover) and (pointer:fine) {
  html.tep #navbar-logo:hover .sub-epoca { transform:translateY(-110%); opacity:0; }
}
html.tep #navbar-logo:focus-visible .sub-epoca { transform:translateY(-110%); opacity:0; }
html.tep-halloween #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,237,213,.95) 47%, rgba(251,146,60,.9) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-natal #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,250,230,.97) 47%, rgba(245,196,81,.92) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-pascoa #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 33%, rgba(251,207,232,.95) 44%, rgba(237,233,254,.98) 50%, rgba(167,243,208,.9) 56%, rgba(255,255,255,0) 67%); background-size:250% 100%; background-position:100% 0; }
html.tep-halloween #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(251,146,60,.40), rgba(251,146,60,0) 72%); }
html.tep-natal #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(245,196,81,.40), rgba(245,196,81,0) 72%); }
html.tep-pascoa #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(196,181,253,.45), rgba(196,181,253,0) 72%); }
html.tep-halloween #navbar { --vidro-halo:rgba(249,115,22,.34); --vidro-brilho:rgba(254,215,170,.20); }
html.tep-natal #navbar { --vidro-halo:rgba(245,196,81,.32); --vidro-brilho:rgba(253,233,176,.20); }
html.tep-pascoa #navbar { --vidro-halo:rgba(196,181,253,.40); --vidro-brilho:rgba(237,233,254,.22); }
html.tep-halloween #nav-lente { background:linear-gradient(180deg, rgba(251,146,60,.24), rgba(251,146,60,.07)); }
html.tep-natal #nav-lente { background:linear-gradient(180deg, rgba(245,196,81,.24), rgba(245,196,81,.07)); }
html.tep-pascoa #nav-lente { background:linear-gradient(180deg, rgba(196,181,253,.28), rgba(196,181,253,.08)); }
html.tep-carnaval #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 33%, rgba(251,207,232,.95) 44%, rgba(254,240,138,.98) 50%, rgba(165,243,252,.9) 56%, rgba(255,255,255,0) 67%); background-size:250% 100%; background-position:100% 0; }
html.tep-junina #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(254,243,199,.97) 47%, rgba(245,158,11,.92) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-maes #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,241,242,.97) 47%, rgba(244,114,182,.9) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-pais #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(254,249,231,.97) 47%, rgba(224,164,58,.92) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-carnaval #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(236,72,153,.42), rgba(236,72,153,0) 72%); }
html.tep-junina #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(245,158,11,.42), rgba(245,158,11,0) 72%); }
html.tep-maes #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(244,114,182,.42), rgba(244,114,182,0) 72%); }
html.tep-pais #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(224,164,58,.40), rgba(224,164,58,0) 72%); }
html.tep-carnaval #navbar { --vidro-halo:rgba(236,72,153,.36); --vidro-brilho:rgba(251,207,232,.20); }
html.tep-junina #navbar { --vidro-halo:rgba(245,158,11,.34); --vidro-brilho:rgba(253,230,138,.20); }
html.tep-maes #navbar { --vidro-halo:rgba(244,114,182,.36); --vidro-brilho:rgba(252,231,243,.22); }
html.tep-pais #navbar { --vidro-halo:rgba(224,164,58,.32); --vidro-brilho:rgba(253,231,176,.20); }
html.tep-carnaval #nav-lente { background:linear-gradient(180deg, rgba(236,72,153,.26), rgba(236,72,153,.08)); }
html.tep-junina #nav-lente { background:linear-gradient(180deg, rgba(245,158,11,.24), rgba(245,158,11,.07)); }
html.tep-maes #nav-lente { background:linear-gradient(180deg, rgba(244,114,182,.26), rgba(244,114,182,.08)); }
html.tep-pais #nav-lente { background:linear-gradient(180deg, rgba(224,164,58,.24), rgba(224,164,58,.07)); }
html.tep-aniversario #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 33%, rgba(254,205,211,.95) 44%, rgba(254,243,199,.98) 50%, rgba(191,219,254,.9) 56%, rgba(255,255,255,0) 67%); background-size:250% 100%; background-position:100% 0; }
html.tep-techplam #navbar-logo .logo-marca::after,
html.tep-reveillon #navbar-logo .logo-marca::after { background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,250,230,.97) 47%, rgba(232,185,62,.92) 53%, rgba(255,255,255,0) 65%); background-size:250% 100%; background-position:100% 0; }
html.tep-aniversario #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(251,113,133,.42), rgba(251,113,133,0) 72%); }
html.tep-techplam #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(242,201,76,.42), rgba(242,201,76,0) 72%); }
html.tep-reveillon #navbar-logo::before { background:radial-gradient(55% 75% at 22% 45%, rgba(242,201,76,.36), rgba(242,201,76,0) 72%); }
html.tep-aniversario #navbar { --vidro-halo:rgba(251,113,133,.36); --vidro-brilho:rgba(255,228,230,.22); }
html.tep-techplam #navbar { --vidro-halo:rgba(232,185,62,.34); --vidro-brilho:rgba(253,233,176,.22); }
html.tep-reveillon #navbar { --vidro-halo:rgba(242,201,76,.30); --vidro-brilho:rgba(253,242,200,.20); }
html.tep-aniversario #nav-lente { background:linear-gradient(180deg, rgba(251,113,133,.26), rgba(251,113,133,.08)); }
html.tep-techplam #nav-lente { background:linear-gradient(180deg, rgba(232,185,62,.24), rgba(232,185,62,.07)); }
html.tep-reveillon #nav-lente { background:linear-gradient(180deg, rgba(242,201,76,.22), rgba(242,201,76,.06)); }
/* celular: a gaveta do menu também é céu */
@media (max-width:900px) {
  html.tep-halloween #navbar-bottom { background:linear-gradient(180deg, #1c0c2f, #2b1142); }
  html.tep-natal #navbar-bottom { background:linear-gradient(180deg, #061633, #0d3a7a); }
  html.tep-pascoa #navbar-bottom { background:linear-gradient(180deg, #262468, #4a3a96); }
  html.tep-carnaval #navbar-bottom { background:linear-gradient(180deg, #230a36, #4c0d5e); }
  html.tep-junina #navbar-bottom { background:linear-gradient(180deg, #0c1533, #1d2552); }
  html.tep-maes #navbar-bottom { background:linear-gradient(180deg, #31102d, #6d1f52); }
  html.tep-pais #navbar-bottom { background:linear-gradient(180deg, #0b1932, #17345f); }
  html.tep-aniversario #navbar-bottom { background:linear-gradient(180deg, #1f0c33, #5a1450); }
  html.tep-techplam #navbar-bottom { background:linear-gradient(180deg, #071a40, #12449a); }
  html.tep-reveillon #navbar-bottom { background:linear-gradient(180deg, #04060f, #141a42); }
  /* no celular a faixa de cima não tem vão: a lua ficava atrás do botão Escritório */
  .tep-ceu-lua { display:none; }
  html.tep-halloween .tep-ceu-luz { left:auto; right:60px; }
}

/* ── 6. O fundo da página, atrás dos cartões ─────────────────────────────
   Fixo com z-index -1: fica por cima do fundo do <body> e por baixo de qualquer
   conteúdo, então só aparece nos vãos entre os cartões. Duas camadas em ladrilho
   (seção 2); no claro a neve e a brasa vêm na cor de --img-claro. Some no celular. */
.tep-fundo { position:fixed; inset:0; z-index:-1; overflow:hidden; contain:strict; }
/* as partículas soltas do login usam estes dois */
@keyframes tepCaiFundo { 0% { transform:translate3d(0,0,0); opacity:0; } 8% { opacity:var(--o); } 92% { opacity:var(--o); }
  100% { transform:translate3d(calc(var(--v) * 70px), 104vh, 0); opacity:0; } }
@keyframes tepSobeFundo { 0% { transform:translate3d(0,0,0) scale(1); opacity:0; } 12% { opacity:var(--o); } 50% { opacity:calc(var(--o) * .5); }
  70% { opacity:var(--o); } 100% { transform:translate3d(calc(var(--v) * 60px), -104vh, 0) scale(.5); opacity:0; } }
@media (max-width:700px) { .tep-fundo { display:none; } }

/* ── 7. Login ────────────────────────────────────────────────────────── */
html.tep #login-screen .lp { display:none; }
html.tep-halloween #login-screen { background:#0B0614; }
html.tep-halloween #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 16% 82%, rgba(126,34,206,.42) 0%, transparent 62%),
  radial-gradient(ellipse 55% 45% at 84% 16%, rgba(249,115,22,.26) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 50% 50%, rgba(76,29,149,.30) 0%, transparent 60%); }
html.tep-natal #login-screen { background:#04112A; }
html.tep-natal #login-screen::before { background:
  radial-gradient(ellipse 75% 60% at 80% 12%, rgba(26,79,156,.55) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 14% 86%, rgba(22,101,52,.40) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 88% 84%, rgba(185,28,28,.24) 0%, transparent 55%); }
html.tep-pascoa #login-screen { background:#231B58; }
html.tep-pascoa #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 18% 22%, rgba(167,139,250,.58) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 82% 86%, rgba(253,186,116,.42) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 14% 88%, rgba(244,114,182,.32) 0%, transparent 55%),
  radial-gradient(ellipse 40% 35% at 62% 8%, rgba(110,231,183,.22) 0%, transparent 55%); }
html.tep-carnaval #login-screen { background:#14041F; }
html.tep-carnaval #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 82% 14%, rgba(236,72,153,.44) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 14% 86%, rgba(34,211,238,.26) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 50% 96%, rgba(250,204,21,.18) 0%, transparent 55%),
  radial-gradient(ellipse 40% 35% at 18% 18%, rgba(168,85,247,.30) 0%, transparent 55%); }
html.tep-junina #login-screen { background:#070D22; }
html.tep-junina #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 14% 88%, rgba(245,158,11,.40) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 86% 84%, rgba(239,68,68,.22) 0%, transparent 58%),
  radial-gradient(ellipse 60% 50% at 70% 10%, rgba(59,130,246,.22) 0%, transparent 60%); }
html.tep-maes #login-screen { background:#22081E; }
html.tep-maes #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 18% 20%, rgba(244,114,182,.44) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 84% 84%, rgba(251,146,60,.26) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 82% 14%, rgba(253,230,138,.18) 0%, transparent 55%),
  radial-gradient(ellipse 45% 40% at 12% 88%, rgba(190,24,93,.30) 0%, transparent 55%); }
html.tep-pais #login-screen { background:#061226; }
html.tep-pais #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 84% 16%, rgba(224,164,58,.34) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 14% 84%, rgba(37,99,235,.32) 0%, transparent 58%),
  radial-gradient(ellipse 45% 40% at 50% 50%, rgba(30,58,138,.30) 0%, transparent 60%); }
html.tep-techplam #login-screen { background:#040f29; }
html.tep-techplam #login-screen::before { background:
  radial-gradient(ellipse 70% 55% at 82% 14%, rgba(232,185,62,.30) 0%, transparent 60%),
  radial-gradient(ellipse 60% 50% at 14% 86%, rgba(29,78,216,.42) 0%, transparent 58%),
  radial-gradient(ellipse 50% 45% at 50% 50%, rgba(18,68,154,.36) 0%, transparent 62%); }
html.tep-reveillon #login-screen { background:#02040b; }
html.tep-reveillon #login-screen::before { background:
  radial-gradient(ellipse 70% 50% at 50% -6%, rgba(242,201,76,.24) 0%, transparent 60%),
  radial-gradient(ellipse 55% 45% at 12% 90%, rgba(124,58,237,.26) 0%, transparent 58%),
  radial-gradient(ellipse 50% 45% at 90% 86%, rgba(37,99,235,.22) 0%, transparent 58%); }
html.tep .login-card { box-shadow:0 32px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.12), 0 0 90px -18px var(--tep-brilho); }

.tep-login-ceu { position:absolute; inset:0; overflow:hidden; }
.tep-cartao { position:absolute; left:50%; top:50%; width:400px; height:520px; }
.tep-login-tras { z-index:1; }
.tep-login-frente { z-index:3; }
.tep-login-ceu .tep-neve { top:-10px; animation-name:tepCaiFundo; }
.tep-login-ceu .tep-brasa { top:auto; bottom:-10px; animation-name:tepSobeFundo; }
.tep-login-ceu .tep-petala, .tep-login-ceu .tep-confete { top:-14px; }
.tep-login-ceu .tep-ouro { top:auto; bottom:-10px; animation-name:tepSobeFundo; }
/* Réveillon: a purpurina dourada cai em vez de subir */
.tep-login-ceu .tep-ouro.tep-desce { top:-10px; bottom:auto; animation-name:tepCaiFundo; }
.tep-login-ceu .tep-estrela { width:8px; height:8px; margin:-4px; }
@keyframes tepSurge { from { opacity:0; transform:translateY(14px) scale(.9); } to { opacity:1; transform:none; } }

/* Halloween: lua, bando de morcegos, aranha no fio, teia no canto e as abóboras */
.tep-login-lua { position:absolute; right:8%; top:7%; width:min(21vw, 220px); aspect-ratio:1; border-radius:50%;
  animation:tepLuaEntra 1.6s cubic-bezier(.22,1,.36,1) both; }
/* o halo nasce no centro (por trás do disco), sem vão entre a lua e a luz */
.tep-login-lua::before { content:''; position:absolute; inset:-75%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(253,224,138,.36) 0, rgba(251,146,60,.17) 40%, rgba(249,115,22,.06) 70%, rgba(249,115,22,0) 100%); }
@keyframes tepLuaEntra { from { opacity:0; transform:translateY(30px) scale(.94); } to { opacity:1; transform:none; } }
.tep-login-bando { position:absolute; left:0; right:0; top:14%; height:160px; }
.tep-login-bando .tep-voo-i { animation:tepBando 15s linear infinite; animation-delay:calc(var(--a) + 1.2s); }
.tep-login-bando .tep-voo-b { animation:tepOndula 1.5s ease-in-out infinite alternate; }
/* preto puro some no céu escuro: o bando ganha um fio de luz lilás em volta, e a rota
   passa na frente da lua, onde a silhueta aparece inteira */
.tep-login-bando .tep-morcego { width:calc(46px * var(--t, 1)); fill:#170C27; stroke:rgba(233,213,255,.34); stroke-width:.7; }
@keyframes tepBando { 0% { opacity:1; transform:translate3d(-90px,0,0); } 46% { opacity:1; transform:translate3d(calc(100vw + 60px),-40px,0); }
  100% { opacity:1; transform:translate3d(calc(100vw + 60px),-40px,0); } }
.tep-login-aranha { position:absolute; right:-50px; top:40px; width:32px; color:#120A1C;
  animation:tepDesce 1.8s cubic-bezier(.22,1,.36,1) 1s both, tepAranhaLogin 5s ease-in-out 2.8s infinite; }
.tep-login-aranha > i { position:absolute; left:50%; bottom:calc(100% - 9px); width:1px; height:100vh; margin-left:-.5px;
  background:linear-gradient(to top, rgba(237,233,254,.6), rgba(237,233,254,.08)); }
.tep-login-aranha .tep-aranha { color:#E9D5FF; }
@keyframes tepDesce { from { transform:translateY(-160px); } to { transform:none; } }
@keyframes tepAranhaLogin { 0%,100% { transform:translateY(0); } 50% { transform:translateY(12px); } }
.tep-login-teia { position:absolute; left:0; top:0; width:86px; height:86px; border-top-left-radius:24px; overflow:hidden;
  animation:tepSurge .8s ease .8s both; }
.tep-login-teia .tep-teia { width:86px; }
.tep-login-abobora { position:absolute; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) both; }
.tep-login-abobora::before { content:''; position:absolute; inset:-34%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(249,115,22,.34), rgba(249,115,22,0)); z-index:-1; }
.tep-ab-1 { left:-62px; bottom:-30px; width:96px; animation-delay:.75s; }
.tep-ab-2 { left:18px; bottom:-26px; width:56px; animation-delay:.9s; }
.tep-chama { animation:tepChama 2.6s steps(1, end) infinite; }
@keyframes tepChama { 0% { opacity:1; } 18% { opacity:.86; } 26% { opacity:1; } 47% { opacity:.9; } 55% { opacity:1; } 76% { opacity:.82; } 84% { opacity:1; } }

/* Natal: aura dourada, neve, cordão de luzes sobre o cartão e o ramo de azevinho */
.tep-login-aura { position:absolute; left:50%; top:50%; width:820px; height:820px; margin:-410px 0 0 -410px; border-radius:50%;
  animation:tepRespira 7s ease-in-out infinite; }
html.tep-natal .tep-login-aura { background:radial-gradient(closest-side, rgba(245,196,81,.20), rgba(245,196,81,0)); }
html.tep-pascoa .tep-login-aura { background:radial-gradient(closest-side, rgba(237,233,254,.20), rgba(237,233,254,0)); }
html.tep-carnaval .tep-login-aura { background:radial-gradient(closest-side, rgba(236,72,153,.22), rgba(236,72,153,0)); }
html.tep-maes .tep-login-aura { background:radial-gradient(closest-side, rgba(251,207,232,.22), rgba(251,207,232,0)); }
html.tep-pais .tep-login-aura { background:radial-gradient(closest-side, rgba(224,164,58,.20), rgba(224,164,58,0)); }
html.tep-techplam .tep-login-aura { background:radial-gradient(closest-side, rgba(242,201,76,.20), rgba(242,201,76,0)); }
html.tep-reveillon .tep-login-aura { background:radial-gradient(closest-side, rgba(242,201,76,.14), rgba(242,201,76,0)); }
.tep-cristal { position:absolute; left:var(--x); top:-30px; width:var(--s); color:rgba(255,255,255,.78);
  animation:tepCristal var(--d) linear var(--a) infinite; }
@keyframes tepCristal { 0% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; } 8% { opacity:.85; } 92% { opacity:.85; }
  100% { transform:translate3d(calc(var(--v) * 60px), 106vh, 0) rotate(calc(var(--v) * 240deg + 120deg)); opacity:0; } }
.tep-login-cordao { position:absolute; left:-18px; right:-18px; top:-3px; height:34px; animation:tepPendEntra 1s cubic-bezier(.22,1,.36,1) .7s both; }
.tep-login-cordao .tep-fio { color:#2F5D43; }
.tep-login-cordao .tep-lamp { width:7px; height:11px; margin-left:-3.5px; }
.tep-login-cordao .tep-lamp::after { width:7px; height:8.6px; }
.tep-login-azevinho { position:absolute; left:-30px; top:-24px; width:86px; transform:rotate(-14deg); animation:tepSurgeGira .8s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes tepSurgeGira { from { opacity:0; transform:rotate(-40deg) scale(.6); } to { opacity:1; transform:rotate(-14deg); } }

/* Páscoa: o coelho espia por trás do cartão e os ovos ficam num ninho no canto */
/* Escondido ATÉ começar a subir: o cartão entra com opacidade, e o coelho apareceria
   através dele enquanto ainda está transparente. */
.tep-login-coelho { position:absolute; right:46px; top:-97px; width:120px; animation:tepEspia .8s cubic-bezier(.2,.9,.3,1.25) 1s both; }
@keyframes tepEspia { 0% { opacity:0; transform:translateY(118px); } 1% { opacity:1; transform:translateY(118px); } 100% { opacity:1; transform:none; } }
@keyframes tepEspiaSaud { 0% { opacity:0; transform:translateY(64px); } 1% { opacity:1; transform:translateY(64px); } 100% { opacity:1; transform:none; } }
.tep-orelha { transform-box:fill-box; }
.tep-orelha-e { transform-origin:50% 100%; animation:tepOrelhaE 6s ease-in-out 2.4s infinite; }
.tep-orelha-d { transform-origin:30% 100%; animation:tepOrelhaD 5.2s ease-in-out 2s infinite; }
@keyframes tepOrelhaD { 0%,84%,100% { transform:rotate(0); } 88% { transform:rotate(8deg); } 92% { transform:rotate(-3deg); } 95% { transform:rotate(4deg); } }
@keyframes tepOrelhaE { 0%,88%,100% { transform:rotate(0); } 92% { transform:rotate(-6deg); } 96% { transform:rotate(2deg); } }
.tep-olhos { transform-box:fill-box; transform-origin:50% 50%; animation:tepOlho 4.6s ease-in-out 1.8s infinite; }
@keyframes tepOlho { 0%,93%,100% { transform:scaleY(1); } 95.5% { transform:scaleY(.12); } }
.tep-login-ninho { position:absolute; right:-36px; bottom:-28px; width:124px; height:76px; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) .85s both; }
.tep-ninho-ovo { position:absolute; bottom:12px; width:30px; }
.tep-no-1 { left:14px; transform:rotate(-16deg); }
.tep-no-2 { left:44px; width:36px; bottom:15px; }
.tep-no-3 { left:80px; transform:rotate(14deg); }
.tep-grama { position:absolute; left:0; bottom:0; width:124px; }

/* Carnaval: dois holofotes varrendo o palco, o leque de plumas surgindo atrás do cartão, a
   máscara de Colombina no canto e serpentinas penduradas na borda de cima */
.tep-holofote { position:absolute; bottom:-6vh; width:min(34vw, 420px); height:120vh; transform-origin:50% 100%;
  clip-path:polygon(46% 100%, 54% 100%, 100% 0, 0 0); opacity:.85; }
.tep-hf-e { left:4%; background:linear-gradient(to top, rgba(236,72,153,.34), rgba(236,72,153,0) 78%); animation:tepHolofoteE 9s ease-in-out infinite alternate; }
.tep-hf-d { right:4%; background:linear-gradient(to top, rgba(34,211,238,.30), rgba(34,211,238,0) 78%); animation:tepHolofoteD 11s ease-in-out infinite alternate; }
@keyframes tepHolofoteE { from { transform:rotate(-24deg); } to { transform:rotate(18deg); } }
@keyframes tepHolofoteD { from { transform:rotate(22deg); } to { transform:rotate(-16deg); } }
.tep-login-plumas { position:absolute; right:-36px; top:-96px; width:132px; animation:tepEspia .9s cubic-bezier(.2,.9,.3,1.25) 1s both; }
.tep-login-plumas .tep-plumas { transform-origin:50% 100%; transform:rotate(12deg); animation:tepPlumaBalanca 5s ease-in-out 2s infinite; }
@keyframes tepPlumaBalanca { 0%,100% { transform:rotate(9deg); } 50% { transform:rotate(16deg); } }
.tep-login-mascara { position:absolute; left:-74px; top:-66px; width:160px; transform:rotate(-14deg); animation:tepSurgeGiraM .9s cubic-bezier(.22,1,.36,1) .85s both; }
@keyframes tepSurgeGiraM { from { opacity:0; transform:rotate(-40deg) scale(.6); } to { opacity:1; transform:rotate(-14deg); } }
.tep-login-serp { position:absolute; right:30px; top:-4px; width:76px; height:48px; animation:tepPendEntra 1s cubic-bezier(.22,1,.36,1) .9s both; }
.tep-ls { position:absolute; top:0; width:14px; transform-origin:50% 0; }
.tep-ls-0 { left:0; transform:rotate(7deg); }
.tep-ls-1 { left:26px; width:15px; animation:tepOvoBalanca 3.4s ease-in-out 1.8s infinite; }
.tep-ls-2 { left:54px; transform:rotate(-6deg); }

/* Festa Junina: lua crescente e estrelas, lanternas atrás do cartão, bandeirinhas na
   borda de cima e a fogueira no canto */
.tep-login-lua-c { position:absolute; left:9%; top:8%; width:min(12vw, 130px); aspect-ratio:1; animation:tepLuaEntra 1.6s cubic-bezier(.22,1,.36,1) both; }
.tep-login-lua-c::before { content:''; position:absolute; inset:-60%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(253,230,138,.24), rgba(253,230,138,0)); }
.tep-login-band { position:absolute; left:-18px; right:-18px; top:-3px; height:40px; animation:tepPendEntra 1s cubic-bezier(.22,1,.36,1) .7s both; }
.tep-login-band .tep-band { width:12px; height:16px; margin-left:-6px; }
.tep-login-band .tep-barbante { color:#C9A878; }
.tep-login-fogueira { position:absolute; left:-74px; bottom:-36px; width:124px; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) .8s both; }
.tep-login-fogueira::before { content:''; position:absolute; inset:-40%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(249,115,22,.30), rgba(249,115,22,0)); }
.tep-lant { position:absolute; top:-104px; transform-origin:50% 0; animation:tepDesce 1.6s cubic-bezier(.22,1,.36,1) 1s both; }
.tep-lt-1 { right:20px; width:46px; }
.tep-lt-2 { right:80px; top:-84px; width:36px; animation-delay:1.2s; }
.tep-lant .tep-lanterna { transform-origin:50% 0; animation:tepLanterna 4.2s ease-in-out 2.6s infinite; }
.tep-lt-2 .tep-lanterna { animation-duration:3.6s; animation-delay:2.2s; }
@keyframes tepLanterna { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }

/* Dia das Mães: a borboleta pousada atrás do cartão e o buquê no canto */
.tep-login-borb { position:absolute; left:30px; top:-44px; width:78px; animation:tepEspia .9s cubic-bezier(.2,.9,.3,1.25) 1.2s both; }
.tep-login-buque { position:absolute; right:-74px; bottom:-50px; width:154px; transform:rotate(10deg); animation:tepSurgeGiraB .8s cubic-bezier(.22,1,.36,1) .85s both; }
@keyframes tepSurgeGiraB { from { opacity:0; transform:rotate(30deg) scale(.7); } to { opacity:1; transform:rotate(10deg); } }

/* Dia dos Pais: a pipa no alto, atrás do cartão, e o chapéu no canto */
.tep-login-pipa { position:absolute; right:-86px; top:-150px; width:136px; animation:tepEspia 1s cubic-bezier(.2,.9,.3,1.25) 1s both; }
.tep-login-pipa .tep-pipa { transform-origin:50% 30%; animation:tepPipa 4.6s ease-in-out 2s infinite; }
@keyframes tepPipa { 0%,100% { transform:rotate(-6deg) translateY(0); } 50% { transform:rotate(5deg) translateY(-6px); } }
.tep-login-chapeu { position:absolute; left:-60px; top:-44px; width:146px; transform:rotate(-12deg); animation:tepSurgeGiraC .8s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes tepSurgeGiraC { from { opacity:0; transform:translateY(-40px) rotate(-30deg); } to { opacity:1; transform:rotate(-12deg); } }

/* Techplam: raios de luz girando devagar atrás do cartão (um elemento só, apagado nas bordas) */
.tep-raios { position:absolute; left:50%; top:50%; width:1600px; height:1600px; margin:-800px 0 0 -800px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(242,201,76,.10) 0deg 5deg, rgba(242,201,76,0) 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side, #000 16%, rgba(0,0,0,.5) 44%, transparent 72%);
  mask:radial-gradient(closest-side, #000 16%, rgba(0,0,0,.5) 44%, transparent 72%);
  animation:tepRaios 140s linear infinite; }
@keyframes tepRaios { to { transform:rotate(360deg); } }
/* o número dos anos em balão metalizado sobe por trás do cartão, com os fios descendo atrás dele */
.tep-login-35 { position:absolute; right:-62px; top:-122px; animation:tepEspia 1s cubic-bezier(.2,.9,.3,1.25) 1s both; }
.tep-login-35 .tep-foils { gap:2px; }
.tep-login-35 .tep-foil-i { width:58px; }
.tep-login-35 .tep-foil-i::after { content:''; position:absolute; left:50%; top:86%; width:1px; height:96px;
  background:linear-gradient(rgba(242,201,76,.75), rgba(242,201,76,0)); }
.tep-login-35 .tep-foil-i:nth-child(even) { animation-duration:4.6s; }
/* o selo no canto, com um brilho que passa por ele de tempos em tempos */
.tep-login-selo { position:absolute; left:-64px; bottom:-54px; width:150px; transform:rotate(-10deg); animation:tepSurgeGiraS .9s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes tepSurgeGiraS { from { opacity:0; transform:rotate(-50deg) scale(.6); } to { opacity:1; transform:rotate(-10deg); } }
.tep-login-selo::before { content:''; position:absolute; inset:-28%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(242,201,76,.30), rgba(242,201,76,0)); }
/* a caixa do brilho é o disco da medalha (círculo de raio 48 em 60,54 no desenho de 120x124) */
.tep-selo-brilho { position:absolute; left:10%; top:4.8%; width:80%; height:77.4%; border-radius:50%; overflow:hidden; }
.tep-selo-brilho::before { content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:38%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,250,230,.5) 50%, rgba(255,255,255,0));
  transform:translate3d(-120%,0,0) skewX(-16deg); animation:tepSeloBrilho 5.5s ease-in-out 2.2s infinite; }
@keyframes tepSeloBrilho { 0% { transform:translate3d(-120%,0,0) skewX(-16deg); } 30%,100% { transform:translate3d(300%,0,0) skewX(-16deg); } }

/* Réveillon: a queima de fogos nos dois lados do cartão, o relógio chegando à meia-noite atrás
   dele e as taças brindando no canto */
.tep-login-ceu .tep-fogo { --h:30vh; }
.tep-login-ceu .tep-fogo-r { width:2.4px; height:64px; margin-left:-.2px; }
.tep-login-ceu .tep-fogo-b { animation:tepFogoLoop var(--d) var(--a) infinite; }
.tep-login-ceu .tep-fogo-r { animation:tepRastroLoop var(--d) var(--a) infinite; }
.tep-login-relogio { position:absolute; left:-62px; top:-92px; width:150px; transform:rotate(-8deg); animation:tepEspiaR 1s cubic-bezier(.2,.9,.3,1.25) 1s both; }
@keyframes tepEspiaR { 0% { opacity:0; transform:translateY(130px) rotate(-8deg); } 1% { opacity:1; transform:translateY(130px) rotate(-8deg); }
  100% { opacity:1; transform:rotate(-8deg); } }
.tep-login-relogio::before { content:''; position:absolute; inset:-30%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(242,201,76,.26), rgba(242,201,76,0)); }
/* os ponteiros chegam ao XII girando, logo depois de o relógio aparecer */
.tep-ponteiro { transform-box:view-box; transform-origin:50% 50%; }
.tep-login-relogio .tep-pt-m { animation:tepPonteiroM 2.4s cubic-bezier(.3,.7,.2,1) 1.5s both; }
.tep-login-relogio .tep-pt-h { animation:tepPonteiroH 2.4s cubic-bezier(.3,.7,.2,1) 1.5s both; }
@keyframes tepPonteiroM { from { transform:rotate(-90deg); } to { transform:rotate(0deg); } }
@keyframes tepPonteiroH { from { transform:rotate(-8deg); } to { transform:rotate(0deg); } }
.tep-login-tacas { position:absolute; right:-92px; bottom:-48px; width:196px; transform:rotate(6deg); animation:tepSurgeGiraT .8s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes tepSurgeGiraT { from { opacity:0; transform:translateY(30px) rotate(20deg) scale(.8); } to { opacity:1; transform:rotate(6deg); } }
.tep-login-tacas::before { content:''; position:absolute; inset:-20%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(242,201,76,.24), rgba(242,201,76,0)); }
/* as bolhas do champanhe sobem dentro das taças, e o brilho do brinde pisca entre elas */
.tep-bolhas { animation:tepBolhas 2.2s linear infinite; }
@keyframes tepBolhas { 0% { transform:translateY(5px); opacity:0; } 20% { opacity:.9; } 80% { opacity:.9; } 100% { transform:translateY(-7px); opacity:0; } }
.tep-tim { transform-box:fill-box; transform-origin:50% 50%; animation:tepTim 2.6s ease-in-out infinite; }
@keyframes tepTim { 0%,100% { opacity:.3; transform:scale(.6) rotate(0deg); } 50% { opacity:1; transform:scale(1.15) rotate(45deg); } }
@media (max-width:520px) {
  .tep-ab-1 { width:70px; left:-30px; }
  .tep-ab-2 { width:44px; left:32px; }
  .tep-login-lua { right:-12%; top:3%; width:46vw; }
  .tep-login-ninho { right:-14px; }
  .tep-login-aranha { right:-26px; }
  /* no celular o cartão encosta nas bordas: as peças do canto encolhem e entram um pouco */
  .tep-login-selo { left:-26px; width:112px; }
  .tep-login-35 { right:4px; top:-100px; }
  .tep-login-35 .tep-foil-i { width:42px; }
  .tep-login-relogio { left:-24px; width:116px; }
  .tep-login-tacas { right:-26px; width:118px; }
}

/* ── 8. A saudação do dia ───────────────────────────────────────────────
   Cartão solto embaixo da barra da página, à direita: some sozinho em 9 s (o
   relógio para com o mouse em cima) e nunca abre por cima de janela ou tour. */
.tep-saud { position:fixed; top:148px; right:22px; z-index:950; width:min(370px, calc(100vw - 24px));
  display:flex; align-items:center; gap:14px; padding:14px 44px 18px 14px; border-radius:18px;
  background:radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--tep-1) 15%, transparent), transparent 62%), var(--bg-card);
  border:1px solid var(--border-color);
  box-shadow:0 24px 54px -22px rgba(15,23,42,.55), 0 2px 10px rgba(15,23,42,.08);
  animation:tepSaudEntra .55s cubic-bezier(.22,1,.36,1) both; }
body.dark .tep-saud { --tep-txt:var(--tep-txt-escuro); box-shadow:0 24px 54px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03); }
/* a borda em degradê é uma camada por cima do cartão inteiro: sem pointer-events:none
   ela engolia o clique do atalho "Meu Perfil" (a máscara não vale para o clique) */
.tep-saud::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, var(--tep-1), transparent 34%, transparent 66%, var(--tep-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.75; }
.tep-saud.sai { animation:tepSaudSai .3s ease both; }
@keyframes tepSaudEntra { from { opacity:0; transform:translateY(-10px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes tepSaudSai { to { opacity:0; transform:translateY(-8px) scale(.98); } }
.tep-saud-arte { position:relative; width:66px; height:66px; flex-shrink:0; border-radius:16px; overflow:hidden;
  background:var(--tep-noite); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -8px var(--tep-brilho); }
.tep-saud-arte::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 58%, var(--tep-brilho), transparent 75%); }
.tep-saud-arte .tep-neve { top:-6px; animation-name:tepCaiArte; }
@keyframes tepCaiArte { 0% { transform:translate3d(0,0,0); opacity:0; } 15% { opacity:var(--o); } 85% { opacity:var(--o); } 100% { transform:translate3d(calc(var(--v) * 8px),76px,0); opacity:0; } }
.tep-saud-desenho { position:absolute; inset:8px; display:flex; align-items:center; justify-content:center; }
html.tep-halloween .tep-saud-desenho { inset:6px 7px 8px; }
html.tep-natal .tep-saud-desenho { inset:0 12px 6px; transform-origin:50% 0; animation:tepBola 3.8s ease-in-out infinite; }
html.tep-pascoa .tep-saud-desenho { inset:9px 14px 7px; animation:tepOvoGira 3.4s ease-in-out infinite; transform-origin:50% 90%; }
html.tep-carnaval .tep-saud-desenho { inset:5px 3px 7px; transform-origin:50% 62%; animation:tepMascaraBalanca 3.6s ease-in-out infinite; }
html.tep-junina .tep-saud-desenho { inset:5px 7px 4px; }
html.tep-maes .tep-saud-desenho { inset:6px 14px 2px; transform-origin:50% 96%; animation:tepOvoGira 3.4s ease-in-out infinite; }
html.tep-pais .tep-saud-desenho { inset:4px 21px 4px; transform-origin:50% 0; animation:tepBola 3.8s ease-in-out infinite; }
html.tep-aniversario .tep-saud-desenho { inset:4px 5px 5px; }
html.tep-techplam .tep-saud-desenho { inset:5px 6px 3px; transform-origin:50% 40%; animation:tepOvoGira 4.2s ease-in-out infinite; }
html.tep-reveillon .tep-saud-desenho { inset:5px 0 2px; }
/* as chamas das velas tremem (só elas: o bolo fica parado) */
.tep-chamas { transform-box:fill-box; transform-origin:50% 100%; animation:tepLabareda 1.2s ease-in-out infinite; }
@keyframes tepBola { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@keyframes tepOvoGira { 0%,100% { transform:rotate(-5deg); } 25% { transform:rotate(4deg); } 50% { transform:rotate(-2deg); } 75% { transform:rotate(3deg); } }
@keyframes tepMascaraBalanca { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(5deg); } }
/* as labaredas da fogueira tremem (só elas: a lenha fica parada) */
.tep-labareda { transform-box:fill-box; transform-origin:50% 100%; animation:tepLabareda 1.4s ease-in-out infinite; }
@keyframes tepLabareda { 0%,100% { transform:scale(1,1); opacity:1; } 25% { transform:scale(.96,1.06); opacity:.94; }
  50% { transform:scale(1.03,.95); opacity:1; } 75% { transform:scale(.98,1.04); opacity:.9; } }
/* o que cai ou sobe dentro do quadrinho do desenho */
.tep-saud-arte .tep-confete, .tep-saud-arte .tep-petala { top:-8px; animation-name:tepCaiArteGira; }
.tep-saud-arte .tep-brasa, .tep-saud-arte .tep-ouro { top:auto; bottom:-6px; animation-name:tepSobeArte; }
@keyframes tepCaiArteGira { 0% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; } 15% { opacity:var(--o); } 85% { opacity:var(--o); }
  100% { transform:translate3d(calc(var(--v) * 10px),78px,0) rotate(calc(var(--v) * 260deg + 90deg)); opacity:0; } }
@keyframes tepSobeArte { 0% { transform:translate3d(0,0,0); opacity:0; } 15% { opacity:var(--o); } 85% { opacity:var(--o); }
  100% { transform:translate3d(calc(var(--v) * 8px),-76px,0); opacity:0; } }
.tep-saud-txt { min-width:0; }
.tep-saud-rot { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tep-txt); }
.tep-saud-tit { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--text-main); margin-top:2px; }
/* o --text-muted do painel dá 4,2:1 sobre o branco; aqui o cinza desce um tom para
   passar de 4,5:1 (no escuro o muted já passa) */
.tep-saud-sub { font-size:12px; color:#55657E; margin-top:3px; line-height:1.45; }
.tep-saud-dica { font-size:11px; color:#55657E; margin-top:7px; padding-top:7px; border-top:1px dashed var(--border-color); line-height:1.4; }
body.dark .tep-saud-sub, body.dark .tep-saud-dica { color:var(--text-muted); }
.tep-saud-link { pointer-events:auto; border:0; background:none; padding:0; font:inherit; font-weight:700; cursor:pointer;
  color:var(--tep-txt); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--tep-txt) 40%, transparent); text-underline-offset:2px; }
.tep-saud-link:hover { text-decoration-color:currentColor; }
.tep-saud-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:3px; }
.tep-saud-x { position:absolute; top:10px; right:10px; width:26px; height:26px; border:0; border-radius:8px; background:transparent;
  color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; transition:background .15s, color .15s; }
.tep-saud-x:hover { background:var(--bg-hover); color:var(--text-main); }
.tep-saud-x:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.tep-saud-x svg { width:14px; height:14px; }
.tep-saud { pointer-events:auto; }
.tep-saud-tempo { position:absolute; left:18px; right:18px; bottom:7px; height:2px; border-radius:2px; opacity:.75;
  background:linear-gradient(90deg, var(--tep-1), var(--tep-2)); transform-origin:0 50%; animation:tepTempo 9s linear both; }
.tep-saud.parada .tep-saud-tempo { animation-play-state:paused; }
@keyframes tepTempo { from { transform:scaleX(1); } to { transform:scaleX(0); } }
/* o enfeite de cada época no cartão */
.tep-saud-cordao { position:absolute; left:14px; right:14px; top:-2px; height:20px; animation:tepPendEntra .8s cubic-bezier(.22,1,.36,1) .35s both; }
.tep-saud-cordao .tep-fio { color:#2F5D43; }
.tep-saud-aranha { position:absolute; right:38px; top:100%; width:16px; height:40px; animation:tepDesce 1.2s cubic-bezier(.22,1,.36,1) .5s both; }
.tep-saud-aranha > i { position:absolute; left:50%; top:-1px; width:1px; height:18px; background:rgba(26,16,36,.4); }
body.dark .tep-saud-aranha > i { background:rgba(226,232,240,.5); }
.tep-saud-aranha .tep-aranha { position:absolute; left:0; top:12px; width:16px; color:#1A1024; animation:tepAranhaBob 3.4s ease-in-out 1.7s infinite; }
body.dark .tep-saud-aranha .tep-aranha { color:#D8CCF5; }
.tep-saud-orelhas { position:fixed; top:86px; right:62px; z-index:949; width:76px; animation:tepEspiaSaud .7s cubic-bezier(.2,.9,.3,1.25) .6s both; }
/* Carnaval: uma serpentina pendurada embaixo do cartão, como a aranha do Halloween */
.tep-saud-serp { position:absolute; right:44px; top:100%; width:11px; animation:tepDesce 1.2s cubic-bezier(.22,1,.36,1) .5s both; }
.tep-saud-serp .tep-serp { transform-origin:50% 0; animation:tepOvoBalanca 3.2s ease-in-out 1.7s infinite; }
/* Festa Junina: bandeirinhas na borda de cima do cartão, como o cordão do Natal */
.tep-saud-band { position:absolute; left:14px; right:14px; top:-2px; height:14px; animation:tepPendEntra .8s cubic-bezier(.22,1,.36,1) .35s both; }
.tep-saud-band .tep-band { width:7px; height:9px; margin-left:-3.5px; }
/* Dia das Mães: a borboleta pousada na borda de cima (abre e fecha devagar; batendo até o
   fim, parada no meio do caminho ela parecia um X) */
.tep-saud-borb { position:absolute; right:34px; top:-17px; width:30px; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) .7s both; }
/* Dia dos Pais: o avião de papel pousa na borda de cima */
.tep-saud-aviao { position:absolute; right:30px; top:-15px; width:40px; transform:rotate(-8deg); animation:tepPousa .9s cubic-bezier(.22,1,.36,1) .5s both; }
@keyframes tepPousa { from { opacity:0; transform:translate(-60px,-16px) rotate(-8deg); } to { opacity:1; transform:rotate(-8deg); } }
/* Aniversário: o cacho de balões amarrado na borda de cima do cartão, flutuando */
.tep-saud-cacho { position:absolute; right:34px; top:-50px; width:36px; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) .6s both; }
.tep-saud-cacho .tep-cacho { transform-origin:50% 100%; animation:tepFlutua 3.8s ease-in-out 1.3s infinite; }
@keyframes tepFlutua { 0%,100% { transform:rotate(-4deg) translateY(0); } 50% { transform:rotate(4deg) translateY(-3px); } }
/* Techplam: flâmulas miúdas azul e ouro na borda de cima, como as bandeirinhas da Junina */
.tep-saud-flam { position:absolute; left:14px; right:14px; top:-2px; height:16px; animation:tepPendEntra .8s cubic-bezier(.22,1,.36,1) .35s both; }
.tep-saud-flam .tep-flam { width:9px; height:12px; margin-left:-4.5px; }
/* Réveillon: o ano novo em balão metalizado pousado na borda de cima */
.tep-saud-foils { position:absolute; right:40px; top:-23px; animation:tepSurge .7s cubic-bezier(.22,1,.36,1) .6s both; }
.tep-saud-foils .tep-foil-i { width:15px; }
.tep-saud-orelhas.sai { animation:tepSaudSai .3s ease both; }
@media (max-width:900px) {
  .tep-saud { top:108px; right:12px; }
  .tep-saud-orelhas { top:46px; right:52px; }
}

/* ── 9. Meu Perfil, Preferências de exibição ───────────────────────────────
   O interruptor Automático / Desligado, o quadro do "agora" e a galeria da prévia (admin).
   Nada aqui roda sem parar: entrada, mouse e escolha animam uma vez só, e os desenhos dos
   cartões ficam parados até o mouse passar por cima (aí a fogueira tremula, as bolhas sobem). */
.tep-pf { margin-top:18px; padding-top:18px; border-top:1px solid var(--border-color); }
/* quem chega pelo atalho da saudação vê o bloco acender por um instante */
.tep-pf-realce { animation:tepRealce 2.4s ease both; border-radius:14px; }
@keyframes tepRealce { 0%,100% { background:transparent; box-shadow:0 0 0 0 transparent; }
  18%,62% { background:color-mix(in srgb, var(--blue) 7%, transparent); box-shadow:0 0 0 8px color-mix(in srgb, var(--blue) 7%, transparent); } }
.tep-pf-linha { display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; }
.tep-pf-txt { flex:1; min-width:240px; }
.tep-pf-tit { font-size:13px; font-weight:800; letter-spacing:-.005em; color:var(--text-main); }
/* o --text-muted dá 4,2:1 no branco: texto miúdo desce um tom (como na saudação) */
.tep-pf-sub { max-width:640px; margin-top:3px; font-size:11.5px; line-height:1.5; color:#55657E; text-wrap:pretty; }
body.dark .tep-pf-sub { color:var(--text-muted); }

/* O interruptor: o fundo colorido desliza de uma opção para a outra e some numa prévia */
.tep-seg { position:relative; display:grid; grid-template-columns:1fr 1fr; min-width:262px; padding:4px; border-radius:13px;
  background:var(--bg-page); border:1px solid var(--border-color); }
.tep-seg-bg { position:absolute; left:4px; top:4px; bottom:4px; width:calc((100% - 8px) / 2); border-radius:9px;
  background:linear-gradient(135deg, #4F46E5, #7C3AED); box-shadow:0 6px 16px -4px rgba(79,70,229,.55), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .42s cubic-bezier(.34,1.25,.4,1), opacity .25s ease; }
.tep-seg[data-on="off"] .tep-seg-bg { transform:translateX(100%); }
.tep-seg[data-on="prev"] .tep-seg-bg { opacity:0; transform:scale(.9); }
.tep-seg button { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px;
  border:0; border-radius:9px; background:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--text-muted);
  transition:color .3s ease; }
.tep-seg button svg { width:15px; height:15px; flex-shrink:0; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.tep-seg button:hover { color:var(--text-main); }
.tep-seg button[aria-pressed="true"] { color:#fff; }
.tep-seg button[aria-pressed="true"] svg { transform:rotate(-8deg) scale(1.1); }
.tep-seg button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }

/* Cada tema: cor de destaque (anel, brilho, barra), a segunda cor e o texto miúdo (claro e escuro) */
.tep-pf [data-tep="carnaval"]    { --t1:#EC4899; --t2:#FACC15; --tt:#BE185D; --tte:#F9A8D4; }
.tep-pf [data-tep="pascoa"]      { --t1:#A78BFA; --t2:#F9A8D4; --tt:#6D28D9; --tte:#C4B5FD; }
.tep-pf [data-tep="maes"]        { --t1:#F472B6; --t2:#FB7185; --tt:#BE185D; --tte:#F9A8D4; }
.tep-pf [data-tep="junina"]      { --t1:#F59E0B; --t2:#EF4444; --tt:#B45309; --tte:#FCD34D; }
.tep-pf [data-tep="techplam"]    { --t1:#E8B93E; --t2:#3B82F6; --tt:#8A5A0B; --tte:#F2D78A; }
.tep-pf [data-tep="pais"]        { --t1:#E0A43A; --t2:#60A5FA; --tt:#92400E; --tte:#FCD34D; }
.tep-pf [data-tep="halloween"]   { --t1:#F97316; --t2:#A855F7; --tt:#C2410C; --tte:#FDBA74; }
.tep-pf [data-tep="natal"]       { --t1:#F5C451; --t2:#F0525A; --tt:#A16207; --tte:#FCD980; }
.tep-pf [data-tep="reveillon"]   { --t1:#F2C94C; --t2:#C4B5FD; --tt:#8A5A0B; --tte:#F2D78A; }
.tep-pf [data-tep="aniversario"] { --t1:#F43F5E; --t2:#F59E0B; --tt:#BE123C; --tte:#FDA4AF; }
body.dark .tep-pf [data-tep] { --tt:var(--tte); }

/* O céu de cada época (o mesmo da barra de cima), com o desenho no meio e um brilho atrás */
.tep-pf-ceu { position:relative; display:flex; align-items:center; justify-content:center; height:64px; border-radius:10px; overflow:hidden;
  --estrelas: radial-gradient(1.3px 1.3px at 16% 26%, rgba(255,255,255,.9) 50%, transparent 56%),
    radial-gradient(1px 1px at 74% 16%, rgba(255,255,255,.85) 50%, transparent 56%),
    radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.7) 50%, transparent 56%),
    radial-gradient(1.3px 1.3px at 28% 82%, rgba(255,255,255,.55) 50%, transparent 56%),
    radial-gradient(1px 1px at 56% 34%, rgba(255,255,255,.5) 50%, transparent 56%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05); }
.tep-pf-ceu[data-tep="carnaval"] { background:radial-gradient(70% 100% at 100% 110%, rgba(236,72,153,.6), transparent 70%),
  radial-gradient(60% 90% at 0% -10%, rgba(34,211,238,.35), transparent 70%), var(--estrelas), linear-gradient(160deg, #2a0a3d, #560f62); }
.tep-pf-ceu[data-tep="pascoa"] { background:radial-gradient(70% 100% at 100% 110%, rgba(253,186,116,.6), transparent 70%),
  radial-gradient(60% 90% at 6% 0%, rgba(110,231,183,.3), transparent 70%), linear-gradient(160deg, #2c2a78, #6c4cab); }
.tep-pf-ceu[data-tep="maes"] { background:radial-gradient(70% 100% at 100% 110%, rgba(251,113,133,.55), transparent 70%),
  radial-gradient(60% 90% at 0% 0%, rgba(253,230,138,.25), transparent 70%), linear-gradient(160deg, #381034, #7a2352); }
.tep-pf-ceu[data-tep="junina"] { background:radial-gradient(80% 100% at 0% 115%, rgba(245,158,11,.6), transparent 70%),
  radial-gradient(60% 90% at 100% 120%, rgba(239,68,68,.3), transparent 70%), var(--estrelas), linear-gradient(160deg, #0b1330, #212a5c); }
.tep-pf-ceu[data-tep="techplam"] { background:radial-gradient(70% 100% at 100% 115%, rgba(232,185,62,.55), transparent 70%),
  radial-gradient(60% 90% at 0% -10%, rgba(147,197,253,.32), transparent 70%), var(--estrelas), linear-gradient(160deg, #061638, #144ca8); }
.tep-pf-ceu[data-tep="pais"] { background:radial-gradient(70% 100% at 100% 115%, rgba(224,164,58,.5), transparent 70%),
  radial-gradient(60% 90% at 0% -10%, rgba(96,165,250,.25), transparent 70%), var(--estrelas), linear-gradient(160deg, #0a1730, #1b3c6c); }
.tep-pf-ceu[data-tep="halloween"] { background:radial-gradient(70% 100% at 100% 115%, rgba(168,85,247,.55), transparent 70%),
  radial-gradient(60% 80% at 0% 115%, rgba(249,115,22,.35), transparent 70%), var(--estrelas), linear-gradient(160deg, #160a25, #3d1553); }
.tep-pf-ceu[data-tep="natal"] { background:radial-gradient(70% 100% at 100% -10%, rgba(147,197,253,.32), transparent 70%),
  radial-gradient(60% 80% at 0% 115%, rgba(245,196,81,.25), transparent 70%), var(--estrelas), linear-gradient(160deg, #051430, #104496); }
.tep-pf-ceu[data-tep="reveillon"] { background:radial-gradient(70% 100% at 50% -25%, rgba(242,201,76,.38), transparent 70%),
  radial-gradient(60% 90% at 0% 115%, rgba(167,139,250,.28), transparent 70%), var(--estrelas), linear-gradient(160deg, #03050e, #181e4c); }
.tep-pf-ceu[data-tep="aniversario"] { background:radial-gradient(70% 100% at 100% 115%, rgba(251,113,133,.55), transparent 70%),
  radial-gradient(60% 90% at 0% -10%, rgba(245,158,11,.32), transparent 70%), linear-gradient(160deg, #23103c, #611756); }
.tep-pf-ceu::before { content:''; position:absolute; left:50%; top:52%; width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--t1) 55%, transparent), transparent); opacity:.55;
  transition:opacity .4s ease, transform .6s cubic-bezier(.22,1,.36,1); }
/* o brilho que atravessa o céu UMA vez ao passar o mouse (volta sem animar quando o mouse sai) */
.tep-pf-ceu::after { content:''; position:absolute; z-index:2; top:-30%; bottom:-30%; left:0; width:42%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.3) 50%, rgba(255,255,255,0));
  transform:translateX(-170%) skewX(-18deg); transition:transform 0s; }
.tep-pf-arte { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:58px; height:48px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition:transform .5s cubic-bezier(.34,1.5,.5,1); }
.tep-pf-arte .tep-svg { width:100%; height:100%; }
/* os desenhos têm movimento próprio (chama, bolhas, labareda): parado aqui, vivo com o mouse */
.tep-pf .tep-svg, .tep-pf .tep-svg * { animation-play-state:paused !important; }
.tep-pf-tile:hover .tep-svg, .tep-pf-tile:hover .tep-svg *, .tep-pf-tile:focus-visible .tep-svg *,
.tep-pf-agora:hover .tep-svg, .tep-pf-agora:hover .tep-svg * { animation-play-state:running !important; }

/* O quadro do "agora" */
.tep-pf-agora { display:flex; align-items:center; gap:16px; margin-top:16px; padding:10px 18px 10px 10px; border-radius:16px;
  background:radial-gradient(120% 180% at 0% 50%, color-mix(in srgb, var(--t1, #6366F1) 13%, transparent), transparent 62%), var(--bg-page);
  border:1px solid color-mix(in srgb, var(--t1, #6366F1) 26%, var(--border-color)); }
.tep-pf-agora.troca { animation:tepPfTroca .5s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes tepPfTroca { from { opacity:0; transform:translateY(6px); } }
.tep-pf-agora .tep-pf-ceu { width:98px; height:68px; flex-shrink:0; }
.tep-pf-agora .tep-pf-ceu::before { opacity:.9; }
.tep-pf-agora:hover .tep-pf-arte { transform:translateY(-2px) scale(1.06); }
.tep-pf-agora:hover .tep-pf-ceu::after { transform:translateX(330%) skewX(-18deg); transition:transform .95s cubic-bezier(.4,0,.2,1); }
.tep-pf-agora-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.tep-pf-rot { font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--tt, #55657E); }
.tep-pf-agora-tit { margin-top:1px; font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--text-main); }
.tep-pf-agora-sub { margin-top:2px; font-size:11.5px; line-height:1.45; color:#55657E; }
body.dark .tep-pf-agora-sub { color:var(--text-muted); }
/* quanto da temporada já passou: cresce da esquerda ao abrir (escala, na placa de vídeo) */
.tep-pf-barra { display:block; height:5px; max-width:300px; margin-top:8px; border-radius:4px; overflow:hidden;
  background:color-mix(in srgb, var(--t1) 16%, var(--border-color)); }
.tep-pf-barra i { display:block; height:100%; border-radius:4px; transform-origin:0 50%; transform:scaleX(var(--p));
  background:linear-gradient(90deg, var(--t2), var(--t1)); animation:tepPfBarra 1.2s cubic-bezier(.2,.8,.2,1) .3s backwards; }
@keyframes tepPfBarra { from { transform:scaleX(0); } }
.tep-pf-lado { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; padding-left:18px; text-align:right;
  border-left:1px dashed var(--border-color); }
.tep-pf-lado span { font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#55657E; }
.tep-pf-lado b { margin-top:2px; font-size:13px; font-weight:800; color:var(--text-main); }
.tep-pf-lado small { margin-top:1px; font-size:11px; color:#55657E; }
body.dark .tep-pf-lado span, body.dark .tep-pf-lado small { color:var(--text-muted); }
/* desligado (ou fora de época): o céu perde a cor, o destaque vira cinza */
.tep-pf-agora.mudo { --t1:#94A3B8; }
.tep-pf-agora.mudo .tep-pf-ceu { filter:grayscale(1) brightness(.9); }
.tep-pf-agora.mudo .tep-pf-rot { color:#55657E; }
body.dark .tep-pf-agora.mudo .tep-pf-rot { color:var(--text-muted); }

/* A galeria da prévia (admin): um cartão por tema, em grade, na ordem do ano */
.tep-pf-prev-tit { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 10px; margin:22px 0 11px; }
.tep-pf-prev-tit b { font-size:12.5px; font-weight:800; color:var(--text-main); }
.tep-pf-prev-tit span { font-size:11.5px; color:#55657E; }
body.dark .tep-pf-prev-tit span { color:var(--text-muted); }
.tep-pf-gal { display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:10px; }
.tep-pf-tile { position:relative; display:flex; flex-direction:column; padding:5px 5px 9px; border-radius:14px; cursor:pointer;
  background:var(--bg-page); border:1px solid var(--border-color); color:var(--text-main); font:inherit; text-align:center;
  animation:tepPfEntra .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i) * 40ms + .1s);
  transition:transform .35s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease, border-color .25s ease; }
@keyframes tepPfEntra { from { opacity:0; transform:translateY(10px) scale(.96); } }
.tep-pf-tile:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--t1) 55%, var(--border-color));
  box-shadow:0 14px 26px -14px color-mix(in srgb, var(--t1) 75%, transparent); }
.tep-pf-tile:active { transform:translateY(-1px) scale(.98); transition-duration:.12s; }
.tep-pf-tile:focus-visible { outline:2px solid var(--t1); outline-offset:2px; }
.tep-pf-tile:hover .tep-pf-ceu::before, .tep-pf-tile.on .tep-pf-ceu::before { opacity:1; transform:scale(1.18); }
.tep-pf-tile:hover .tep-pf-arte { transform:translateY(-3px) scale(1.08) rotate(-3deg); }
.tep-pf-tile:hover .tep-pf-ceu::after { transform:translateX(330%) skewX(-18deg); transition:transform .95s cubic-bezier(.4,0,.2,1); }
.tep-pf-nome { margin-top:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:800; letter-spacing:-.005em;
  transition:color .25s ease; }
.tep-pf-data { margin-top:1px; font-size:10.5px; font-weight:600; color:#55657E; font-variant-numeric:tabular-nums; }
body.dark .tep-pf-data { color:var(--text-muted); }
/* escolhido (prévia): anel na cor do próprio tema e o visto que salta */
.tep-pf-tile.on { border-color:transparent; box-shadow:0 0 0 2px var(--t1), 0 14px 28px -14px color-mix(in srgb, var(--t1) 80%, transparent); }
.tep-pf-tile.on .tep-pf-nome { color:var(--tt); }
.tep-pf-ok { position:absolute; z-index:3; right:5px; top:5px; display:flex; align-items:center; justify-content:center; width:19px; height:19px;
  border-radius:50%; background:#fff; color:color-mix(in srgb, var(--t1) 72%, #000); box-shadow:0 3px 10px rgba(0,0,0,.35);
  opacity:0; transform:scale(.3) rotate(-30deg); transition:opacity .2s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
.tep-pf-ok svg { width:12px; height:12px; }
.tep-pf-tile.on .tep-pf-ok { opacity:1; transform:none; }
/* o tema que vale hoje no calendário */
.tep-pf-selo { position:absolute; z-index:3; left:5px; top:5px; display:inline-flex; align-items:center; gap:4px; padding:2px 7px 2px 6px;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.38);
  font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.tep-pf-selo::before { content:''; width:5px; height:5px; border-radius:50%; background:#34D399; box-shadow:0 0 6px #34D399; }

@media (max-width:640px) {
  .tep-seg { width:100%; min-width:0; }
  .tep-pf-agora { flex-wrap:wrap; }
  .tep-pf-lado { align-items:flex-start; width:100%; padding:8px 0 0; text-align:left; border-left:0; border-top:1px dashed var(--border-color); }
  .tep-pf-gal { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .tep-pf-realce, .tep-pf *, .tep-pf *::before, .tep-pf *::after { animation:none !important; transition:none !important; }
}

/* ── 10. Economia e movimento reduzido ─────────────────────────────────── */
/* troca de tema na frente da pessoa (o aniversário chegando, a escolha em Meu Perfil): o céu,
   o fundo e a legenda nascem num esmaecer, em vez de trocar de uma vez */
html.tep-troca .tep-ceu, html.tep-troca .tep-fundo, html.tep-troca #navbar-logo .sub-epoca { animation:tepTroca .9s ease both; }
@keyframes tepTroca { from { opacity:0; } to { opacity:1; } }
html.tep-pausa .tep-deco, html.tep-pausa .tep-deco * { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  .tep-deco, .tep-deco * { animation:none !important; transition:none !important; }
  .tep-p, .tep-voo, .tep-login-bando, .tep-saud-tempo { display:none !important; }
  /* sem movimento, os fogos ficam abertos e parados (senão sumiam de vez) */
  .tep-ceu .tep-fogo-b, .tep-login-ceu .tep-fogo-b { opacity:.8; }
}