/* ═══════════════════════════════════════════════════════════
   decor-elements.css
   Elementos decorativos de fundo (bolinhas, anéis, listras
   diagonais e grades de pontos) usados nas páginas de guia
   (vocabulário, voz, postura). Puramente visual — não define
   layout, não interfere em nenhuma classe já existente.

   Como usar: os elementos ficam dentro do próprio
   .background-animation de cada página (que já é
   position:absolute/fixed, overflow:hidden, pointer-events:none,
   z-index:0), então herdam esse comportamento automaticamente.

   Carregar DEPOIS de tokens.css.
   ═══════════════════════════════════════════════════════════ */

.decor-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Círculo sólido roxo — canto superior esquerdo */
.decor-circle-purple-tl {
    position: absolute;
    top: -90px;
    left: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.07;
}

/* Grade de pontos dourados — perto do canto superior esquerdo */
.decor-dots-tl {
    position: absolute;
    top: 95px;
    left: 48px;
    width: 96px;
    height: 80px;
    background-image: radial-gradient(var(--color-gold) 2.5px, transparent 3px);
    background-size: 18px 18px;
    opacity: 0.4;
    transform: rotate(-6deg);
}

/* Círculo listrado dourado — canto superior direito */
.decor-stripes-gold-tr {
    position: absolute;
    top: -60px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-image: repeating-linear-gradient(
        45deg,
        var(--color-gold) 0 8px,
        transparent 8px 18px
    );
    opacity: 0.18;
}

/* Anel roxo (contorno vazado) — sobrepõe o círculo listrado, canto sup. direito */
.decor-ring-purple-tr {
    position: absolute;
    top: 10px;
    right: 30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 16px solid var(--color-primary-light);
    opacity: 0.12;
}

/* Círculo listrado — canto inferior esquerdo */
.decor-stripes-purple-bl {
    position: absolute;
    bottom: -55px;
    left: -75px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background-image: repeating-linear-gradient(
        45deg,
        var(--color-primary-light) 0 8px,
        transparent 8px 18px
    );
    opacity: 0.14;
}

/* Grade de pontos — canto inferior esquerdo, ao lado das listras */
.decor-dots-bl {
    position: absolute;
    bottom: 40px;
    left: 150px;
    width: 90px;
    height: 76px;
    background-image: radial-gradient(var(--color-gold) 2.5px, transparent 3px);
    background-size: 17px 17px;
    opacity: 0.32;
    transform: rotate(5deg);
}

/* Anel dourado (donut) — canto inferior direito */
.decor-ring-gold-br {
    position: absolute;
    bottom: -85px;
    right: -95px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 34px solid var(--color-gold);
    opacity: 0.14;
}

/* Grade de pontos roxos — canto inferior direito */
.decor-dots-br {
    position: absolute;
    bottom: 70px;
    right: 70px;
    width: 96px;
    height: 80px;
    background-image: radial-gradient(var(--color-primary) 2.5px, transparent 3px);
    background-size: 18px 18px;
    opacity: 0.3;
    transform: rotate(-4deg);
}

/* ===== Modo escuro: um pouco mais de presença, mesma sutileza dos triângulos ===== */
[data-theme="dark"] .decor-circle-purple-tl,
[data-theme="dark"] .decor-ring-purple-tr,
[data-theme="dark"] .decor-stripes-purple-bl {
    opacity: 0.16;
}

[data-theme="dark"] .decor-stripes-gold-tr,
[data-theme="dark"] .decor-ring-gold-br {
    opacity: 0.22;
}

[data-theme="dark"] .decor-dots-tl,
[data-theme="dark"] .decor-dots-bl,
[data-theme="dark"] .decor-dots-br {
    opacity: 0.5;
}

/* ===== Telas pequenas: reduz um pouco pra não brigar com o conteúdo ===== */
@media (max-width: 640px) {
    .decor-circle-purple-tl,
    .decor-stripes-gold-tr,
    .decor-stripes-purple-bl,
    .decor-ring-gold-br {
        transform: scale(0.7);
    }

    .decor-stripes-purple-bl { transform: scale(0.7) rotate(0deg); }

    .decor-dots-tl,
    .decor-dots-bl,
    .decor-dots-br {
        display: none;
    }
}