/* ===================================
   Special Effects & Filters
   =================================== */

/* Dripping Paint Effect - Portfolio Section */
.dripping-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 15px solid var(--color-dark);
  border-bottom: 15px solid var(--color-dark);
  filter: url("#drip-goo");
  z-index: 0;
}

.dripping-effect .drip {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: var(--color-dark);
  position: absolute;
  top: -100%;
  animation: falling linear infinite;
}

@keyframes falling {
  0% { top: -100%; }
  50% { top: 0%; }
  80% { top: 80%; }
  100% { top: 100%; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dripping-effect .drip {
    animation: none;
  }
}

.dripping-effect .drip:nth-child(1) { height: 60px; width: 60px; animation-duration: 11s; animation-delay: -3s; left: 15%; }
.dripping-effect .drip:nth-child(2) { height: 25px; width: 25px; animation-duration: 9s; animation-delay: -8s; left: 25%; }
.dripping-effect .drip:nth-child(3) { height: 80px; width: 80px; animation-duration: 14s; animation-delay: -5s; left: 75%; }
.dripping-effect .drip:nth-child(4) { height: 40px; width: 40px; animation-duration: 12s; animation-delay: -2s; left: 85%; }
.dripping-effect .drip:nth-child(5) { height: 55px; width: 55px; animation-duration: 10s; animation-delay: -9s; left: 70%; }
.dripping-effect .drip:nth-child(6) { height: 30px; width: 30px; animation-duration: 8s; animation-delay: -11s; left: 80%; }
.dripping-effect .drip:nth-child(7) { height: 70px; width: 70px; animation-duration: 13s; animation-delay: -7s; left: 20%; }
.dripping-effect .drip:nth-child(8) { height: 45px; width: 45px; animation-duration: 10s; animation-delay: -4s; left: 90%; }
.dripping-effect .drip:nth-child(9) { height: 35px; width: 35px; animation-duration: 9s; animation-delay: -14s; left: 30%; }
.dripping-effect .drip:nth-child(10) { height: 90px; width: 90px; animation-duration: 15s; animation-delay: -10s; left: 65%; }
.dripping-effect .drip:nth-child(11) { height: 50px; width: 50px; animation-duration: 12s; animation-delay: -6s; left: 78%; }
.dripping-effect .drip:nth-child(12) { height: 65px; width: 65px; animation-duration: 11s; animation-delay: -12s; left: 22%; }
.dripping-effect .drip:nth-child(13) { height: 28px; width: 28px; animation-duration: 7s; animation-delay: -16s; left: 88%; }
.dripping-effect .drip:nth-child(14) { height: 75px; width: 75px; animation-duration: 14s; animation-delay: -2s; left: 35%; }
.dripping-effect .drip:nth-child(15) { height: 42px; width: 42px; animation-duration: 8s; animation-delay: -10s; left: 95%; }
.dripping-effect .drip:nth-child(16) { height: 58px; width: 58px; animation-duration: 13s; animation-delay: -18s; left: 72%; }
.dripping-effect .drip:nth-child(17) { height: 33px; width: 33px; animation-duration: 6s; animation-delay: -5s; left: 18%; }
.dripping-effect .drip:nth-child(18) { height: 68px; width: 68px; animation-duration: 15s; animation-delay: -11s; left: 82%; }
.dripping-effect .drip:nth-child(19) { height: 48px; width: 48px; animation-duration: 10s; animation-delay: -20s; left: 28%; }
.dripping-effect .drip:nth-child(20) { height: 38px; width: 38px; animation-duration: 9s; animation-delay: -7s; left: 55%; }

/* Electric Border Effect */
.electric-border-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.electric-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.value-card.selected .electric-layers {
  opacity: 1;
}

@media (hover: hover) {
  .value-card:hover .electric-layers {
    opacity: 1;
  }
}

/* Background glow */
.background-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(24px); /* Adjusted blur for potentially different card sizes */
  transform: scale(1.05); /* Adjusted scale for tighter glow */
  opacity: 0.15;
  z-index: -1;
  background: linear-gradient(
    -30deg,
    var(--electric-light-color),
    transparent 40%,
    transparent 60%,
    var(--electric-border-color)
  );
}

/* Inner container */
.inner-container {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Fades out the physical borders and their specific glows in the middle */
  mask-image: linear-gradient(
    -30deg,
    black 0%,
    transparent 30%,
    transparent 70%,
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    -30deg,
    black 0%,
    transparent 30%,
    transparent 70%,
    black 100%
  );
}

/* Border layers */
.border-outer {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(221, 132, 72, 0.5);
  border-radius: inherit;
  padding-right: 4px;
  padding-bottom: 4px;
}

.main-card {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--electric-border-color);
  margin-top: -4px;
  margin-left: -4px;
  filter: url(#electric-border);
}

/* Glow effects */
.glow-layer-1 {
  border: 2px solid rgba(221, 132, 72, 0.6);
  border-radius: inherit;
  position: absolute;
  inset: 0;
  filter: blur(1px);
}

.glow-layer-2 {
  border: 2px solid var(--electric-light-color);
  border-radius: inherit;
  position: absolute;
  inset: 0;
  filter: blur(4px);
  opacity: 0.5; /* Added opacity to lower intensity */
}

/* Overlay effects */
.overlay-1 {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 1;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(
    -30deg,
    white,
    transparent 15%,
    transparent 85%,
    white
  );
}

.overlay-2 {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.5;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(
    -30deg,
    white,
    transparent 15%,
    transparent 85%,
    white
  );
}