/* =====================================================================
   Linkei — Animações de fundo (catálogo estendido). Compartilhado entre a
   página pública (.page-anim) e o preview do painel (.pv-anim). Cada animação
   se adapta às cores do tema via color-mix(var(--accent)/--btn-bg/--text).
   Uma só fica ativa por vez (data-anim), então não há custo acumulado.
   Cada uma usa um MECANISMO de movimento diferente — não são 10 variações do
   mesmo efeito de partículas.
   ===================================================================== */

/* 1. Farol — feixe cônico varrendo em rotação (como um farol) */
.page[data-anim="farol"] .page-anim, .pv[data-anim="farol"] .pv-anim {
  background: conic-gradient(from 0deg at 50% 45%,
    color-mix(in srgb, var(--accent) 55%, transparent) 0deg,
    transparent 42deg, transparent 360deg);
  filter: blur(7px); opacity: .6;
  animation: lk-spin 9s linear infinite;
}

/* 2. Chuva — riscos finos diagonais caindo */
.page[data-anim="chuva"] .page-anim, .pv[data-anim="chuva"] .pv-anim {
  background-image: repeating-linear-gradient(103deg,
    color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px 9px);
  background-size: 40px 40px; opacity: .5;
  animation: lk-chuva .55s linear infinite;
}
@keyframes lk-chuva { to { background-position: -9px 40px; } }

/* 3. Vaga-lumes — glóbulos de luz pulsando */
.page[data-anim="vagalumes"] .page-anim, .pv[data-anim="vagalumes"] .pv-anim {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 70%, transparent) 0 5px, transparent 7px),
    radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--accent) 60%, transparent) 0 4px, transparent 6px),
    radial-gradient(circle at 45% 66%, color-mix(in srgb, var(--accent) 65%, transparent) 0 6px, transparent 8px),
    radial-gradient(circle at 85% 72%, color-mix(in srgb, var(--accent) 55%, transparent) 0 4px, transparent 6px),
    radial-gradient(circle at 30% 88%, color-mix(in srgb, var(--accent) 60%, transparent) 0 5px, transparent 7px);
  filter: blur(1.4px);
  animation: lk-vaga 3.6s ease-in-out infinite;
}
@keyframes lk-vaga { 0%, 100% { opacity: .18; } 50% { opacity: .85; } }

/* 4. Listras — faixas diagonais deslizando (barbearia) */
.page[data-anim="listras"] .page-anim, .pv[data-anim="listras"] .pv-anim {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 13%, transparent) 0 14px, transparent 14px 28px);
  background-size: 40px 40px; opacity: .85;
  animation: lk-listras 3s linear infinite;
}
@keyframes lk-listras { to { background-position: 40px 0; } }

/* 5. Sonar — anéis concêntricos expandindo (radar) */
.page[data-anim="sonar"] .page-anim, .pv[data-anim="sonar"] .pv-anim {
  background: repeating-radial-gradient(circle at 50% 55%,
    transparent 0 20px,
    color-mix(in srgb, var(--accent) 34%, transparent) 20px 22px,
    transparent 22px 42px);
  transform-origin: 50% 55%;
  animation: lk-sonar 3.6s ease-out infinite;
}
@keyframes lk-sonar { from { transform: scale(.55); opacity: .75; } to { transform: scale(1.7); opacity: 0; } }

/* 6. Bokeh — orbes desfocados flutuando (fora de foco) */
.page[data-anim="bokeh"] .page-anim, .pv[data-anim="bokeh"] .pv-anim {
  background:
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--accent) 45%, transparent) 0 22px, transparent 42px),
    radial-gradient(circle at 76% 62%, color-mix(in srgb, var(--btn-bg) 60%, transparent) 0 30px, transparent 56px),
    radial-gradient(circle at 55% 18%, color-mix(in srgb, var(--accent) 32%, transparent) 0 16px, transparent 32px);
  filter: blur(10px); opacity: .7;
  animation: lk-bokeh 12s ease-in-out infinite alternate;
}
@keyframes lk-bokeh { from { transform: translateY(4%) scale(1); } to { transform: translateY(-4%) scale(1.12); } }

/* 7. Prisma — brilho espectral iridescente (holográfico). Risco autoral:
   independente do tema, tinge com mix-blend para um efeito holo. */
.page[data-anim="prisma"] .page-anim, .pv[data-anim="prisma"] .pv-anim {
  background: linear-gradient(115deg, #ff5f6d, #ffc371, #34d399, #38bdf8, #a78bfa, #ff5f6d);
  background-size: 300% 300%; opacity: .38; mix-blend-mode: overlay;
  animation: lk-prisma 8s linear infinite;
}
@keyframes lk-prisma { to { background-position: 300% 0; } }

/* 8. Estrelas — campo de pontos cintilando (usa a cor do texto p/ contraste) */
.page[data-anim="estrelas"] .page-anim, .pv[data-anim="estrelas"] .pv-anim {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--text) 70%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--text) 45%, transparent) 0 1px, transparent 2px);
  background-size: 44px 44px, 78px 78px;
  background-position: 0 0, 24px 30px;
  animation: lk-estrelas 3s ease-in-out infinite;
}
@keyframes lk-estrelas { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }

/* 9. Vinil — sulcos concêntricos com brilho girando (disco de vinil) */
.page[data-anim="vinil"] .page-anim, .pv[data-anim="vinil"] .pv-anim {
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0deg,
      color-mix(in srgb, var(--accent) 28%, transparent) 26deg, transparent 60deg, transparent 360deg),
    repeating-radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--text) 9%, transparent) 0 2px, transparent 2px 7px);
  opacity: .6;
  animation: lk-spin 14s linear infinite;
}

/* 10. Fluxo — gradiente de tema fluindo suavemente (ambiente) */
.page[data-anim="fluxo"] .page-anim, .pv[data-anim="fluxo"] .pv-anim {
  background: linear-gradient(130deg,
    color-mix(in srgb, var(--accent) 42%, transparent),
    color-mix(in srgb, var(--btn-bg) 52%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--btn-bg) 46%, transparent));
  background-size: 240% 240%; opacity: .7;
  animation: lk-fluxo 12s ease-in-out infinite;
}
@keyframes lk-fluxo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ===== Coleção premium — 10 novas, cada uma com mecanismo próprio ===== */

/* 11. Nebulosa — grandes nuvens de cor à deriva (não são orbes discretos) */
.page[data-anim="nebulosa"] .page-anim, .pv[data-anim="nebulosa"] .pv-anim {
  background:
    radial-gradient(42% 52% at 25% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(46% 56% at 78% 42%, color-mix(in srgb, var(--btn-bg) 68%, transparent), transparent 72%),
    radial-gradient(50% 42% at 55% 82%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
  background-size: 200% 200%; filter: blur(26px); opacity: .72;
  animation: lk-nebulosa 20s ease-in-out infinite alternate;
}
@keyframes lk-nebulosa { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* 12. Meteoros — riscos longos e brilhantes cruzando na diagonal */
.page[data-anim="meteoros"] .page-anim, .pv[data-anim="meteoros"] .pv-anim {
  background-image:
    linear-gradient(118deg, transparent 0 44%, color-mix(in srgb, var(--accent) 80%, transparent) 47%, transparent 50%),
    linear-gradient(118deg, transparent 0 72%, color-mix(in srgb, var(--text) 45%, transparent) 75%, transparent 78%);
  background-repeat: no-repeat, no-repeat;
  background-size: 240px 240px, 380px 380px; opacity: .6;
  animation: lk-meteoros 1s linear infinite;
}
@keyframes lk-meteoros { from { background-position: 120% -20%, 130% -30%; } to { background-position: -30% 120%, -40% 130%; } }

/* 13. Caleidoscópio — cunhas espectrais girando devagar */
.page[data-anim="caleidoscopio"] .page-anim, .pv[data-anim="caleidoscopio"] .pv-anim {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb, var(--accent) 30%, transparent) 0deg 18deg,
    transparent 18deg 36deg,
    color-mix(in srgb, var(--btn-bg) 34%, transparent) 36deg 54deg,
    transparent 54deg 72deg);
  filter: blur(3px); opacity: .5;
  animation: lk-spin 22s linear infinite;
}

/* 14. Neve — flocos claros caindo com leve deriva */
.page[data-anim="neve"] .page-anim, .pv[data-anim="neve"] .pv-anim {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--text) 85%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--text) 55%, transparent) 0 1.5px, transparent 3px);
  background-size: 70px 70px, 110px 110px; opacity: .8;
  animation: lk-neve 6.5s linear infinite;
}
@keyframes lk-neve { to { background-position: 14px 70px, -20px 110px; } }

/* 15. Pétalas — elipses coloridas caindo na diagonal (sopro) */
.page[data-anim="petalas"] .page-anim, .pv[data-anim="petalas"] .pv-anim {
  background-image:
    radial-gradient(ellipse 5px 3px at center, color-mix(in srgb, var(--accent) 78%, transparent) 0 60%, transparent 64%),
    radial-gradient(ellipse 4px 2px at center, color-mix(in srgb, var(--accent) 50%, transparent) 0 60%, transparent 64%);
  background-size: 90px 90px, 130px 130px; opacity: .72; filter: blur(.4px);
  animation: lk-petalas 7.5s linear infinite;
}
@keyframes lk-petalas { to { background-position: 46px 90px, -34px 130px; } }

/* 16. Pulsar — brilho central respirando */
.page[data-anim="pulsar"] .page-anim, .pv[data-anim="pulsar"] .pv-anim {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent) 0 6%, transparent 44%);
  animation: lk-pulsar 3.2s ease-in-out infinite;
}
@keyframes lk-pulsar { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.25); opacity: .8; } }

/* 17. Matrix — chuva digital: colunas verticais com cabeça brilhante */
.page[data-anim="matrix"] .page-anim, .pv[data-anim="matrix"] .pv-anim {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 16px, color-mix(in srgb, var(--accent) 22%, transparent) 16px 17px, transparent 17px 34px),
    linear-gradient(180deg, transparent 0 58%, color-mix(in srgb, var(--accent) 65%, transparent) 80%, transparent 100%);
  background-size: 34px 100%, 34px 220px; opacity: .5;
  animation: lk-matrix 1.4s linear infinite;
}
@keyframes lk-matrix { to { background-position: 0 0, 0 220px; } }

/* 18. Teia — pontos ligados por linhas finas, à deriva (constelação) */
.page[data-anim="teia"] .page-anim, .pv[data-anim="teia"] .pv-anim {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 62%, transparent) 0 1.5px, transparent 2.5px),
    repeating-linear-gradient(60deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px 46px);
  background-size: 54px 54px, auto, auto; opacity: .6;
  animation: lk-teia 16s linear infinite;
}
@keyframes lk-teia { to { background-position: 54px 27px, 46px 0, -46px 0; } }

/* 19. Miragem — bandas horizontais tremeluzindo (calor) */
.page[data-anim="miragem"] .page-anim, .pv[data-anim="miragem"] .pv-anim {
  background: repeating-linear-gradient(0deg,
    color-mix(in srgb, var(--accent) 16%, transparent) 0 2px, transparent 2px 12px);
  filter: blur(2px); opacity: .5;
  animation: lk-miragem 4.5s ease-in-out infinite;
}
@keyframes lk-miragem { 0%, 100% { background-position: 0 0; transform: scaleY(1); } 50% { background-position: 0 6px; transform: scaleY(1.05); } }

/* 20. Holograma — lâmina iridescente varrendo (cartão holográfico) */
.page[data-anim="holograma"] .page-anim, .pv[data-anim="holograma"] .pv-anim {
  background: linear-gradient(115deg, transparent 0 30%,
    color-mix(in srgb, #ff5f6d 60%, transparent) 40%,
    color-mix(in srgb, #38bdf8 60%, transparent) 50%,
    color-mix(in srgb, #a78bfa 60%, transparent) 60%,
    transparent 70%);
  background-size: 300% 100%; opacity: .45; mix-blend-mode: screen;
  animation: lk-holograma 5.5s linear infinite;
}
@keyframes lk-holograma { to { background-position: -300% 0; } }

/* Keyframe de rotação compartilhado (farol, vinil, caleidoscópio) */
@keyframes lk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .page-anim, .pv-anim { animation: none !important; }
}