/* Shared motion polish for the portfolio and project pages. */
.motion-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.58;
  mix-blend-mode: screen;
}

.motion-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero > :not(.motion-canvas),
.cover-page > :not(.motion-canvas),
.visual-cover > :not(.motion-canvas),
header.hero > :not(.motion-canvas) {
  position: relative;
  z-index: 1;
}

.hero,
.cover-page,
.visual-cover,
.hero-content,
.site-header,
.project-card,
.card,
.section,
.dj-console,
.flyer,
.page,
.hero-dashboard,
.browser-shell,
.summary-card,
.service-card,
.artist-card {
  will-change: transform;
}

.motion-tilt {
  transform-style: preserve-3d;
  perspective: 900px;
}

.motion-glow {
  position: relative;
  overflow: hidden;
}

.motion-glow::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.34), transparent 18rem),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(69, 199, 165, 0.16), transparent 12rem);
  transition: opacity 180ms ease;
}

.motion-glow:hover::before {
  opacity: 1;
}

.motion-glow > * {
  position: relative;
  z-index: 1;
}

.motion-float {
  animation: motionFloat 5.8s ease-in-out infinite alternate;
}

@keyframes motionFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -10px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-canvas,
  .motion-glow::before {
    display: none !important;
  }

  .motion-float {
    animation: none !important;
  }
}

@media print {
  .motion-canvas,
  .motion-glow::before {
    display: none !important;
  }

  .motion-tilt,
  .motion-glow {
    transform: none !important;
  }
}