:root {
  --graphics-grid-size: 72px;
  --graphics-grid-color: rgba(89, 210, 186, 0.06);
  --graphics-glow-cool: rgba(89, 210, 186, 0.18);
  --graphics-glow-warm: rgba(59, 142, 200, 0.14);
  --graphics-divider-line: rgba(255, 255, 255, 0.06);
  --graphics-divider-cool: rgba(89, 210, 186, 0.16);
  --graphics-dot: rgba(159, 237, 224, 0.82);
}

.graphics-shell {
  position: relative;
  isolation: isolate;
}

.graphics-shell > * {
  position: relative;
  z-index: 1;
}

.graphics-shell::before,
.graphics-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.graphics-shell::before {
  inset: 0;
  background:
    linear-gradient(var(--graphics-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--graphics-grid-color) 1px, transparent 1px);
  background-size: var(--graphics-grid-size, 72px) var(--graphics-grid-size, 72px);
  opacity: var(--graphics-grid-opacity, 0.16);
  mask-image: var(
    --graphics-grid-mask,
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(0, 0, 0, 0.9) 16%,
      rgba(0, 0, 0, 0.76) 80%,
      transparent 100%
    )
  );
}

.graphics-shell::after {
  inset: var(--graphics-glow-inset, -44% auto auto 56%);
  width: var(--graphics-glow-size, 320px);
  height: var(--graphics-glow-size, 320px);
  background: radial-gradient(circle, var(--graphics-glow-color, var(--graphics-glow-cool)) 0%, transparent 70%);
  opacity: var(--graphics-glow-opacity, 0.68);
  filter: blur(var(--graphics-glow-blur, 10px));
  animation: Ovvra GraphicsDrift var(--graphics-drift-duration, 18s) ease-in-out infinite alternate;
}

.graphics-shell--hero {
  --graphics-grid-size: 64px;
  --graphics-grid-opacity: 0.28;
  --graphics-glow-size: 250px;
  --graphics-glow-opacity: 0.76;
  --graphics-glow-blur: 12px;
  --graphics-drift-duration: 20s;
}

.graphics-shell--section {
  --graphics-grid-size: 88px;
  --graphics-grid-opacity: 0.14;
  --graphics-glow-size: 300px;
  --graphics-glow-opacity: 0.54;
  --graphics-drift-duration: 22s;
}

.graphics-shell--soft {
  --graphics-grid-opacity: 0.1;
  --graphics-glow-size: 220px;
  --graphics-glow-opacity: 0.42;
  --graphics-glow-blur: 8px;
}

.graphics-shell--warm {
  --graphics-glow-color: var(--graphics-glow-warm);
}

.graphics-shell--left {
  --graphics-glow-inset: -40% auto auto -6%;
}

.graphics-shell--tight-grid {
  --graphics-grid-size: 60px;
}

.section-transition {
  position: relative;
  isolation: isolate;
}

.section-transition > * {
  position: relative;
  z-index: 1;
}

.section-transition::before,
.section-transition::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

.section-transition::before {
  top: var(--section-transition-top, -46px);
  height: var(--section-transition-height, 188px);
  background:
    radial-gradient(circle at var(--section-glow-x, 74%) 26%, var(--section-glow-color, rgba(126, 198, 192, 0.14)) 0%, transparent 28%),
    radial-gradient(circle at var(--section-warm-x, 18%) 0%, var(--section-warm-color, rgba(59, 142, 200, 0.08)) 0%, transparent 34%),
    linear-gradient(180deg, rgba(126, 198, 192, 0.028), rgba(126, 198, 192, 0));
  opacity: var(--section-transition-opacity, 0.78);
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.9) 14%,
    rgba(0, 0, 0, 0.76) 72%,
    transparent 100%
  );
}

.section-transition::after {
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--graphics-divider-cool) 18%,
    var(--graphics-divider-line) 50%,
    rgba(126, 198, 192, 0.12) 78%,
    transparent 100%
  );
  opacity: 0.9;
}

.section-transition--quiet {
  --section-transition-opacity: 0.56;
  --section-transition-height: 160px;
}

.section-transition--cool-left {
  --section-glow-x: 24%;
  --section-warm-x: 82%;
}

.section-transition--warm {
  --section-glow-color: rgba(59, 142, 200, 0.1);
  --section-warm-color: rgba(89, 210, 186, 0.06);
}

.micro-accent-card {
  position: relative;
  overflow: hidden;
}

.micro-accent-card > * {
  position: relative;
  z-index: 1;
}

.micro-accent-card::before,
.micro-accent-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.micro-accent-card::before {
  top: 18px;
  right: 18px;
  width: min(32%, 118px);
  height: 34px;
  border-top: 1px solid rgba(126, 198, 192, 0.18);
  border-right: 1px solid rgba(126, 198, 192, 0.14);
  border-top-right-radius: 18px;
  opacity: 0.62;
}

.micro-accent-card::after {
  top: 30px;
  right: 30px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--graphics-dot);
  box-shadow: 0 0 0 4px rgba(156, 232, 225, 0.08), 0 0 12px rgba(156, 232, 225, 0.14);
  opacity: 0.72;
}

.micro-accent-card--left::before {
  left: 18px;
  right: auto;
  border-left: 1px solid rgba(126, 198, 192, 0.14);
  border-right: 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 0;
}

.micro-accent-card--left::after {
  left: 30px;
  right: auto;
}

@keyframes Ovvra GraphicsDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-12px, 10px, 0);
  }
}

@media (max-width: 719px) {
  .graphics-shell--hero {
    --graphics-glow-size: 188px;
    --graphics-glow-opacity: 0.54;
  }

  .graphics-shell--section {
    --graphics-glow-size: 228px;
    --graphics-glow-opacity: 0.44;
  }

  .section-transition::before {
    top: -30px;
    height: 132px;
    opacity: 0.6;
  }

  .micro-accent-card::before {
    top: 16px;
    right: 16px;
    width: 86px;
    height: 28px;
  }

  .micro-accent-card::after {
    top: 26px;
    right: 26px;
  }

  .micro-accent-card--left::before {
    left: 16px;
  }

  .micro-accent-card--left::after {
    left: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graphics-shell::after {
    animation: none;
  }
}