/* Native-resolution backgrounds plus lightweight transparent light groups. */
.panel-hero::before,
.panel-about::before,
.panel-components::before,
.panel-catalog::before,
.panel-checkout::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: none;
}

.panel-hero::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 15, 0.08), rgba(3, 7, 15, 0.34)),
    url("assets/bg-hero-v2.webp") center / cover no-repeat;
}

.panel-about::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 15, 0.12), rgba(3, 7, 15, 0.4)),
    url("assets/bg-about-v2.webp") center / cover no-repeat;
}

.panel-components::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 15, 0.12), rgba(3, 7, 15, 0.34)),
    url("assets/bg-components-v2.webp") center / cover no-repeat;
}

.panel-catalog::before,
.panel-checkout::before {
  inset: -8px;
  background:
    linear-gradient(180deg, rgba(3, 7, 15, 0.18), rgba(3, 7, 15, 0.08) 48%, rgba(3, 7, 15, 0.36)),
    linear-gradient(90deg, rgba(4, 8, 16, 0.24), transparent 24%, transparent 76%, rgba(4, 8, 16, 0.24)),
    url("assets/cyber-bg-v2.webp") center / cover no-repeat;
}

.how-phase-ambient {
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.5), rgba(3, 8, 18, 0.16) 48%, rgba(3, 8, 18, 0.66)),
    url("assets/bg-how-v2.webp") center / cover no-repeat;
  filter: brightness(0.72) saturate(0.9);
}

.how-phase-ambient::before,
.how-phase-ambient::after {
  display: none !important;
}

.light-group-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.panel-team > .light-group-layer {
  z-index: 0;
}

.panel-reviews > .reviews-shell {
  position: relative;
  z-index: 2;
}

.light-group-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0);
  animation-duration: var(--light-duration, 24s);
  animation-delay: var(--light-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: opacity, filter;
  user-select: none;
  pointer-events: none;
}

.light-group-layer img[data-variant="a"] { animation-name: light-group-a; }
.light-group-layer img[data-variant="b"] { animation-name: light-group-b; }
.light-group-layer img[data-variant="c"] { animation-name: light-group-c; }
.light-group-layer img[data-variant="d"] { animation-name: light-group-d; }

@keyframes light-group-a {
  0%, 100% { opacity: 0.11; filter: brightness(0); }
  16% { opacity: 0.39; filter: brightness(1.28); }
  34% { opacity: 0.15; filter: brightness(0.32); }
  58% { opacity: 0.04; filter: brightness(0); }
  82% { opacity: 0.44; filter: brightness(1.42); }
}

@keyframes light-group-b {
  0%, 100% { opacity: 0.29; filter: brightness(1.05); }
  21% { opacity: 0.07; filter: brightness(0); }
  47% { opacity: 0.36; filter: brightness(1.34); }
  69% { opacity: 0.14; filter: brightness(0.22); }
  91% { opacity: 0.42; filter: brightness(1.38); }
}

@keyframes light-group-c {
  0%, 100% { opacity: 0.06; filter: brightness(0); }
  12% { opacity: 0.1; filter: brightness(0.18); }
  38% { opacity: 0.48; filter: brightness(1.48); }
  61% { opacity: 0.22; filter: brightness(0.7); }
  76% { opacity: 0.03; filter: brightness(0); }
}

@keyframes light-group-d {
  0%, 100% { opacity: 0.24; filter: brightness(0.82); }
  19% { opacity: 0.41; filter: brightness(1.38); }
  43% { opacity: 0.09; filter: brightness(0); }
  64% { opacity: 0.32; filter: brightness(1.12); }
  86% { opacity: 0.14; filter: brightness(0.26); }
}

/* Softer first-screen logo polish: half-strength sweep and gentler honeycomb flow. */
.panel-hero .hero-mobile h1::after {
  animation: hero-logo-metal-sweep-soft 5.6s cubic-bezier(0.45, 0, 0.55, 1) -0.7s infinite;
}

.panel-hero .hero-plaque-flow {
  animation: hero-plaque-honeycomb-flow-soft 6.2s cubic-bezier(0.45, 0, 0.55, 1) -0.4s infinite;
}

.panel-hero .hero-logo-glints i {
  filter: drop-shadow(0 0 2px rgba(180, 229, 255, 0.38)) drop-shadow(0 0 6px rgba(92, 236, 255, 0.16));
  animation-name: hero-logo-point-glint-soft;
  animation-duration: 12.8s;
}

@keyframes hero-logo-metal-sweep-soft {
  0%, 100% {
    opacity: 0;
    background-position: 170% 0;
  }
  12% { opacity: 0.12; }
  40% { opacity: 0.82; }
  70% { opacity: 0.24; }
  88% {
    opacity: 0;
    background-position: -95% 0;
  }
}

@keyframes hero-plaque-honeycomb-flow-soft {
  0%, 100% {
    background-position: 155% 50%;
    filter: brightness(1.01) drop-shadow(0 0 0 rgba(92, 236, 255, 0));
    opacity: 0;
  }
  16% {
    filter: brightness(1.08) drop-shadow(0 0 1px rgba(92, 236, 255, 0.18));
    opacity: 0.12;
  }
  52% {
    filter: brightness(1.2) drop-shadow(0 0 3px rgba(92, 236, 255, 0.52));
    opacity: 0.72;
  }
  80% {
    background-position: -60% 50%;
    filter: brightness(1.08) drop-shadow(0 0 1px rgba(92, 236, 255, 0.18));
    opacity: 0.28;
  }
  92% {
    background-position: -90% 50%;
    filter: brightness(1.01) drop-shadow(0 0 0 rgba(92, 236, 255, 0));
    opacity: 0;
  }
}

@keyframes hero-logo-point-glint-soft {
  0%, 7%, 15%, 100% {
    opacity: 0;
    transform: scale(0.32) rotate(0deg);
  }
  9.4% {
    opacity: 0.36;
    transform: scale(0.72) rotate(14deg);
  }
  12% {
    opacity: 0.12;
    transform: scale(0.54) rotate(24deg);
  }
}

@media (max-width: 1199px) {
  .panel-catalog::before,
  .panel-checkout::before {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-group-layer {
    display: none;
  }
}