/* ============ Effect Layer (shared container) ============ */

.effect-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}

/* ============ 2. Sparkle Stars ============ */

.sparkle-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle ease-in-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.sparkle-star::before,
.sparkle-star::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 1px;
}

.sparkle-star::before {
  width: 2px;
  height: 14px;
  top: -5px;
  left: 1px;
}

.sparkle-star::after {
  width: 14px;
  height: 2px;
  top: 1px;
  left: -5px;
}

@keyframes twinkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    transform: scale(var(--scale, 1)) rotate(30deg);
    opacity: 1;
  }
  50% {
    transform: scale(calc(var(--scale, 1) * 0.6)) rotate(60deg);
    opacity: 0.5;
  }
  80% {
    transform: scale(calc(var(--scale, 1) * 1.2)) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(120deg);
    opacity: 0;
  }
}

/* ============ 4. Disco Ball ============ */

.disco-ball-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  z-index: 55;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: disco-sway 6s ease-in-out infinite;
}

@keyframes disco-sway {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-50%) rotate(1.5deg);
  }
  75% {
    transform: translateX(-50%) rotate(-1.5deg);
  }
}

.disco-ball-string {
  width: 2px;
  height: 30px;
  background: #aaa;
}

.disco-ball {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #e8e8e8 0%,
    #c0c0c0 30%,
    #a0a0a0 60%,
    #808080 100%
  );
  position: relative;
  overflow: hidden;
  animation: disco-spin 4s linear infinite;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 255, 255, 0.1);
  will-change: transform;
}

.disco-tile {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  transition: background-color 0.5s;
}

.disco-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.disco-ray {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  transform-origin: 0 50%;
  animation: ray-sweep linear infinite;
  opacity: 0.35;
  will-change: transform;
}

@keyframes disco-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes ray-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
  .disco-ball-string {
    height: 40px;
  }

  .disco-ray {
    width: 350px;
  }
}

/* ============ 5. Cursor Trail ============ */

.trail-container {
  overflow: visible;
}

.trail-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: trail-fade 600ms ease-out forwards;
  will-change: transform, opacity;
}

.trail-heart {
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
}

.trail-heart::before,
.trail-heart::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: inherit;
}

.trail-heart::before {
  top: -5px;
  left: 0;
}

.trail-heart::after {
  top: 0;
  left: 5px;
}

.trail-sparkle {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.trail-sparkle::before,
.trail-sparkle::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 1px;
}

.trail-sparkle::before {
  width: 2px;
  height: 10px;
  top: -3.5px;
  left: 0.5px;
}

.trail-sparkle::after {
  width: 10px;
  height: 2px;
  top: 0.5px;
  left: -3.5px;
}

.trail-ring {
  width: 12px;
  height: 12px;
  background: transparent !important;
  border: 2px solid;
  border-color: inherit;
  border-radius: 50%;
}

@keyframes trail-fade {
  0% {
    opacity: 0.9;
  }
  100% {
    transform: scale(0.2) translateY(-25px);
    opacity: 0;
  }
}

/* ============ 7. Mermaid Shimmer ============ */

.mermaid-shimmer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.08;
  background: linear-gradient(
    135deg,
    #ff6b9d 0%,
    #c44dff 15%,
    #6bc5ff 30%,
    #45ffa5 45%,
    #ffe74d 60%,
    #ff6b9d 75%,
    #c44dff 90%,
    #6bc5ff 100%
  );
  background-size: 400% 400%;
  animation: shimmer-shift 8s ease-in-out infinite;
  mix-blend-mode: overlay;
  will-change: background-position;
}

.mermaid-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 42%,
    transparent 55%
  );
  background-size: var(--scale-pattern-size, 40px) var(--scale-pattern-size, 40px);
  opacity: 0.5;
}

@keyframes shimmer-shift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============ 15. Sparkle Burst ============ */

.sparkle-burst-particle {
  position: absolute;
  top: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: sparkle-burst-fall ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.sparkle-burst-particle::before,
.sparkle-burst-particle::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 1px;
}

.sparkle-burst-particle::before {
  width: 2px;
  height: 10px;
  top: -3px;
  left: 1px;
}

.sparkle-burst-particle::after {
  width: 10px;
  height: 2px;
  top: 1px;
  left: -3px;
}

@keyframes sparkle-burst-fall {
  0% {
    transform: translateY(0) translateX(0) scale(var(--burst-scale, 1));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(var(--burst-drift, 0px)) scale(var(--burst-scale, 1));
    opacity: 0;
  }
}

/* ============ 16. Sparkle Dividers ============ */

.sparkle-divider {
  position: relative;
  width: 80%;
  height: 3px;
  margin: var(--spacing-md, 16px) auto;
}

.sparkle-divider-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 0;
  animation: sparkle-divider-pulse 1.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes sparkle-divider-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5);
    opacity: 1;
  }
}

/* ============ 17. Name Shimmer ============ */

.couple-names--shimmer {
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: name-shimmer var(--shimmer-duration, 8s) ease-in-out infinite;
}

.couple-names--shimmer-gold {
  background-image: linear-gradient(
    90deg,
    var(--color-primary, rgb(221, 115, 100)) 0%,
    var(--color-primary, rgb(221, 115, 100)) 40%,
    #ffd700 50%,
    var(--color-primary, rgb(221, 115, 100)) 60%,
    var(--color-primary, rgb(221, 115, 100)) 100%
  );
}

.couple-names--shimmer-white {
  background-image: linear-gradient(
    90deg,
    var(--color-primary, rgb(221, 115, 100)) 0%,
    var(--color-primary, rgb(221, 115, 100)) 40%,
    #fff 50%,
    var(--color-primary, rgb(221, 115, 100)) 60%,
    var(--color-primary, rgb(221, 115, 100)) 100%
  );
}

.couple-names--shimmer-pink {
  background-image: linear-gradient(
    90deg,
    var(--color-primary, rgb(221, 115, 100)) 0%,
    var(--color-primary, rgb(221, 115, 100)) 40%,
    #ff69b4 50%,
    var(--color-primary, rgb(221, 115, 100)) 60%,
    var(--color-primary, rgb(221, 115, 100)) 100%
  );
}

.couple-names--shimmer a {
  -webkit-text-fill-color: inherit;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}

@keyframes name-shimmer {
  0%, 62.5% {
    background-position: 100% 0;
  }
  37.5% {
    background-position: -100% 0;
  }
}

/* ============ 18. Underwater Caustics ============ */

.caustics-container {
  overflow: visible;
}

.caustics-layer {
  position: absolute;
  inset: 0;
  background-size: 200% 200%;
  pointer-events: none;
  will-change: background-position;
}

.caustics-layer--1 {
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.12), transparent 60%);
  animation: caustics-move-1 8s ease-in-out infinite;
}

.caustics-layer--2 {
  background: radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.10), transparent 55%);
  animation: caustics-move-2 11s ease-in-out infinite reverse;
}

.caustics-layer--3 {
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.08), transparent 50%);
  animation: caustics-move-3 15s ease-in-out infinite alternate;
}

@keyframes caustics-move-1 {
  0%, 100% { background-position: 0% 0%; }
  25% { background-position: 100% 30%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 0% 60%; }
}

@keyframes caustics-move-2 {
  0%, 100% { background-position: 100% 100%; }
  33% { background-position: 0% 50%; }
  66% { background-position: 80% 0%; }
}

@keyframes caustics-move-3 {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ============ 20. Text Sparkle on Scroll ============ */

.text-sparkle-in {
  animation: text-glow-in 1.5s ease-out forwards;
}

@keyframes text-glow-in {
  0% {
    text-shadow: none;
  }
  30% {
    text-shadow: 0 0 var(--glow-strength, 8px) rgba(221, 115, 100, 0.4);
  }
  100% {
    text-shadow: none;
  }
}

/* ============ 23. Scroll Confetti (canvas-based, no CSS needed) ============ */

/* ============ 24. Parallax Sparkles ============ */

.parallax-sparkle-container {
  overflow: visible;
}

.parallax-sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.parallax-sparkle {
  position: absolute;
  border-radius: 50%;
  animation: parallax-sparkle-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes parallax-sparkle-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* ============ 25. Grand Entrance ============ */

.grand-entrance-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.08) 0%,
    rgba(221, 115, 100, 0.06) 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 100;
  pointer-events: none;
  animation: grand-entrance-reveal 1.2s ease-out forwards;
}

.grand-entrance-overlay--golden {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 180, 50, 0.1) 30%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.grand-entrance-overlay--fade {
  animation: grand-entrance-fade 1s ease-out forwards;
}

.grand-entrance-sparkles {
  z-index: 101;
}

.grand-entrance-sparkle {
  position: absolute;
  border-radius: 50%;
  animation: grand-entrance-sparkle-fall 1.5s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.grand-entrance-sparkle::before,
.grand-entrance-sparkle::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 1px;
}

.grand-entrance-sparkle::before {
  width: 2px;
  height: 10px;
  top: -3px;
  left: 50%;
  margin-left: -1px;
}

.grand-entrance-sparkle::after {
  width: 10px;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: -3px;
}

.grand-entrance-sparkle--radial {
  animation: grand-entrance-sparkle-radial 2s ease-out forwards;
}

@keyframes grand-entrance-reveal {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes grand-entrance-fade {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes grand-entrance-sparkle-fall {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  15% {
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(120px) scale(0.3);
    opacity: 0;
  }
}

@keyframes grand-entrance-sparkle-radial {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--tx, 50px) * 0.2), calc(var(--ty, 50px) * 0.2)) scale(1);
  }
  100% {
    transform: translate(var(--tx, 50px), var(--ty, 50px)) scale(0);
    opacity: 0;
  }
}

/* ============ 26. Disco Spotlight ============ */

.disco-spotlight-container {
  overflow: visible;
}

.disco-spotlight-beam {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  margin-left: -100vmax;
  margin-top: -100vmax;
  border-radius: 50%;
  pointer-events: none;
  animation: spotlight-sweep 8s linear infinite;
  will-change: transform;
  mix-blend-mode: screen;
}

@keyframes spotlight-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============ 27. Mirror Reflections ============ */

.mirror-reflection-container {
  overflow: visible;
}

.mirror-reflection {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 1px;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
}

/* ============ Print: hide effects ============ */
@media print {
  .effect-layer,
  .mermaid-shimmer,
  .disco-ball-wrapper,
  .trail-particle,
  .trail-container,
  .grand-entrance-overlay,
  .grand-entrance-sparkles,
  .disco-spotlight-container,
  .mirror-reflection-container {
    display: none !important;
  }
}