/* =========================================================
   Locket Gold – Pink Dream FX
   Shared visual layer: aurora, sparkles, reveal, tilt, shine.
   Loads on every page. Safe without JS.
   ========================================================= */

:root {
  --fx-pink: #ff6f95;
  --fx-pink-strong: #ec3c6e;
  --fx-pink-soft: #ffb6d2;
  --fx-ink: #5f2440;
}

/* ---------- Ambient aurora behind the page ---------- */
#fx-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  opacity: .9;
}

#fx-aurora .fx-blob {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  will-change: transform;
  animation: fxDrift 24s ease-in-out infinite alternate;
}

#fx-aurora .fx-blob:nth-child(1) {
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, rgba(255, 132, 170, .55), transparent 68%);
}

#fx-aurora .fx-blob:nth-child(2) {
  top: 8vmax;
  right: -18vmax;
  background: radial-gradient(circle, rgba(214, 151, 255, .38), transparent 68%);
  animation-delay: -7s;
  animation-duration: 29s;
}

#fx-aurora .fx-blob:nth-child(3) {
  bottom: -22vmax;
  left: 22vmax;
  background: radial-gradient(circle, rgba(255, 185, 212, .46), transparent 68%);
  animation-delay: -13s;
  animation-duration: 34s;
}

html.dark #fx-aurora .fx-blob {
  opacity: .2;
}

/* Three.js canvas sits above the html background, below content. */
#fx-three {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

body.fx-on #fx-three {
  opacity: .6;
}

body.fx-on {
  background-color: transparent !important;
}

/* Trong dark mode, class .dark .bg-white có specificity cao hơn body.fx-on,
   khiến nền body che mất canvas Three.js. Ép trong suốt để hearts vẫn hiện. */
html.dark body.fx-on {
  background-color: transparent !important;
}

html.dark body.fx-on #fx-three {
  opacity: .5;
}

/* Cursor glow (desktop only, injected by JS). */
#fx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 143, 181, .22), rgba(255, 143, 181, .07) 42%, transparent 70%);
  filter: blur(6px);
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
  will-change: transform;
}

body.fx-cursor-on #fx-cursor {
  opacity: .8;
}

html.dark #fx-cursor {
  mix-blend-mode: screen;
  opacity: .5;
}

/* ---------- Scroll reveal ---------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(20px) scale(.995);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.fx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Hover tilt ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.fx-tilt.is-tilting {
  transition-duration: .08s;
}

/* ---------- Button shine ---------- */
.fx-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fx-shine::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 42%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  pointer-events: none;
  animation: fxShine 6.5s ease-in-out infinite;
  animation-delay: 1.4s;
  z-index: 0;
}

.fx-shine > * {
  position: relative;
  z-index: 1;
}

/* ---------- Click sparkles ---------- */
.fx-spark {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ff8fb5 55%, #ec3c6e 100%);
  box-shadow: 0 0 10px rgba(255, 111, 149, .85);
  animation: fxSpark .72s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fx-spark.is-heart {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ff6f95;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

/* ---------- Keyframes ---------- */
@keyframes fxDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vw, 2vh, 0) scale(1.08); }
  100% { transform: translate3d(-2vw, 5vh, 0) scale(.96); }
}

@keyframes fxShine {
  0%, 65% { left: -60%; opacity: 0; }
  72%     { opacity: 1; }
  88%     { left: 130%; opacity: 1; }
  100%    { left: 130%; opacity: 0; }
}

@keyframes fxSpark {
  0%   { transform: translate(0, 0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--fx-x, 20px), var(--fx-y, -35px)) scale(0); opacity: 0; }
}

@keyframes fxPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 111, 149, .24); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 111, 149, 0); }
}

/* ---------- Tiny decorative pulse for primary CTAs ---------- */
.fx-pulse {
  animation: fxPulseGlow 3.4s ease-in-out infinite;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #fx-aurora .fx-blob,
  .fx-shine::after,
  .fx-pulse {
    animation: none !important;
  }

  .fx-reveal,
  .fx-reveal.is-visible,
  .fx-tilt {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #fx-three,
  #fx-cursor {
    display: none !important;
  }
}

/* ---------- Mobile: lighter, always readable ---------- */
@media (max-width: 767px) {
  #fx-aurora .fx-blob {
    filter: blur(70px);
    opacity: .24;
  }

  body.fx-on #fx-three {
    opacity: .38;
  }

  #fx-cursor {
    display: none !important;
  }

  .fx-reveal {
    transform: translateY(12px);
  }
}