/* Motion utilities for the public Lomeva site (light, teal — not dark neon). */

.ms-stage {
  perspective: 1200px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

.ms-panel {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.ms-glow-border {
  position: relative;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(107, 163, 181, 0.18);
  transition: box-shadow 0.55s cubic-bezier(0.12, 0.58, 0.18, 1);
}

.ms-glow-border.ms-glow--hot {
  box-shadow:
    0 18px 40px rgba(77, 141, 161, 0.16),
    0 0 0 1px rgba(107, 163, 181, 0.42),
    0 0 28px rgba(107, 163, 181, 0.22);
}

.ms-sweep {
  overflow: hidden;
}

.ms-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(107, 163, 181, 0.22) 48%,
    transparent 60%
  );
  transform: translateX(-120%);
  opacity: 0;
}

.ms-sweep.ms-sweep--run::after {
  animation: ms-light-sweep 0.7s cubic-bezier(0.22, 0.04, 0.28, 1) forwards;
}

@keyframes ms-light-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.ms-row--hot {
  background: rgba(107, 163, 181, 0.14);
}

@media (max-width: 767px) {
  .ms-stage {
    perspective: 900px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-panel,
  .ms-glow-border {
    transition: none;
    will-change: auto;
  }

  .ms-sweep.ms-sweep--run::after {
    animation: none;
  }
}