/* Static Noise Effect - Reusable Class */
.static-noise-effect {
  position: relative;
}

/* Canvas Noise Effect untuk About Image */
.noise-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: overlay;
  opacity: 1;
}

/* Disable old pseudo-element noise for about-image with canvas */
.about-image.static-noise-effect::before,
.about-image.static-noise-effect::after {
  display: none;
}

/* Fix khusus untuk business-background-image agar tidak mengecil tapi tetap centered */
/* .business-background-image.static-noise-effect {
    position: absolute !important;
    top: 100px !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1720px !important;
    max-width: 100vw !important;
    height: calc(100% - 200px) !important;
} */

/* Pastikan pseudo-elements mengikuti dimensi container dan clip sesuai image */
.business-background-image.static-noise-effect::before,
.business-background-image.static-noise-effect::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  /* Clip noise to match object-fit: contain image dimensions */
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

.static-noise-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><filter id="noise"><feTurbulence baseFrequency="0.95" numOctaves="4" result="noise" seed="1"/><feColorMatrix in="noise" type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.8"/></svg>');
  background-size: 120px 120px;
  animation: static-noise 0.1s infinite steps(8);
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 1;
}

.static-noise-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><filter id="grain"><feTurbulence baseFrequency="1.5" numOctaves="3" result="noise" seed="3"/><feColorMatrix in="noise" type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23grain)" opacity="0.7"/></svg>');
  background-size: 70px 70px;
  animation: static-flicker 0.08s infinite steps(6),
    static-movement 0.15s infinite steps(4);
  z-index: 11;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: overlay;
}

/* Glitch Effect - Reusable Class */
.glitch-effect {
  position: relative;
  user-select: none;
  z-index: 10;
}

.glitch-effect::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #00552e;
  z-index: -1;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  font-style: inherit;
  text-decoration: none;
  line-height: inherit;
  animation: reverse-position 0.1s infinite linear;
}

.glitch-effect::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ffdd57;
  z-index: -2;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  font-style: inherit;
  text-decoration: none;
  line-height: inherit;
  animation: forward-position 0.13s infinite linear;
}

/* Animation Keyframes */
@keyframes static-noise {
  0% {
    background-position: 0px 0px;
  }

  12% {
    background-position: 0px 1px;
  }

  25% {
    background-position: 0px -1px;
  }

  37% {
    background-position: 0px 2px;
  }

  50% {
    background-position: 0px -2px;
  }

  62% {
    background-position: 0px -1px;
  }

  75% {
    background-position: 0px 2px;
  }

  87% {
    background-position: 0px -2px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@keyframes static-flicker {
  0% {
    opacity: 0.5;
  }

  8% {
    opacity: 0.7;
  }

  16% {
    opacity: 0.4;
  }

  24% {
    opacity: 0.6;
  }

  32% {
    opacity: 0.3;
  }

  40% {
    opacity: 0.8;
  }

  48% {
    opacity: 0.4;
  }

  56% {
    opacity: 0.6;
  }

  64% {
    opacity: 0.5;
  }

  72% {
    opacity: 0.7;
  }

  80% {
    opacity: 0.3;
  }

  88% {
    opacity: 0.6;
  }

  96% {
    opacity: 0.4;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes static-movement {
  0% {
    background-position: 0px 0px;
  }

  25% {
    background-position: 0px 2px;
  }

  50% {
    background-position: 0px 4px;
  }

  75% {
    background-position: 0px -3px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@keyframes reverse-position {
  0% {
    left: 0;
    top: 0;
  }

  8% {
    left: -2px;
    top: -1px;
  }

  16% {
    left: -4px;
    top: -2px;
  }

  24% {
    left: -1px;
    top: -3px;
  }

  32% {
    left: -3px;
    top: 1px;
  }

  40% {
    left: -5px;
    top: -2px;
  }

  48% {
    left: -2px;
    top: -4px;
  }

  56% {
    left: -4px;
    top: 2px;
  }

  64% {
    left: -1px;
    top: -2px;
  }

  72% {
    left: -3px;
    top: -1px;
  }

  80% {
    left: -2px;
    top: 1px;
  }

  88% {
    left: -4px;
    top: -3px;
  }

  96% {
    left: -1px;
    top: -1px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

@keyframes forward-position {
  0% {
    left: 0;
    top: 0;
  }

  12% {
    left: 2px;
    top: 1px;
  }

  24% {
    left: 4px;
    top: 2px;
  }

  36% {
    left: 1px;
    top: 3px;
  }

  48% {
    left: 3px;
    top: -1px;
  }

  60% {
    left: 5px;
    top: 2px;
  }

  72% {
    left: 2px;
    top: 4px;
  }

  84% {
    left: 4px;
    top: -2px;
  }

  96% {
    left: 1px;
    top: 1px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

/* ========================================
   BUSINESS TEXT ANIMATIONS
   ======================================== */
@keyframes business-text-scroll {
  0% {
    transform: translateY(-50%) rotate(-15deg) translateX(0%);
  }

  100% {
    transform: translateY(-50%) rotate(-15deg) translateX(-25%);
  }
}

@keyframes business-text-scroll-reverse {
  0% {
    transform: translateY(-50%) rotate(-15deg) translateX(-25%);
  }

  100% {
    transform: translateY(-50%) rotate(-15deg) translateX(0%);
  }
}

/* Disable business text animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  .business-text-pattern {
    animation: none !important;
  }
}

/* Contact Entry Noise Overlay */
.contact-noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: overlay;
  opacity: 1;
}

.contact-noise-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><filter id="noise-contact"><feTurbulence baseFrequency="0.95" numOctaves="4" result="noise" seed="1"/><feColorMatrix in="noise" type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23noise-contact)" opacity="0.8"/></svg>');
  background-size: 120px 120px;
  animation: static-noise 0.1s infinite steps(8);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.contact-noise-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><filter id="grain-contact"><feTurbulence baseFrequency="1.5" numOctaves="3" result="noise" seed="3"/><feColorMatrix in="noise" type="saturate" values="0"/></filter></defs><rect width="100%" height="100%" filter="url(%23grain-contact)" opacity="0.7"/></svg>');
  background-size: 70px 70px;
  animation: static-flicker 0.08s infinite steps(6),
    static-movement 0.15s infinite steps(4);
  pointer-events: none;
}

/* Gradient overlay animation */
.contact-entry-bg-image .gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, #ffdd57, transparent);
  animation: gradientOnce 3s ease-in-out forwards;
  pointer-events: none;
  z-index: 20;
}

@keyframes gradientOnce {
  0% {
    height: 0;
    opacity: 0;
  }

  30% {
    height: 50%;
    opacity: 1;
  }

  70% {
    height: 50%;
    opacity: 1;
  }

  100% {
    height: 50%;
    opacity: 0;
  }
}