/* Vaylix Tech — shared interaction + responsive layer */
html, body { overflow-x: hidden; }
img, canvas, video, svg { max-width: 100%; }

.vx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #38debb, #5ffbd6);
  z-index: 60; box-shadow: 0 0 12px rgba(56,222,187,.5);
  transition: width .1s linear;
}

.vx-net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vx-hero { position: relative; }

.vx-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.vx-reveal.vx-in { opacity: 1; transform: none; }

/* Mobile: stop big display headlines from overflowing narrow screens */
@media (max-width: 640px) {
  .vx-hero h1 { font-size: 2.4rem !important; line-height: 1.14 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}