/* ==========================================================================
   style.css — base compartilhada por todas as páginas
   (index.html, apresentacao.html, biblioteca.html)

   O que vive aqui: tokens da marca, reset mínimo, lockup de logos e o
   fundo ambiente (blobs, grade, grão, esporos, brilho do mouse).
   Cada página carrega este arquivo primeiro e o CSS próprio depois.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#05070d; --ink2:#0b101c; --bg:var(--ink);
  --panel:rgba(11,16,28,.82); --line:rgba(232,236,245,.11);
  --text:#e8ecf5; --muted:#8b95ab;
  --accent:#4f8cff; --accent2:#2dd4bf; --warn:#f5b74b; --ok:#7ce38b;
  --fd:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --fb:"Inter",ui-sans-serif,system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Reset mínimo ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}

/* ---------- Lockup de logos ----------
   <a class="logos" data-logos><img src="img/claude-logo.svg"><span class="plus">+</span><img src="img/obsidian-logo.svg"></a>
   Altura via --logo-h. js/main.js esconde a imagem que não carregar (e o "+" se sobrar só uma). */
.logos{display:flex;align-items:center;gap:.7em;color:inherit;text-decoration:none}
.logos img{height:var(--logo-h,26px);width:auto;opacity:.92;transition:opacity .2s}
.logos .plus{color:var(--muted);font-family:var(--fm);font-size:clamp(12px,1vw,15px)}
.logos[hidden],.logos [hidden]{display:none}
a.logos:hover img{opacity:1}

/* ---------- Fundo ambiente ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.28;mix-blend-mode:screen;will-change:transform}
.b1{width:60vmax;height:60vmax;top:-25vmax;left:-15vmax;background:radial-gradient(circle,var(--accent),transparent 62%);animation:d1 32s ease-in-out infinite alternate}
.b2{width:55vmax;height:55vmax;bottom:-28vmax;right:-12vmax;background:radial-gradient(circle,var(--accent2),transparent 62%);animation:d2 38s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(22vw,18vh) scale(1.15)}}
@keyframes d2{to{transform:translate(-18vw,-22vh) scale(1.2)}}
.grid{position:absolute;inset:-40vh -20vw;background:linear-gradient(rgba(232,236,245,.05) 1px,transparent 1px) 0 0/100% 4.5vh,linear-gradient(90deg,rgba(232,236,245,.05) 1px,transparent 1px) 0 0/4.5vh 100%;transform:perspective(60vh) rotateX(64deg) translateY(-8vh);transform-origin:50% 100%;mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent 65%);animation:gridflow 8s linear infinite}
@keyframes gridflow{to{background-position:0 4.5vh,4.5vh 0}}
.grain{position:absolute;inset:-100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.06;animation:grain 1.4s steps(6) infinite;pointer-events:none}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-4%,-1%)}100%{transform:translate(0,0)}}
.spores{position:absolute;inset:0;pointer-events:none}
.spores i{position:absolute;bottom:-4vh;left:var(--x);width:3px;height:3px;border-radius:50%;background:var(--accent2);opacity:0;animation:spore var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes spore{0%{transform:translateY(0);opacity:0}10%{opacity:.6}90%{opacity:.35}100%{transform:translateY(-110vh) translateX(var(--sway));opacity:0}}
.glow{position:fixed;left:0;top:0;width:40vmax;height:40vmax;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(79,140,255,.13),transparent 60%);mix-blend-mode:screen;transition:transform .12s ease-out}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}