/* Lightweight Stripe-inspired motion layer shared by both languages. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -22%;
  background:
    radial-gradient(circle at 28% 38%, rgba(249, 200, 9, .38), transparent 24%),
    radial-gradient(circle at 70% 30%, rgba(114, 48, 255, .34), transparent 28%),
    radial-gradient(circle at 62% 72%, rgba(255, 82, 181, .20), transparent 24%),
    radial-gradient(circle at 35% 68%, rgba(83, 215, 255, .18), transparent 22%);
  filter: blur(34px) saturate(120%);
  opacity: .68;
  transform: translate3d(0, 0, 0) rotate(-4deg) scale(1.02);
  animation: stripeMesh 18s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  pointer-events: none;
  will-change: transform;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .26;
  background-image:
    linear-gradient(rgba(94, 23, 235, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 23, 235, .28) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent 85%);
  pointer-events: none;
}

.glow-one {
  animation: stripeOrbOne 12s ease-in-out infinite alternate;
  will-change: transform;
}

.glow-two {
  animation: stripeOrbTwo 15s ease-in-out infinite alternate;
  will-change: transform;
}

.eyebrow,
.hero h1,
.hero-copy {
  opacity: 0;
  animation: stripeReveal .68s cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: transform, opacity;
}

.eyebrow { animation-delay: .02s; }
.hero h1 { animation-delay: .08s; }
.hero-copy { animation-delay: .16s; }

.hero h1 .hero-accent {
  background: none !important;
  background-image: none !important;
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple);
}

.hero h1 {
  line-height: 1.08;
}

.language-selector.open .language-btn .flag-icon {
  transform: none !important;
}

@media (min-width: 821px) {
  .hero h1 .hero-line + .hero-line {
    margin-top: .055em;
  }
}

.navbar::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .11) 48%, transparent 70%);
  background-size: 220% 100%;
  animation: stripeSheen 10s ease-in-out infinite;
  pointer-events: none;
}

.cta {
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.cta::before {
  transform-origin: center;
  animation: liveStatusBreath 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform, box-shadow;
}

@keyframes stripeMesh {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(1.02); }
  50% { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.09); }
  100% { transform: translate3d(-1%, 5%, 0) rotate(5deg) scale(1.05); }
}

@keyframes stripeOrbOne {
  from { transform: translate3d(-20px, -10px, 0) scale(1); }
  to { transform: translate3d(72px, 38px, 0) scale(1.18); }
}

@keyframes stripeOrbTwo {
  from { transform: translate3d(20px, 18px, 0) scale(1.03); }
  to { transform: translate3d(-76px, -44px, 0) scale(1.22); }
}

@keyframes stripeReveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes stripeSheen {
  0%, 68%, 100% { background-position: 160% 0; opacity: 0; }
  76% { opacity: 1; }
  90% { background-position: -70% 0; opacity: 0; }
}

@keyframes liveStatusBreath {
  0%, 100% {
    transform: scale(.9);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12), 0 0 5px rgba(34, 197, 94, .18);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .20), 0 0 12px rgba(34, 197, 94, .46);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .glow,
  .eyebrow,
  .hero h1,
  .hero-copy,
  .navbar::after,
  .cta::before {
    animation: none !important;
  }

  .eyebrow,
  .hero h1,
  .hero-copy {
    opacity: 1;
    transform: none;
  }

}