/* Hero Logo Tunnel Container */
.hero-logo-tunnel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  --stroke-width: 0.5px; /* Ultra-thin sub-pixel stroke */
  color: rgba(255, 255, 255, 0.85);
}

/* Individual Tunnel Item */
.tunnel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 264px;
  transform: translate(-50%, -50%);
  
  opacity: 0; 
  /* Snappier, faster duration (0.18s) */
  animation: tunnelZoom 0.18s linear forwards;
}

.tunnel-item svg {
  width: 100%;
  height: 100%;
}

.tunnel-item path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-width, 0.5px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* Keeps the 0.5px weight uniform */
}

/* Tunnel Zoom & Fade Keyframes */
@keyframes tunnelZoom {
  0% {
    transform: translate(-50%, -50%) scale(var(--start-scale, 20)) rotate(var(--start-rotation, 0deg));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.15) rotate(var(--start-rotation, 0deg));
    opacity: 0;
  }
}