/* Cyberpunk / Neon + Glassmorphism additions for the homepage */

:root {
  --neon-pink: #ff2da6;
  --neon-cyan: #00e5ff;
  --neon-violet: #7c4dff;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
}

/* Background layers */
.cyber-hero { position: relative; overflow: hidden; }
.bg-webgl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.bg-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; }

/* Scanlines + glow sweep overlay */
.scanlines { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.045) 0px,
      rgba(255,255,255,0.045) 1px,
      transparent 2px,
      transparent 3px
    );
  mix-blend-mode: soft-light; opacity: .25;
}
.scanlines::after { content: ""; position: absolute; left: -30%; right: -30%; top: -20%; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  filter: blur(10px); animation: sweep 6.5s ease-in-out infinite;
}
@keyframes sweep { 0%{ transform: translateY(-120%) rotate(8deg); } 60%{ transform: translateY(120%) rotate(8deg);} 100%{ transform: translateY(120%) rotate(8deg);} }

/* Parallax neon shapes */
.parallax { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plx { position: absolute; filter: blur(8px) saturate(130%); opacity: 0.75; }
.blob { left: 6%; top: 12%; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), var(--neon-cyan));
  box-shadow: 0 0 120px var(--neon-cyan);
}
.ring { right: 8%; bottom: 18%; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, var(--neon-pink) 42%, transparent 55%);
  box-shadow: 0 0 90px var(--neon-pink);
}
.shard { right: 20%; top: 8%; width: 140px; height: 220px; transform: rotate(28deg);
  background: linear-gradient(135deg, var(--neon-violet), transparent);
  clip-path: polygon(0 0, 100% 12%, 74% 100%, 16% 100%);
  box-shadow: 0 0 80px var(--neon-violet);
}
.neon-cyan { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), var(--neon-cyan)); box-shadow: 0 0 120px var(--neon-cyan); }
.neon-pink { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), var(--neon-pink)); box-shadow: 0 0 120px var(--neon-pink); }
.neon-violet { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), var(--neon-violet)); box-shadow: 0 0 120px var(--neon-violet); }

/* Neon title */
.neon-title { text-shadow: 0 0 12px rgba(0,229,255,.5), 0 0 28px rgba(124,77,255,.35); }

/* Glassmorphism panel */
.glass { background: rgba(15,16,25,0.55); border: 1px solid var(--glass-border); border-radius: 16px; backdrop-filter: saturate(130%) blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.hero-cta { margin: 20px auto 0; max-width: 760px; padding: 16px; display: grid; gap: 12px; align-items: center; }
.hero-cta .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-cta .cta-inputs { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* 3D/neo buttons */
.btn-neo { position: relative; background: linear-gradient(135deg, rgba(124,77,255,.3), rgba(0,229,255,.3)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 20px rgba(124,77,255,.35), inset 0 0 0 1px rgba(255,255,255,.06); transform-style: preserve-3d; }
.btn-neo::after { content: ""; position: absolute; inset: -2px; border-radius: 14px; pointer-events: none; background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(0,229,255,.25), transparent 60%); filter: blur(10px); opacity: .66; transition: opacity .2s var(--ease); }
.btn-neo:hover::after { opacity: .9; }
.btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(0,229,255,.35); box-shadow: inset 0 0 24px rgba(0,229,255,.12); }
.btn.pulse { animation: pulse .26s ease-out; }
@keyframes pulse { 60% { transform: translateY(-1px) scale(1.03); } 100% { transform: none; } }

/* Ripple */
[data-ripple] { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0); background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 60%); animation: ripple .6s ease-out forwards; pointer-events: none; mix-blend-mode: screen; }
@keyframes ripple { to { transform: translate(-50%,-50%) scale(8); opacity: 0; } }

/* Sweep input */
.sweep { position: relative; display: inline-flex; align-items: center; }
.sweep input { appearance: none; outline: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--fg); padding: 10px 12px; border-radius: 12px; min-width: 220px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.sweep:focus-within input { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.18), 0 10px 30px rgba(0,229,255,.18); }
.sweep::after { content: ""; position: absolute; left: -20%; right: -20%; height: 140%; top: -20%; background: linear-gradient(120deg, rgba(255,255,255,.28), rgba(255,255,255,0) 25%); border-radius: 16px; transform: translateX(-120%) skewX(-8deg); opacity: 0; pointer-events: none; }
.sweep:focus-within::after { animation: sweep-x 1.1s ease-out forwards; }
@keyframes sweep-x { to { transform: translateX(140%) skewX(-8deg); opacity: 1; } }

/* Liquid progress demo */
.liquid-progress { --p: 28; position: relative; width: 220px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.liquid-progress .liquid { position: absolute; inset: 0; width: calc(var(--p) * 1%); background:
  radial-gradient(12px 18px at 10% 50%, rgba(0,229,255,.9), rgba(124,77,255,.7)),
  linear-gradient(90deg, rgba(0,229,255,.9), rgba(124,77,255,.9));
  box-shadow: 0 0 18px rgba(0,229,255,.4);
  animation: flow 2.5s linear infinite;
}
@keyframes flow { 0% { background-position: 0 0, 0 0; } 100% { background-position: 40px 0, 220px 0; } }

/* Position updates for canvases */
.hero .bg-stars, .hero .bg-webgl { position: absolute; inset: 0; width: 100%; height: 100%; }