/* =====================================================
   Topazioverse — ESTILOS GLOBAIS
   Dark/Light Mode | Hero | Cards | Grids | Responsivo
===================================================== */

/* -----------------------------------------
   VARIÁVEIS GLOBAIS
----------------------------------------- */
:root {
    /* Fundo e texto */
    --bg: #020204;
    --bg-alt: rgba(10, 5, 20, 0.75);
    --text: #eee;
    --text-soft: #c7b4ff;
    --text-strong: #f4edff;

    /* Cards e blocos */
    --card-bg: rgba(10, 5, 20, 0.75);
    --card-border: rgba(150, 100, 255, 0.28);
    --card-shadow: rgba(130, 60, 255, 0.28);

    /* Subtítulos e sombras */
    --subtitle: #d8c9ff;
    --hero-shadow-1: #a26dff;
    --hero-shadow-2: #6227ff;

    --title-shadow: #7d3aff;
    --hero-dark-overlay: rgba(0,0,0,0.6);
}

/* Tema Light */
body.light-theme {
    --bg: #f4f4f6;
    --bg-alt: rgba(255, 255, 255, 0.8);
    --text: #1a1a1a;
    --text-soft: #4b3a70;
    --text-strong: #2b1d46;

    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(100, 60, 180, 0.35);
    --card-shadow: rgba(80, 40, 160, 0.15);

    --subtitle: #4a3a80;
    --hero-shadow-1: #9570ff;
    --hero-shadow-2: #5c34ff;

    --title-shadow: #a075ff;
    --hero-dark-overlay: rgba(255,255,255,0.4);
}

/* -----------------------------------------
   RESET
----------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

/* -----------------------------------------
   PARTICLES & OVERLAY
----------------------------------------- */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(40,0,75,0.35), rgba(0,0,0,0.92));
    z-index: -2;
    transition: 0.4s ease;
}

body.light-theme::before {
    background: radial-gradient(circle at center, rgba(180,160,255,0.15), rgba(240,240,255,0.8));
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: url('/img/mist.png') center/cover repeat;
    opacity: 0.03;
    z-index: -1;
    pointer-events: none;
}

/* -----------------------------------------
   HERO SECTIONS
----------------------------------------- */
.hero, .universo-hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    position: relative;
    background: center/cover no-repeat;
}

.universo-hero {
    height: 55vh;
    background-attachment: fixed;
}

.hero-content, .hero-inner {
    max-width: 900px;
    padding: 25px;
    position: relative;
    animation: fadeInUp 1.3s ease forwards;
    opacity: 0;
    z-index: 2;
}

.hero h1, .universo-hero h1 {
    font-size: 2.8rem;
    color: var(--text-strong);
    margin-bottom: 18px;
    text-shadow: 0 0 18px var(--hero-shadow-1), 0 0 40px var(--hero-shadow-2);
}

.universo-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    color: var(--text-soft);
}

.hero p {
    font-size: 1.25rem;
    color: var(--subtitle);
    text-shadow: 0 0 12px rgba(60,30,120,0.4);
}

/* Overlay hero */
.universo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-dark-overlay);
    backdrop-filter: blur(2px);
}

/* -----------------------------------------
   SECTIONS & BLOCKS
----------------------------------------- */
section, .universo-block {
    padding: 100px 25px;
    text-align: center;
    max-width: 1100px;
    margin: auto;
}

.universo-block:not(:first-of-type) {
    border-top: 1px solid rgba(140,0,255,0.2);
    margin-top: 40px;
    padding-top: 60px;
}

h2 {
    font-size: 2.3rem;
    color: var(--text-strong);
    text-shadow: 0 0 14px rgba(120,70,255,0.6);
    margin-bottom: 20px;
}

.subtitle {
    font-size: 1.15rem;
    color: var(--text-soft);
    margin-bottom: 60px;
}

p {
    font-size: 1.05rem;
    line-height: 1.6rem;
    color: var(--text);
    max-width: 900px;
    margin: auto;
}

/* -----------------------------------------
   CARDS (Cristais e Gerais)
----------------------------------------- */
.cards, .cristais-grid, .terras-grid {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.card, .cristal-card, .terra-card {
    background: var(--card-bg);
    padding: 25px;
    width: 300px;
    border-radius: 14px;
    text-align: center;
    position: relative;
    border: 1px solid var(--card-border);
    box-shadow: 0 0 14px var(--card-shadow);
    backdrop-filter: blur(4px);
    transition: 0.35s ease;
    overflow: hidden;
}

.card:hover, .cristal-card:hover, .terra-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 30px rgba(170,90,255,0.6);
}

.card-glow {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(160,80,255,0.35), transparent 70%);
    opacity: 0;
    transition: 0.4s ease;
}

.card:hover .card-glow {
    opacity: 1;
}

h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-strong);
    text-shadow: 0 0 10px rgba(120,70,255,0.6);
}

/* Cores especiais para cristais */
.cristal-card.fogo { border-color:#ff4d4d50; box-shadow:0 0 20px #ff4d4d40; }
.cristal-card.gelo { border-color:#6fd3ff50; box-shadow:0 0 20px #6fd3ff40; }
.cristal-card.sombra { border-color:#5a00ff50; box-shadow:0 0 20px #5a00ff40; }
.cristal-card.luz { border-color:#fff18050; box-shadow:0 0 20px #fff18040; }
.cristal-card.natureza { border-color:#4dff9750; box-shadow:0 0 20px #4dff9740; }
.cristal-card.espirito { border-color:#c871ff50; box-shadow:0 0 20px #c871ff40; }
.cristal-card.energia { border-color:#ff78f050; box-shadow:0 0 20px #ff78f040; }

/* -----------------------------------------
   ANIMAÇÕES
----------------------------------------- */
@keyframes fadeInUp {
    0% { opacity:0; transform: translateY(40px); }
    100% { opacity:1; transform: translateY(0); }
}

@keyframes fadeSlide {
    0% { opacity:0; transform: translateY(40px); }
    100% { opacity:1; transform: translateY(0); }
}

@keyframes fadeIn {
    0% { opacity:0; transform: translateY(20px); }
    100% { opacity:1; transform: translateY(0); }
}

/* -----------------------------------------
   RESPONSIVO
----------------------------------------- */
@media (max-width: 768px) {
    .hero h1, .universo-hero h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .card, .cristal-card, .terra-card { width: 90%; }
}

@media (max-width: 600px) {
    .hero p, .universo-hero p { font-size: 1rem; }
}