/**
 * MuseHer restrained visual DNA
 *
 * This layer intentionally contains only the effects used by the Cartier
 * landing page: soft neon rim light, breathing, and pointer-aware portrait
 * movement. Typography, layout, buttons, loading UI, and navigation remain
 * owned by landing.css.
 */

:root {
  --shadow-neon: 0 0 18px rgba(255, 46, 126, 0.24);
  --shadow-neon-strong: 0 0 24px rgba(255, 46, 126, 0.35);
}

.neon-rim-light::before {
  position: absolute;
  z-index: 3;
  inset: -2%;
  pointer-events: none;
  content: "";
  opacity: 0.5;
  background:
    radial-gradient(ellipse 35% 72% at 74% 50%, transparent 56%, rgba(255, 46, 126, 0.14) 69%, transparent 80%);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: rim-light-breathe 7s ease-in-out infinite;
}

.unlock-photo.neon-rim-light::before {
  background:
    radial-gradient(ellipse 42% 70% at 56% 48%, transparent 58%, rgba(255, 46, 126, 0.12) 70%, transparent 82%);
}

.climax-photo.neon-rim-light::before {
  background:
    radial-gradient(ellipse 38% 78% at 50% 50%, transparent 56%, rgba(255, 46, 126, 0.16) 69%, transparent 81%);
}

.download-photo.neon-rim-light::before {
  background:
    radial-gradient(ellipse 34% 68% at 66% 45%, transparent 57%, rgba(255, 46, 126, 0.13) 69%, transparent 81%);
}

[data-eye-follow] {
  --eye-x: 0px;
  --eye-y: 0px;
}

[data-breathe] {
  scale: 1;
  transform-origin: center;
}

.is-current [data-breathe] {
  animation: portrait-breathe 7s ease-in-out infinite;
}

.is-current [data-breathe="slow"] {
  animation-duration: 9s;
}

@keyframes rim-light-breathe {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes portrait-breathe {
  0%,
  100% {
    scale: 1;
  }

  50% {
    scale: 1.012;
  }
}

@media (max-width: 768px) {
  .neon-rim-light::before {
    opacity: 0.4;
    filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-rim-light::before {
    animation: none;
    opacity: 0.42;
  }

  [data-eye-follow] {
    --eye-x: 0px !important;
    --eye-y: 0px !important;
  }

  [data-breathe],
  .is-current [data-breathe],
  .is-current [data-breathe="slow"] {
    animation: none;
    scale: 1;
  }
}