/* styles-headers.css
   CSS-only, no assets, minimal perf cost (mostly background-position + opacity) */

/* ---------- Shared neon helpers ---------- */

:root{
  --glowA: rgba(60,255,220,0.55);
  --glowB: rgba(160,90,255,0.55);
  --glowC: rgba(80,140,255,0.45);

  --headerGlass: rgba(8,10,18,0.46);
  --headerEdge: rgba(255,255,255,0.10);

  --titleGradA: rgba(255,255,255,0.98);
  --titleGradB: rgba(60,255,220,0.92);
  --titleGradC: rgba(160,90,255,0.92);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .siteHeader,
  .brandName,
  .heroTitle {
    animation: none !important;
  }
}

/* ---------- Header frame + glow ---------- */

/* Upgrade header background without making it blurry */
.siteHeader{
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(60,255,220,0.10), transparent 60%),
    radial-gradient(640px 240px at 20% 0%, rgba(160,90,255,0.10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.66), rgba(0,0,0,0.10));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 22px rgba(60,255,220,0.10),
    0 0 22px rgba(160,90,255,0.08);
}

/* Optional: subtle “edge shimmer” line */
.siteHeader::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(60,255,220,0.35) 18%,
    rgba(160,90,255,0.30) 50%,
    rgba(80,140,255,0.25) 72%,
    transparent 100%);
  opacity: 0.55;
  pointer-events:none;
}

/* ---------- Brand mark: slightly more “liquid” ---------- */
.brandMark{
  position: relative;
  overflow: hidden;
}

.brandMark::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(from 210deg,
      transparent 0deg,
      rgba(60,255,220,0.22) 70deg,
      rgba(160,90,255,0.22) 160deg,
      rgba(255,255,255,0.16) 210deg,
      transparent 330deg);
  opacity: 0.65;
  transform: rotate(0deg);
  animation: markSpin 6.5s linear infinite;
  pointer-events:none;
}

@keyframes markSpin{
  to { transform: rotate(360deg); }
}

/* ---------- BrandName: neon liquid gradient + shimmer ---------- */

/* Turn brandName into gradient text */
.brandName{
  position: relative;
  font-weight: 800;
  letter-spacing: 0.25px;

  /* gradient fill */
  background: linear-gradient(90deg,
    var(--titleGradA) 0%,
    var(--titleGradB) 35%,
    var(--titleGradC) 70%,
    var(--titleGradA) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* glow */
  text-shadow:
    0 0 12px rgba(60,255,220,0.18),
    0 0 14px rgba(160,90,255,0.16),
    0 10px 22px rgba(0,0,0,0.38);

  animation: brandSweep 4.8s ease-in-out infinite;
}

/* Shimmer sweep (cheap: background-position only) */
@keyframes brandSweep{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle liquid wobble via pseudo element (opacity only) */
.brandName::after{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top: 55%;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(60% 140% at 50% 50%,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.0) 70%);
  opacity: 0.22;
  filter: blur(6px);
  transform: translateY(-50%);
  animation: liquidPulse 3.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes liquidPulse{
  0%,100% { opacity: 0.16; }
  50%     { opacity: 0.30; }
}

/* ---------- Hero title: bigger neon presence ---------- */

.heroTitle{
  position: relative;
  font-weight: 900;
  letter-spacing: 0.15px;

  background: linear-gradient(90deg,
    rgba(255,255,255,0.98) 0%,
    rgba(60,255,220,0.92) 30%,
    rgba(160,90,255,0.92) 62%,
    rgba(255,255,255,0.96) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 18px rgba(60,255,220,0.18),
    0 0 20px rgba(160,90,255,0.16),
    0 16px 34px rgba(0,0,0,0.46);

  animation: heroSweep 5.2s ease-in-out infinite;
}

@keyframes heroSweep{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Optional: scanline shimmer over the hero title (very light) */
.heroTitle::after{
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  top:-10%;
  bottom:-10%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.10) 28%,
    transparent 55%);
  opacity: 0.0;
  transform: translateX(-40%);
  animation: titleScan 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes titleScan{
  0%   { opacity: 0.0; transform: translateX(-40%); }
  35%  { opacity: 0.18; }
  55%  { opacity: 0.0; transform: translateX(40%); }
  100% { opacity: 0.0; transform: translateX(40%); }
}

/* Make hero subtitle slightly cleaner under the stronger title */
.heroSub{
  color: rgba(255,255,255,0.70);
  text-shadow: 0 10px 20px rgba(0,0,0,0.30);
}

/* ---------- Small-screen tuning ---------- */
@media (max-width: 520px){
  .brandName{ font-weight: 850; }
  .heroTitle{ letter-spacing: 0.05px; }
}