/* ===========================
   PARALLAX SYSTEM
   ---------------------------
   Two variants:
   1. Pattern-based (SVG circuit / network) — the original treatment
   2. Image-based (photograph behind vignette) — new for automation imagery
   =========================== */

.parallax {
  position: relative;
  overflow: hidden;
  /* No background-color: let the ribbon show through parallax areas.
     The ::after image + ::before vignette provide visual density. */
}

/* Photo/pattern layer (deepest) */
.parallax::after {
  content: '';
  position: absolute;
  inset: -20% 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Gradient vignette — darkens photo for legibility, sits between photo and ribbon */
.parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 8, 13, 0.55) 0%,
    rgba(8, 8, 13, 0.75) 14%,
    rgba(8, 8, 13, 0.82) 50%,
    rgba(8, 8, 13, 0.75) 86%,
    rgba(8, 8, 13, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.parallax > .container { position: relative; z-index: 3; }

/* ------- SVG pattern backgrounds (retained) ------- */
.parallax-circuit::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%20fill='none'%3E%3Cg%20stroke='%23C8956C'%20stroke-width='0.6'%20opacity='0.32'%3E%3Cpath%20d='M0%20140%20L170%20140%20L190%20160%20L190%20300%20L210%20320%20L440%20320%20L460%20340%20L600%20340'/%3E%3Cpath%20d='M90%200%20L90%2080%20L110%20100%20L260%20100%20L280%20120%20L280%20250'/%3E%3Cpath%20d='M600%20180%20L460%20180%20L440%20160%20L440%2050%20L420%2030%20L300%2030'/%3E%3Cpath%20d='M0%20500%20L140%20500%20L160%20480%20L340%20480%20L360%20500%20L600%20500'/%3E%3Cpath%20d='M500%20600%20L500%20420%20L480%20400%20L340%20400'/%3E%3Cpath%20d='M220%20600%20L220%20520%20L200%20500'/%3E%3C/g%3E%3Cg%20fill='%23C8956C'%20opacity='0.55'%3E%3Ccircle%20cx='170'%20cy='140'%20r='2.5'/%3E%3Ccircle%20cx='190'%20cy='300'%20r='2.5'/%3E%3Ccircle%20cx='460'%20cy='340'%20r='2.5'/%3E%3Ccircle%20cx='110'%20cy='100'%20r='2.5'/%3E%3Ccircle%20cx='280'%20cy='120'%20r='2.5'/%3E%3Ccircle%20cx='440'%20cy='160'%20r='2.5'/%3E%3Ccircle%20cx='440'%20cy='50'%20r='2.5'/%3E%3Ccircle%20cx='160'%20cy='480'%20r='2.5'/%3E%3Ccircle%20cx='360'%20cy='500'%20r='2.5'/%3E%3Ccircle%20cx='480'%20cy='400'%20r='2.5'/%3E%3Ccircle%20cx='340'%20cy='400'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px auto;
  background-repeat: repeat;
}

.parallax-network::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='520'%20height='520'%20fill='none'%3E%3Cg%20stroke='%23C8956C'%20stroke-width='0.5'%20opacity='0.28'%3E%3Cline%20x1='80'%20y1='120'%20x2='260'%20y2='70'/%3E%3Cline%20x1='260'%20y1='70'%20x2='440'%20y2='150'/%3E%3Cline%20x1='80'%20y1='120'%20x2='180'%20y2='270'/%3E%3Cline%20x1='180'%20y1='270'%20x2='260'%20y2='70'/%3E%3Cline%20x1='180'%20y1='270'%20x2='370'%20y2='350'/%3E%3Cline%20x1='440'%20y1='150'%20x2='370'%20y2='350'/%3E%3Cline%20x1='370'%20y1='350'%20x2='480'%20y2='460'/%3E%3Cline%20x1='60'%20y1='400'%20x2='180'%20y2='270'/%3E%3Cline%20x1='60'%20y1='400'%20x2='220'%20y2='500'/%3E%3Cline%20x1='220'%20y1='500'%20x2='370'%20y2='350'/%3E%3C/g%3E%3Cg%20fill='%23C8956C'%20opacity='0.6'%3E%3Ccircle%20cx='80'%20cy='120'%20r='3'/%3E%3Ccircle%20cx='260'%20cy='70'%20r='3'/%3E%3Ccircle%20cx='440'%20cy='150'%20r='3'/%3E%3Ccircle%20cx='180'%20cy='270'%20r='3'/%3E%3Ccircle%20cx='370'%20cy='350'%20r='3'/%3E%3Ccircle%20cx='60'%20cy='400'%20r='3'/%3E%3Ccircle%20cx='480'%20cy='460'%20r='3'/%3E%3Ccircle%20cx='220'%20cy='500'%20r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px auto;
  background-repeat: repeat;
}

/* ------- Photo backgrounds (NEW) ------- */
.parallax-photo::after {
  opacity: 0.35;
  filter: saturate(0.75) contrast(1.05);
}

.parallax-photo::before {
  background: linear-gradient(180deg,
    var(--bg-deep) 0%,
    rgba(8, 8, 13, 0.75) 14%,
    rgba(8, 8, 13, 0.82) 50%,
    rgba(8, 8, 13, 0.78) 86%,
    var(--bg-deep) 100%);
}

.parallax-photo-circuit::after  { background-image: url('../img/circuit-flow.jpg'); }
.parallax-photo-code::after     { background-image: url('../img/code-screen.jpg'); }
.parallax-photo-servers::after  { background-image: url('../img/data-servers.jpg'); }
.parallax-photo-gears::after    { background-image: url('../img/gears-tech.jpg'); }
.parallax-photo-neural::after   { background-image: url('../img/neural-net.jpg'); }
.parallax-photo-robot::after    { background-image: url('../img/hero-automation.jpg'); }

/* ------- Scroll-driven parallax drift ------- */
@supports (animation-timeline: view()) {
  .parallax::after {
    background-attachment: scroll;
    animation: parallax-drift linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  .parallax-network::after,
  .parallax-photo-code::after,
  .parallax-photo-neural::after {
    animation-name: parallax-drift-reverse;
  }
}

@keyframes parallax-drift {
  from { transform: translate3d(0, -14%, 0); }
  to   { transform: translate3d(0,  14%, 0); }
}

@keyframes parallax-drift-reverse {
  from { transform: translate3d(0,  14%, 0); }
  to   { transform: translate3d(0, -14%, 0); }
}

/* ===========================
   HERO VIDEO BACKDROP (NEW)
   =========================== */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(0.65) contrast(1.1) brightness(0.9);
}

.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 8, 13, 0.55) 0%,
      rgba(8, 8, 13, 0.75) 60%,
      var(--bg-deep) 100%),
    radial-gradient(ellipse 70% 70% at 20% 40%,
      rgba(200, 149, 108, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

/* Disable fixed parallax on touch/narrow devices */
@media (max-width: 1024px) {
  .parallax::after {
    background-attachment: scroll;
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax::after {
    background-attachment: scroll;
    animation: none;
    transform: none;
  }
  .hero-video-wrap video { display: none; }
}