/* theme.css — Identidade visual única do Jardim dos Arcanos
   Referência: tarotcards.io (preto absoluto, serifada editorial, gradiente arcano)
   Compartilhado por index.html (landing) e espaco-zen.html (Espaço Zen). */

:root {
    /* Base */
    --color-bg: #000000;
    --color-surface: #0e0e11;
    --color-surface-raised: #17171b;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.22);

    /* Text */
    --color-text: #ffffff;
    --color-text-muted: #a3a3ac;
    --color-text-dim: #6c6c76;

    /* The arcane gradient — violet through periwinkle to cyan.
       Every accent in the product is a point along this single gradient. */
    --accent-violet: #b388ff;
    --accent-blue: #7c9bff;
    --accent-cyan: #22d3ee;
    --gradient-arcane: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-blue) 55%, var(--accent-cyan) 100%);

    --color-danger: #ff5c5c;

    --font-display: 'Lora', serif;
    --font-body: 'Montserrat', sans-serif;

    --transition-smooth: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --ease-organic: cubic-bezier(0.34, 1.56, 0.4, 1);
}

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

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    position: relative;
}

/* Film-grain across the whole canvas — one global texture instead of one per box */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
}

p {
    text-align: justify;
    text-wrap: pretty;
    hyphens: auto;
}

/* Ambient arcane blobs — a nebula breathing on black, not a flat radial glow */
.background-animation {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.background-animation::before,
.background-animation::after {
    content: '';
    position: absolute;
    background: var(--gradient-arcane);
    filter: blur(90px);
    opacity: 0.16;
    will-change: transform;
}

.background-animation::before {
    width: 44vw;
    height: 44vw;
    max-width: 580px;
    max-height: 580px;
    top: -10%;
    left: -8%;
    border-radius: 58% 42% 38% 62% / 55% 48% 52% 45%;
    animation: blobFloatA 24s ease-in-out infinite alternate;
}

.background-animation::after {
    width: 38vw;
    height: 38vw;
    max-width: 500px;
    max-height: 500px;
    bottom: -12%;
    right: -6%;
    opacity: 0.12;
    border-radius: 42% 58% 62% 38% / 40% 62% 38% 60%;
    animation: blobFloatB 28s ease-in-out infinite alternate;
}

/* Only `transform` animates here — it's compositor-only (GPU, no repaint).
   The old version also animated `border-radius` every frame, which forces a
   repaint of the blurred shape each frame; harmless on its own, but it competes
   with Lenis for the main thread during scroll and was the main source of the
   jank reported after smooth-scroll was added. Shape now stays static (still
   irregular/organic, just doesn't morph), movement/pulse stays fully alive. */
@keyframes blobFloatA {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(3%, 4%) scale(1.08); }
    100% { transform: translate(-2%, 2%) scale(0.97); }
}

@keyframes blobFloatB {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-4%, -3%) scale(1.1); }
    100% { transform: translate(2%, -2%) scale(0.95); }
}

/* Movimento reduzido: a nebulosa congela no primeiro frame (as manchas de cor
   e o grain continuam — é a MESMA atmosfera, apenas parada). Animações
   funcionais de cada página (ex.: guia de respiração do Espaço Zen) não
   passam por aqui de propósito: são conteúdo, não decoração. */
@media (prefers-reduced-motion: reduce) {
    .background-animation::before,
    .background-animation::after {
        animation: none;
    }
}

/* Boxed surface — reserved for functionally bounded UI (forms, inputs), never for content display */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    position: relative;
}

/* Shared buttons */
.btn {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    /* Explícito de propósito: <a class="btn"> herda o line-height 1.6 do body,
       mas <button class="btn"> não herda (controles de formulário usam `normal`).
       Sem isto, um link-botão e um botão lado a lado saem com 5.6px de diferença
       de altura e desalinham na mesma linha. */
    line-height: 1.25;
    padding: 0.85rem 2.1rem;
    /* Borda transparente em vez de `none`: a variante .secondary tem borda
       visível de 1.5px, e sem esta reserva ela ficaria 3px mais alta que a
       .primary quando as duas dividem a mesma linha. */
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-text);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.btn.primary {
    background: var(--gradient-arcane);
    color: #050506;
    box-shadow: 0 12px 30px -10px rgba(124, 155, 255, 0.4);
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -10px rgba(124, 155, 255, 0.5);
}

.btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px -8px rgba(124, 155, 255, 0.4);
}

.btn.secondary {
    background: transparent;
    border-color: var(--color-border-strong);
}

.btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.btn.secondary:active {
    transform: translateY(0);
}

.hidden { display: none !important; }

/* Scrollbar */
html {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }