/* =====================================================================
   base.css — estilos compartilhados entre index.html e lucky.html
   (variáveis de cor, fundo animado, estrelas, orbs e navbar)
   ===================================================================== */

:root{
  --bg-deep:#05070f;
  --bg-mid:#0c1326;
  --bg-mid2:#121a33;
  --cyan:#7fe3ec;
  --cyan-dim:rgba(127,227,236,.32);
  --gold:#f0c878;
  --gold-soft:rgba(240,200,120,.45);
  --purple:#4a3a78;
  --ink:#eef4f6;
  --ink-dim:rgba(238,244,246,.55);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}

/* ---------- fundo animado ---------- */

.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, var(--bg-mid2) 0%, transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 100%, var(--purple) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: bgDrift 26s ease-in-out infinite;
}

@keyframes bgDrift{
  0%{ background-position: 50% 30%, 50% 100%, 0 0; }
  50%{ background-position: 56% 24%, 46% 96%, 0 0; }
  100%{ background-position: 50% 30%, 50% 100%, 0 0; }
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
  animation:float 14s ease-in-out infinite;
}
.orb1{ width:320px; height:320px; left:8%; top:18%; background:var(--cyan); animation-delay:0s;}
.orb2{ width:260px; height:260px; right:10%; top:30%; background:var(--purple); animation-delay:-5s;}
.orb3{ width:380px; height:380px; left:38%; bottom:-10%; background:#2a4a6b; animation-delay:-9s;}

@keyframes float{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  33%{ transform:translateY(-26px) translateX(12px) scale(1.06); }
  66%{ transform:translateY(10px) translateX(-16px) scale(.96); }
}

.stars{ position:absolute; inset:0; }
.star{
  position:absolute;
  width:2px; height:2px;
  background:var(--ink);
  border-radius:50%;
  opacity:.5;
  animation:twinkle 3.5s ease-in-out infinite, drift 22s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.15; }
  50%{ opacity:.85; }
}
@keyframes drift{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(var(--dx,6px),var(--dy,-6px)); }
}

/* ---------- navbar ---------- */

.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(5,7,15,.72) 0%, rgba(5,7,15,0) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.nav-brand{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(15px,2.4vh,19px);
  color:var(--ink);
  letter-spacing:.03em;
  text-decoration:none;
  opacity:.9;
  transition:color .4s var(--ease), text-shadow .4s var(--ease);
  text-shadow:0 0 12px var(--cyan-dim);
  white-space:nowrap;
}
.nav-brand:hover{ color:var(--gold); text-shadow:0 0 14px var(--gold-soft); }

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(10px,2.4vw,26px);
  list-style:none;
  margin:0;
  padding:0;
}

.nav-link{
  position:relative;
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
  font-size:clamp(12px,1.6vh,14px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-decoration:none;
  padding:6px 2px;
  cursor:pointer;
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-soft);
  transition:right .35s var(--ease);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ right:0; }
.nav-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.nav-link.active{ color:var(--gold); }
.nav-link.active::after{ right:0; }

@media (max-width:420px){
  .navbar{ padding:12px 14px; }
  .nav-links{ gap:12px; }
}