/* =====================================================================
   Viper Softworks — custom styles
   Tokens are defined in the inlined Tailwind config (see functions.php).
   ===================================================================== */

html, body { background:#0B0B0E; color:#ECECEC; }
body { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }

.grid-bg {
  background-image:
    radial-gradient(900px 500px at 20% -10%, rgba(79,124,255,0.12), transparent 60%),
    radial-gradient(600px 400px at 90% 10%, rgba(79,124,255,0.06), transparent 60%),
    linear-gradient(to bottom, #0B0B0E 0%, #08080A 100%);
}
.hairline { border-color: rgba(255,255,255,0.08); }
.hairline-strong { border-color: rgba(255,255,255,0.14); }
.accent-text { color: #4F7CFF; }
.accent-underline {
  background-image: linear-gradient(transparent 70%, rgba(79,124,255,0.35) 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ------------- VIPER MOTIF ------------- */

.snake-img { }
.snake-img-flip { transform: scaleX(-1); }

/* logo aura — shape-hugging glow via stacked drop-shadow filters */
@keyframes logo-aura-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,0.55))
      drop-shadow(0 0 8px rgba(220,230,255,0.40))
      drop-shadow(0 0 18px rgba(140,170,255,0.30))
      drop-shadow(0 0 32px rgba(79,124,255,0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,0.70))
      drop-shadow(0 0 14px rgba(220,230,255,0.55))
      drop-shadow(0 0 26px rgba(140,170,255,0.40))
      drop-shadow(0 0 44px rgba(79,124,255,0.28));
  }
}
.logo-aura {
  animation: logo-aura-pulse 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .logo-aura {
    animation: none;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,0.6))
      drop-shadow(0 0 14px rgba(140,170,255,0.4))
      drop-shadow(0 0 28px rgba(79,124,255,0.25));
  }
}

@keyframes snake-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.snake-rise { animation: snake-rise 1.4s cubic-bezier(.2,.7,.2,1) .2s both; }

/* viper-skin diamond pattern for cards */
.scales { position: relative; }
.scales::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(79,124,255,0.10) 1px, transparent 1.6px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity .35s ease;
}
.scales:hover::before { opacity: 0.55; }

.scales-chevron::before {
  background-image:
    linear-gradient(135deg, rgba(79,124,255,0.07) 25%, transparent 25%) -1px 0,
    linear-gradient(225deg, rgba(79,124,255,0.07) 25%, transparent 25%) -1px 0;
  background-size: 12px 12px;
  background-color: transparent;
  opacity: 0.55;
}
.scales-chevron:hover::before { opacity: 0.85; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)), #101015;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}
.card-hover { transition: border-color .3s ease, box-shadow .3s ease; }
.card-hover:hover {
  border-color: rgba(79,124,255,0.35);
  box-shadow: 0 0 0 1px rgba(79,124,255,0.18), 0 10px 40px -10px rgba(79,124,255,0.18);
}

.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .6rem;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:9999px;
  font-size:.72rem; letter-spacing:.04em;
  color:#ECECEC; background:rgba(255,255,255,0.02);
}
.chip-dot { width:.4rem; height:.4rem; border-radius:9999px; background:#4F7CFF; box-shadow:0 0 12px rgba(79,124,255,0.7); }

/* sine-wave divider */
@keyframes slither {
  from { background-position-x: 0; }
  to   { background-position-x: 1200px; }
}
.divider-snake {
  height: 40px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 1200px 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 20 Q 75 4 150 20 T 300 20 T 450 20 T 600 20 T 750 20 T 900 20 T 1050 20 T 1200 20' fill='none' stroke='%234F7CFF' stroke-width='1' opacity='0.45'/></svg>");
  animation: slither 30s linear infinite;
  opacity: .7;
}

/* fang bullet */
.fang::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 10px;
  transform: rotate(45deg) translateY(1px);
  background: linear-gradient(135deg, #4F7CFF 0%, #4F7CFF 50%, transparent 50%);
  border-radius: 1px;
}

.kbd {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: .68rem;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  color:#ECECEC;
  padding:.05rem .35rem;
  border-radius:6px;
}
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

details summary::-webkit-details-marker { display:none; }
details summary { list-style:none; cursor:pointer; }