/* Animated data and glass treatment for the illustrated hero platform. */
.hero-platform-scene {
  position: relative;
  transform-style: preserve-3d;
  animation: hero-art-enter .9s ease both;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.hero-platform-scene > img {
  display: block;
  width: 100%;
  height: auto;
}

/* The translucent surface follows the perspective of the top dashboard. */
.hero-platform-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: polygon(41.7% 1.8%, 87.4% 27.6%, 88% 30.8%, 67.8% 62.1%, 65% 63.5%, 19.5% 31.7%);
  background: linear-gradient(125deg, #ffffff12 4%, #bdfaff05 43%, #ffffff0e 77%, #4dd9f214 100%);
  backdrop-filter: blur(.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(.5px) saturate(1.2);
  pointer-events: none;
}

.hero-data-flow {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.data-route,
.data-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-route {
  stroke: #28d8ff;
  stroke-width: 5;
  opacity: .42;
  filter: url(#bevica-line-glow);
}

.data-pulse {
  stroke: #f1ffff;
  stroke-width: 4;
  stroke-dasharray: 5 95;
  filter: drop-shadow(0 0 6px #27dfff) drop-shadow(0 0 13px #24c7f6);
  animation: bevica-data-travel 3.6s linear infinite;
}

.data-pulse:nth-child(2) { animation-delay: -.9s; animation-duration: 4.2s; }
.data-pulse:nth-child(3) { animation-delay: -1.8s; animation-duration: 4.7s; }
.data-pulse:nth-child(4) { animation-delay: -1.1s; animation-duration: 3.9s; }
.data-pulse:nth-child(5) { animation-delay: -2.7s; animation-duration: 4.4s; }

.glass-surface {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 7px #adfaff) drop-shadow(0 12px 12px #13577754);
}

.glass-sheen {
  animation: bevica-glass-sweep 9s ease-in-out infinite;
}

.data-contacts circle[fill] {
  animation: bevica-contact-bloom 2.8s ease-in-out infinite;
}

.data-contacts circle:not([fill]) {
  fill: #f0ffff;
  stroke: #17cce7;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px #35eaff);
}

.data-contacts circle:nth-child(3),
.data-contacts circle:nth-child(4) { animation-delay: -.9s; }
.data-contacts circle:nth-child(5),
.data-contacts circle:nth-child(6) { animation-delay: -1.7s; }

@media (hover: hover) and (pointer: fine) {
  .hero-platform:hover .hero-platform-scene {
    transform: perspective(1350px) translateY(3px) rotateX(1.4deg) rotateY(-2deg);
  }
}

@keyframes bevica-data-travel {
  from { stroke-dashoffset: 0; opacity: .15; }
  12%, 83% { opacity: 1; }
  to { stroke-dashoffset: -100; opacity: .08; }
}

@keyframes bevica-glass-sweep {
  0%, 12% { transform: translateX(-400px); opacity: 0; }
  19% { opacity: .85; }
  47% { transform: translateX(1700px); opacity: .85; }
  54%, 100% { transform: translateX(1700px); opacity: 0; }
}

@keyframes bevica-contact-bloom {
  0%, 100% { opacity: .42; }
  50% { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-platform-scene,
  .data-pulse,
  .glass-sheen,
  .data-contacts circle[fill] {
    animation: none;
  }
  .hero-platform-scene { transform: translateY(8px); transition: none; }
}