/* ===========================================================
   Angelo Venturi — sistema visual cinematográfico
   Dark #05060C · ciano #16E0FF · lima #B6FF3C · violeta #8A5CFF
   =========================================================== */

:root{
  --bg:#05060C;
  --bg-2:#080A13;
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.028);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --txt:#F3F5FC;
  --mut:#98A1BC;
  --mut-2:#6C7591;
  --cyan:#16E0FF;
  --blue:#3A7BFF;
  --violet:#8A5CFF;
  --lime:#B6FF3C;
  --ink:#05060C;

  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow:0 24px 60px -22px rgba(0,0,0,.85);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ===== Ambiente cinematográfico ===== */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx .rays{
  position:absolute;top:-30%;left:50%;width:160vmax;height:160vmax;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.020) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 72%);
          mask-image:radial-gradient(closest-side,#000 0%,transparent 72%);
  animation:av-spin 140s linear infinite;opacity:.65;
}
.fx .aurora{position:absolute;border-radius:50%;filter:blur(78px);opacity:.5;mix-blend-mode:screen}
.fx .a1{width:60vmax;height:60vmax;top:-24vmax;left:6vmax;background:radial-gradient(circle,var(--blue),transparent 62%);animation:av-d1 24s ease-in-out infinite alternate}
.fx .a2{width:50vmax;height:50vmax;top:-12vmax;right:-12vmax;background:radial-gradient(circle,var(--violet),transparent 62%);animation:av-d2 28s ease-in-out infinite alternate}
.fx .a3{width:46vmax;height:46vmax;bottom:-24vmax;left:-10vmax;background:radial-gradient(circle,var(--cyan),transparent 62%);animation:av-d3 32s ease-in-out infinite alternate}
.fx .gridlines{
  position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);
}
@keyframes av-spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes av-d1{to{transform:translate(6vmax,8vmax) scale(1.12)}}
@keyframes av-d2{to{transform:translate(-7vmax,6vmax) scale(1.08)}}
@keyframes av-d3{to{transform:translate(5vmax,-6vmax) scale(1.14)}}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(0,0,0,.55) 100%);
}
.cursor{
  position:fixed;z-index:2;width:420px;height:420px;border-radius:50%;pointer-events:none;left:0;top:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(22,224,255,.085),transparent 60%);
  transition:opacity .5s;opacity:0;will-change:transform;
}

/* ===== Loader ===== */
.loader{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader.done{opacity:0;visibility:hidden}
.loader__mark{
  font-family:var(--f-display);font-weight:700;letter-spacing:9px;font-size:14px;
  color:var(--txt);opacity:0;animation:av-fade .8s .12s forwards;padding-left:9px;
}
.loader__bar{width:170px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loader__bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  animation:av-fill 1.15s .08s var(--ease) forwards;
}
@keyframes av-fill{to{width:100%}}
@keyframes av-fade{to{opacity:1}}

/* ===== Reveal =====
   Só esconde quando o JS está ativo (html.js). Sem JS — ou se o script
   falhar — o conteúdo aparece normalmente em vez de ficar invisível. */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* ===== Utilitários ===== */
.eyebrow{
  font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--mut);
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--txt);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:14.5px;
  padding:14px 24px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .25s,background .25s,border-color .25s;
}
.btn--primary{
  background:linear-gradient(120deg,var(--cyan),var(--blue) 60%,var(--violet));
  color:var(--ink);box-shadow:0 12px 34px -12px rgba(22,224,255,.65);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(22,224,255,.8)}
.btn--ghost{background:rgba(255,255,255,.045);border-color:var(--line);color:var(--txt)}
.btn--ghost:hover{transform:translateY(-2px);border-color:rgba(22,224,255,.45);background:rgba(255,255,255,.075)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}