/* ===== DEPTH STACK — multi-layer scene composition =====
   Background → Glow → Pattern → Illustration → Cards → Particles → Content
*/

.depth-stack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.depth-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.depth-layer--bg {
  z-index: var(--z-depth-bg);
}

.depth-layer--glow {
  z-index: var(--z-depth-glow);
}

.depth-layer--pattern {
  z-index: var(--z-depth-pattern);
}

.depth-layer--illustration {
  z-index: var(--z-depth-illustration);
}

.depth-layer--particles {
  z-index: var(--z-depth-particles);
  overflow: hidden;
}

.depth-layer--content {
  position: relative;
  z-index: var(--z-depth-content);
}

/* Hero & marquee content wrappers only — not .container */
.hero.depth-stack > .depth-layer--content,
.marquee.depth-stack > .depth-layer--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* Section containers stay constrained and above decor layers */
.depth-stack > .container {
  position: relative;
  z-index: var(--z-depth-content);
  width: var(--container-width);
  margin-inline: auto;
}

.depth-stack > .cta__content {
  position: relative;
  z-index: var(--z-depth-content);
}

/* Glow orbs */
.depth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform, opacity;
  animation: depth-glow-drift 14s ease-in-out infinite;
}

.depth-glow--hero-left {
  width: min(560px, 55vw);
  height: min(560px, 55vw);
  top: -18%;
  left: -12%;
  background: rgba(37, 99, 235, 0.42);
}

.depth-glow--hero-right {
  width: min(480px, 48vw);
  height: min(480px, 48vw);
  top: 8%;
  right: -10%;
  background: rgba(124, 58, 237, 0.32);
  animation-delay: -4s;
}

.depth-glow--hero-center {
  width: min(320px, 35vw);
  height: min(320px, 35vw);
  bottom: 10%;
  left: 38%;
  background: rgba(6, 182, 212, 0.22);
  animation-delay: -7s;
}

.depth-glow--left {
  width: min(420px, 45vw);
  height: min(420px, 45vw);
  top: -10%;
  left: -8%;
  background: rgba(37, 99, 235, 0.28);
}

.depth-glow--right {
  width: min(380px, 40vw);
  height: min(380px, 40vw);
  bottom: -12%;
  right: -6%;
  background: rgba(124, 58, 237, 0.22);
  animation-delay: -5s;
}

.depth-glow--center {
  width: min(300px, 32vw);
  height: min(300px, 32vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(6, 182, 212, 0.14);
  animation-delay: -3s;
}

.depth-glow--light {
  filter: blur(80px);
  opacity: 0.85;
}

.depth-glow--light.depth-glow--center {
  background: rgba(37, 99, 235, 0.1);
}

.depth-glow--light.depth-glow--right {
  background: rgba(6, 182, 212, 0.08);
}

/* Patterns */
.depth-pattern--grid-dark {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 15%, transparent 72%);
  animation: depth-pattern-drift 40s linear infinite;
}

.depth-pattern--grid-light {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 78%);
}

.depth-pattern--dots-light {
  background-image: radial-gradient(rgba(37, 99, 235, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, black 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 95%);
}

.depth-pattern--dots-dark {
  background-image: radial-gradient(rgba(96, 165, 250, 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
}

/* Floating particles */
.depth-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.75);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.55);
  animation: depth-particle-float 7s ease-in-out infinite;
  opacity: 0;
}

.depth-particle--light {
  background: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.35);
}

.depth-particle--sm {
  width: 2px;
  height: 2px;
}

.depth-particle--lg {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.65);
}

/* Elevated cards sit above pattern/glow, below foreground content accents */
.depth-stack .service-card,
.depth-stack .feature-card,
.depth-stack .industry-card,
.depth-stack .tech-card,
.depth-stack .marquee__item {
  position: relative;
  z-index: var(--z-depth-cards);
}

.depth-stack .hero__visual,
.depth-stack .about__visual {
  position: relative;
  z-index: var(--z-depth-illustration);
}

.depth-stack .hero__text,
.depth-stack .about__content {
  position: relative;
  z-index: var(--z-depth-content);
}

.depth-stack .about__decor {
  z-index: var(--z-depth-illustration);
}

.depth-stack .marquee__track-wrap {
  position: relative;
  z-index: var(--z-depth-content);
}

.depth-stack .marquee__header {
  position: relative;
  z-index: var(--z-depth-content);
}

@media (max-width: 768px) {
  .depth-glow {
    filter: blur(48px);
    opacity: 0.7;
  }

  .depth-pattern--grid-dark,
  .depth-pattern--grid-light {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-glow,
  .depth-pattern--grid-dark,
  .depth-particle {
    animation: none;
  }

  .depth-particle {
    opacity: 0.35;
  }
}