/* IranNet Web Design — Hero Interaction Layer V1 */

/* --------------------------------------------------------------------------
   Hero: subtle animated blue network
   -------------------------------------------------------------------------- */

.wdm-hero-network {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: .72;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 97%);
}

.wdm-hero-network svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wdm-hero-network__line {
  fill: none;
  stroke: url("#wdmHeroNetworkGradient");
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 6 18;
  vector-effect: non-scaling-stroke;
  animation: wdm-hero-network-flow 18s linear infinite;
}

.wdm-hero-network__line:nth-of-type(2) {
  opacity: .72;
  animation-duration: 24s;
  animation-direction: reverse;
}

.wdm-hero-network__line:nth-of-type(3) {
  opacity: .5;
  animation-duration: 30s;
}

.wdm-hero-network__line:nth-of-type(4) {
  opacity: .58;
  animation-duration: 21s;
  animation-direction: reverse;
}

.wdm-hero-network__line:nth-of-type(5) {
  opacity: .42;
  animation-duration: 27s;
}

.wdm-hero-network__node {
  fill: #67b8ff;
  opacity: .55;
  filter: drop-shadow(0 0 7px rgb(73 151 255 / .7));
  transform-box: fill-box;
  transform-origin: center;
  animation: wdm-hero-network-node 4.8s ease-in-out infinite;
}

.wdm-hero-network__node:nth-of-type(2n) {
  animation-delay: -1.7s;
}

.wdm-hero-network__node:nth-of-type(3n) {
  animation-delay: -3.1s;
}

/* --------------------------------------------------------------------------
   Technology chips: magnetic tilt, glow and sparks
   -------------------------------------------------------------------------- */

.wdm-stack-marquee[data-stack-interactions] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wdm-stack-marquee[data-stack-interactions]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 50%, rgb(46 128 255 / .09), transparent 24%),
    radial-gradient(circle at 82% 50%, rgb(103 91 255 / .08), transparent 26%);
  content: "";
  pointer-events: none;
}

.wdm-stack-marquee[data-stack-interactions] > div {
  padding-block: 16px;
}

.wdm-stack-marquee[data-stack-interactions] span {
  --tech-rx: 0deg;
  --tech-ry: 0deg;
  --tech-y: 0px;
  --tech-glow-x: 50%;
  --tech-glow-y: 50%;

  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid rgb(127 154 220 / .14);
  border-radius: 999px;
  padding: 9px 14px;
  color: #aeb9d0;
  background:
    radial-gradient(
      circle at var(--tech-glow-x) var(--tech-glow-y),
      rgb(92 168 255 / .2),
      transparent 58%
    ),
    rgb(10 18 40 / .72);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .035),
    0 10px 25px rgb(0 0 0 / .08);
  cursor: pointer;
  outline: 0;
  will-change: transform;
  transform:
    perspective(430px)
    rotateX(var(--tech-rx))
    rotateY(var(--tech-ry))
    translateY(var(--tech-y));
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    filter .22s ease,
    transform .12s ease;
}

.wdm-stack-marquee[data-stack-interactions] span::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    115deg,
    transparent 8%,
    rgb(92 185 255 / .82) 42%,
    rgb(113 103 255 / .7) 62%,
    transparent 92%
  );
  content: "";
  opacity: 0;
  transition: opacity .22s ease;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.wdm-stack-marquee[data-stack-interactions] span::after {
  position: absolute;
  top: -45%;
  left: -35%;
  width: 25%;
  height: 190%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / .32),
    transparent
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(18deg) translateX(-210%);
}

.wdm-stack-marquee[data-stack-interactions] span:hover,
.wdm-stack-marquee[data-stack-interactions] span:focus-visible,
.wdm-stack-marquee[data-stack-interactions] span.is-hovered {
  --tech-y: -5px;

  border-color: rgb(83 168 255 / .48);
  color: #eff7ff;
  background:
    radial-gradient(
      circle at var(--tech-glow-x) var(--tech-glow-y),
      rgb(77 175 255 / .32),
      transparent 56%
    ),
    linear-gradient(145deg, rgb(22 43 89 / .96), rgb(15 27 61 / .96));
  box-shadow:
    0 0 0 5px rgb(59 130 246 / .07),
    0 15px 35px rgb(24 91 200 / .2),
    inset 0 1px 0 rgb(255 255 255 / .08);
}

.wdm-stack-marquee[data-stack-interactions] span:hover::before,
.wdm-stack-marquee[data-stack-interactions] span:focus-visible::before,
.wdm-stack-marquee[data-stack-interactions] span.is-hovered::before {
  opacity: 1;
}

.wdm-stack-marquee[data-stack-interactions] span:hover::after,
.wdm-stack-marquee[data-stack-interactions] span:focus-visible::after,
.wdm-stack-marquee[data-stack-interactions] span.is-hovered::after {
  opacity: 1;
  animation: wdm-tech-shine .7s ease both;
}

.wdm-stack-marquee[data-stack-interactions] span.is-dimmed {
  opacity: .38;
  filter: saturate(.65);
  transform:
    perspective(430px)
    rotateX(0deg)
    rotateY(0deg)
    translateY(1px)
    scale(.96);
}

.wdm-stack-marquee[data-stack-interactions] span.is-selected {
  color: #fff;
  border-color: rgb(104 226 176 / .58);
  background:
    radial-gradient(circle, rgb(79 223 170 / .3), transparent 62%),
    rgb(13 42 54 / .94);
  animation: wdm-tech-selected .62s cubic-bezier(.2, .8, .2, 1);
}

.wdm-stack-marquee[data-stack-interactions] i {
  position: relative;
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: #5268ff;
  box-shadow: 0 0 12px rgb(82 104 255 / .55);
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.wdm-stack-marquee[data-stack-interactions].has-tech-hover i {
  opacity: .45;
  transform: scale(.72);
}

.wdm-tech-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #89d8ff;
  box-shadow: 0 0 11px #58a9ff;
  pointer-events: none;
  animation: wdm-tech-spark .65s ease-out forwards;
}

/* Give the architecture preview a subtle reaction while technology chips move. */
.wdm-hero:has(.wdm-stack-marquee span.is-hovered) .wdm-system {
  border-color: rgb(78 155 255 / .28);
  box-shadow:
    0 60px 120px rgb(0 0 0 / .35),
    0 0 70px rgb(44 111 255 / .08);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes wdm-hero-network-flow {
  to {
    stroke-dashoffset: -240;
  }
}

@keyframes wdm-hero-network-node {
  0%,
  100% {
    opacity: .25;
    transform: scale(.72);
  }

  50% {
    opacity: .82;
    transform: scale(1.22);
  }
}

@keyframes wdm-tech-shine {
  from {
    transform: rotate(18deg) translateX(-210%);
  }

  to {
    transform: rotate(18deg) translateX(630%);
  }
}

@keyframes wdm-tech-selected {
  0% {
    transform:
      perspective(430px)
      rotateX(var(--tech-rx))
      rotateY(var(--tech-ry))
      translateY(-5px)
      scale(1);
  }

  48% {
    transform:
      perspective(430px)
      rotateX(var(--tech-rx))
      rotateY(var(--tech-ry))
      translateY(-7px)
      scale(1.1);
  }

  100% {
    transform:
      perspective(430px)
      rotateX(var(--tech-rx))
      rotateY(var(--tech-ry))
      translateY(-5px)
      scale(1);
  }
}

@keyframes wdm-tech-spark {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--spark-x)),
        calc(-50% + var(--spark-y))
      )
      scale(.2);
  }
}

@media (max-width: 760px) {
  .wdm-hero-network {
    opacity: .42;
  }

  .wdm-hero-network__line:nth-of-type(n + 4),
  .wdm-hero-network__node:nth-of-type(n + 8) {
    display: none;
  }

  .wdm-stack-marquee[data-stack-interactions] {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .wdm-stack-marquee[data-stack-interactions]::-webkit-scrollbar {
    display: none;
  }

  .wdm-stack-marquee[data-stack-interactions] > div {
    width: max-content;
    min-width: max-content;
    padding-inline: 16px;
  }

  .wdm-stack-marquee[data-stack-interactions] span {
    min-height: 36px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wdm-hero-network__line,
  .wdm-hero-network__node,
  .wdm-stack-marquee[data-stack-interactions] span,
  .wdm-tech-spark {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* End IranNet Web Design — Hero Interaction Layer V1 */