/* LetterGlitch — pairs with frontend/components/LetterGlitch.js */

.home-hero {
  position: relative;
}

.letter-glitch {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(4.5rem, 12vw, 6.5rem);
  margin: 0 auto 12px;
  padding: 8px 12px 16px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-xl, 18px);
}

.letter-glitch__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.letter-glitch > .home-hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 100%;
  text-align: center;
  pointer-events: none;
}

/* Center vignette: soften the middle so the title reads clearly */
.letter-glitch--center-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 65% at 50% 45%,
    rgba(9, 9, 11, 0.55) 0%,
    transparent 62%
  );
}

/* Outer vignette: darken edges */
.letter-glitch--outer-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 35%, rgba(9, 9, 11, 0.75) 100%);
}

[data-theme='light'] .letter-glitch--center-vignette::before {
  background: radial-gradient(
    ellipse 70% 65% at 50% 45%,
    rgba(255, 255, 255, 0.72) 0%,
    transparent 62%
  );
}

[data-theme='light'] .letter-glitch--outer-vignette::after {
  background: radial-gradient(
    ellipse 95% 90% at 50% 50%,
    transparent 35%,
    rgba(255, 255, 255, 0.85) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .letter-glitch__canvas {
    opacity: 0.25;
  }
}