/* Lightweight TiltedCard-inspired motion for the existing profile panel. */
.main-content {
  perspective: 1400px;
}

.bg-video-container::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.025), transparent 36%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.48)) !important;
}

.bg-video-container video {
  filter: brightness(0.88) saturate(0.94) contrast(1.03) !important;
}

.profile-card.profile-tilt {
  --tilt-glow-x: 50%;
  --tilt-glow-y: 40%;
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
  background:
    radial-gradient(440px circle at var(--tilt-glow-x) var(--tilt-glow-y), rgba(255, 255, 255, 0.105), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 38%),
    linear-gradient(180deg, rgba(4, 5, 8, 0.25), rgba(1, 2, 4, 0.14)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
  transition:
    transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 600ms ease,
    border-color 260ms ease,
    box-shadow 320ms ease;
}

.profile-card.profile-tilt.is-tilting {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition:
    transform 90ms linear,
    opacity 600ms ease,
    border-color 220ms ease,
    box-shadow 280ms ease;
}

.profile-card.profile-tilt > * {
  transform: translateZ(16px);
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .main-content {
    perspective: none;
  }

  .bg-video-container::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.52)) !important;
  }

  .bg-video-container video {
    filter: brightness(0.82) saturate(0.9) !important;
  }

  .profile-card.profile-tilt,
  .profile-card.profile-tilt.is-tilting {
    transform: none !important;
    will-change: auto;
    background: rgba(4, 5, 8, 0.54) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }

  .profile-card.profile-tilt > * {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.profile-tilt,
  .profile-card.profile-tilt.is-tilting {
    transform: none !important;
    transition: none !important;
  }
}