/* Hero and Main BG CSS for wiring-hero and wiring-main-bg (from styles.css) */

/* Hero Section */
.wiring-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
}
.wiring-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/services/cabeling-wiring/wiring.jpg') center center/cover no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.wiring-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,34,54,0.75);
  z-index: 1;
  pointer-events: none;
}
.hero-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 90vw;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

/* Main BG */
.wiring-main-bg {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100vh;
  background: none !important;
  overflow: hidden;
}
.wiring-main-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/assets/services/cabeling-wiring/wiring-bg.jpg') center center/cover no-repeat;
  opacity: 0.22;
  filter: grayscale(100%);
  pointer-events: none;
}
.wiring-main-bg > section,
.wiring-main-bg > div {
  position: relative;
  z-index: 2;
}
/* --- Animation Keyframes & Classes --- */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-40px);}
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-40px);}
  100% { opacity: 1; transform: translateX(0);}
}
@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(40px);}
  100% { opacity: 1; transform: translateX(0);}
}
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.95);}
  100% { opacity: 1; transform: scale(1);}
}

.animated { opacity: 0; transition: opacity 0.3s; }
.fade-in-up.in-view { animation: fadeInUp 1s cubic-bezier(.77,0,.18,1) forwards; }
.fade-in-down.in-view { animation: fadeInDown 1s cubic-bezier(.77,0,.18,1) forwards; }
.fade-in-left.in-view { animation: fadeInLeft 1s cubic-bezier(.77,0,.18,1) forwards; }
.fade-in-right.in-view { animation: fadeInRight 1s cubic-bezier(.77,0,.18,1) forwards; }
.scale-in.in-view { animation: scaleIn 0.9s cubic-bezier(.77,0,.18,1) forwards; }

.animated.delay-1 { animation-delay: 0.15s; }
.animated.delay-2 { animation-delay: 0.3s; }
.animated.delay-3 { animation-delay: 0.45s; }
.animated.delay-4 { animation-delay: 0.6s; }
.animated.delay-5 { animation-delay: 0.75s; }