@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Pacifico&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* Стандартный синтаксис */
}

/* ==================== START SCREEN ==================== */
.start-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0015 0%, #0a0008 60%, #000 100%);
  transition: opacity 1.2s ease-out;
}

.start-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.start-bg-hearts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.start-floating-heart {
  position: absolute;
  color: rgba(255, 50, 150, 0.08);
  animation: startHeartFloat linear infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes startHeartFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-20vh) rotate(360deg);
    opacity: 0;
  }
}

.start-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: startButtonAppear 2s ease-out forwards;
  opacity: 0;
}

@keyframes startButtonAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.start-heart {
  font-size: clamp(80px, 20vw, 140px);
  display: block;
  animation: startHeartPulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 50, 150, 0.6)) drop-shadow(0 0 60px rgba(255, 50, 150, 0.3)) drop-shadow(0 0 100px rgba(255, 0, 100, 0.2));
  transition: filter 0.3s ease;
}

.start-button:hover .start-heart {
  filter: drop-shadow(0 0 40px rgba(255, 50, 150, 0.9)) drop-shadow(0 0 80px rgba(255, 50, 150, 0.6)) drop-shadow(0 0 140px rgba(255, 0, 100, 0.4));
}

@keyframes startHeartPulse {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.15);
  }

  45% {
    transform: scale(0.95);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.start-text {
  font-family: 'Pacifico', cursive;
  font-size: clamp(20px, 5vw, 32px);
  color: rgba(255, 180, 220, 0.8);
  letter-spacing: 4px;
  animation: startTextGlow 2s ease-in-out infinite;
}

@keyframes startTextGlow {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 100, 200, 0.4);
    color: rgba(255, 180, 220, 0.6);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 100, 200, 0.8), 0 0 40px rgba(255, 50, 150, 0.4);
    color: rgba(255, 200, 230, 1);
  }
}

/* ==================== INTRO SCREEN ==================== */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0015 0%, #0a0008 60%, #000 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

.intro-screen.active {
  opacity: 1;
  pointer-events: auto;
}

.intro-screen.fade-out {
  opacity: 0;
  transition: opacity 2s ease-out;
}

.intro-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.intro-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 150, 200, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 100, 200, 0.4);
  animation: introParticleDrift 8s linear infinite;
}

@keyframes introParticleDrift {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
    transform: translateY(-10vh) translateX(var(--dx, 20px)) scale(1);
  }

  90% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-110vh) translateX(var(--dx2, -30px)) scale(0.3);
    opacity: 0;
  }
}

.intro-line {
  font-family: 'Pacifico', cursive;
  font-size: clamp(28px, 7vw, 64px);
  color: white;
  text-align: center;
  position: absolute;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  padding: 0 20px;
  text-shadow:
    0 0 20px rgba(255, 100, 200, 0.8),
    0 0 40px rgba(255, 100, 200, 0.5),
    0 0 80px rgba(255, 50, 150, 0.3);
  pointer-events: none;
  white-space: nowrap;
}

.intro-line.show {
  animation: introLineIn 3s ease-out forwards;
}

.intro-line.hide {
  animation: introLineOut 1s ease-in forwards;
}

@keyframes introLineIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    filter: blur(8px);
  }

  40% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
    filter: blur(0);
  }

  60% {
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes introLineOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
    filter: blur(6px);
  }
}

.intro-hearts-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.intro-flying-heart {
  position: absolute;
  font-size: 28px;
  animation: introHeartRise 4s ease-out forwards;
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

@keyframes introHeartRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0) rotate(0deg);
  }

  15% {
    opacity: 1;
    transform: translateY(-10vh) scale(1.2) rotate(20deg);
  }

  40% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateY(-80vh) scale(0.3) rotate(180deg);
  }
}

/* Intro glow overlay */
.intro-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 50, 150, 0.15) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: introGlowPulse 4s ease-in-out forwards;
  pointer-events: none;
}

@keyframes introGlowPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
  }

  70% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

/* ==================== MAIN CONTENT WRAPPER ==================== */
.main-content {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.main-content.visible {
  display: flex;
  animation: mainContentFadeIn 2s ease-out forwards;
}

@keyframes mainContentFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text y='24' font-size='24'>💖</text></svg>") 16 16, auto;
}

body {
  font-family: 'Comfortaa', cursive;
  animation: bodyWobble 0.5s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Separate element for the animated gradient background */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, #1a0011, #ff0066, #2d0028, #ff1493, #0d001a, #ff0088, #1a0022);
  background-size: 800% 800%;
  animation: gradientShift 4s ease infinite;
  /* Scale slightly larger so edges are covered during body shake/wobble */
  transform: scale(1.15);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  16% {
    background-position: 50% 0%;
  }

  33% {
    background-position: 100% 50%;
  }

  50% {
    background-position: 50% 100%;
  }

  66% {
    background-position: 0% 100%;
  }

  83% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes bodyWobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0.3deg) translateX(1px);
  }

  50% {
    transform: rotate(0deg) translateY(1px);
  }

  75% {
    transform: rotate(-0.3deg) translateX(-1px);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* ==================== FULL SCREEN FLASH ==================== */
.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  animation: flashBang 0.3s ease-out forwards;
}

@keyframes flashBang {
  0% {
    background: rgba(255, 100, 200, 0.5);
  }

  100% {
    background: transparent;
  }
}

/* ==================== MOUSE TRAIL ==================== */
.mouse-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 55;
  border-radius: 50%;
  animation: mouseSparkle 0.6s ease-out forwards;
}

@keyframes mouseSparkle {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0) translateY(-30px);
  }
}

/* ==================== LIGHT RAYS ==================== */
.light-rays {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.25;
  animation: raysBreath 2s ease-in-out infinite;
}

@keyframes raysBreath {
  0% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 0.15;
  }
}

.light-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 50%;
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(255, 100, 200, 0.8), transparent);
  animation: rayRotate 10s linear infinite;
  border-radius: 2px;
}

@keyframes rayRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==================== HEART PHOTO CONTAINER ==================== */
.photo-container {
  position: relative;
  z-index: 10;
  width: 320px;
  height: 320px;
  animation: heartPulse 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(255, 50, 150, 0.7)) drop-shadow(0 0 80px rgba(255, 50, 150, 0.4));
  transition: filter 0.2s ease;
}

.photo-container:hover {
  filter: drop-shadow(0 0 80px rgba(255, 50, 150, 1)) drop-shadow(0 0 120px rgba(255, 50, 150, 0.7)) drop-shadow(0 0 160px rgba(255, 0, 100, 0.5));
  animation: heartPulseHover 0.4s ease-in-out infinite;
}

@keyframes heartPulse {
  0% {
    transform: scale(1) rotate(0deg);
  }

  15% {
    transform: scale(1.12) rotate(1deg);
  }

  30% {
    transform: scale(0.97) rotate(-0.5deg);
  }

  45% {
    transform: scale(1.08) rotate(0.5deg);
  }

  60% {
    transform: scale(1) rotate(-0.3deg);
  }

  75% {
    transform: scale(1.04) rotate(0.2deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes heartPulseHover {
  0% {
    transform: scale(1.1) rotate(-1deg);
  }

  50% {
    transform: scale(1.25) rotate(1deg);
  }

  100% {
    transform: scale(1.1) rotate(-1deg);
  }
}

.heart-clip {
  width: 100%;
  height: 100%;
  clip-path: path('M160 280 C160 280 20 200 20 120 C20 60 70 30 110 30 C140 30 155 50 160 65 C165 50 180 30 210 30 C250 30 300 60 300 120 C300 200 160 280 160 280Z');
  overflow: hidden;
  position: relative;
  background: #1a0011;
}

.heart-border {
  position: absolute;
  inset: -4px;
  clip-path: path('M160 280 C160 280 20 200 20 120 C20 60 70 30 110 30 C140 30 155 50 160 65 C165 50 180 30 210 30 C250 30 300 60 300 120 C300 200 160 280 160 280Z');
  background: linear-gradient(45deg, #ff0080, #ff8c00, #ff0080, #00ffff, #ff0080);
  background-size: 300% 300%;
  animation: rainbowBorder 2s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes rainbowBorder {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

.photo-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  filter: saturate(1.3) contrast(1.1) sepia(0.08) brightness(1.1);
  animation: photoWiggle 2s ease-in-out infinite;
}

@keyframes photoWiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(1.02) rotate(0.5deg);
  }

  50% {
    transform: scale(1) rotate(0deg);
  }

  75% {
    transform: scale(1.02) rotate(-0.5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.photo-slide.active {
  opacity: 1;
}

/* Vignette overlay */
.heart-clip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ==================== PARTICLE BURST ON PHOTO CHANGE ==================== */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 15;
  border-radius: 50%;
  animation: particleBurst 1s ease-out forwards;
}

@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* ==================== FALLING HEARTS / CONFETTI ==================== */
.falling-heart {
  position: fixed;
  top: -50px;
  pointer-events: none;
  z-index: 5;
  animation: fallDown linear forwards;
  user-select: none;
}

@keyframes fallDown {
  0% {
    transform: translateY(0) rotate(0deg) scale(1) translateX(0);
    opacity: 0.9;
  }

  25% {
    transform: translateY(25vh) rotate(180deg) scale(0.9) translateX(30px);
  }

  50% {
    transform: translateY(50vh) rotate(360deg) scale(0.7) translateX(-20px);
    opacity: 0.7;
  }

  75% {
    transform: translateY(75vh) rotate(540deg) scale(0.5) translateX(15px);
  }

  100% {
    transform: translateY(calc(100vh + 60px)) rotate(720deg) scale(0.2) translateX(-10px);
    opacity: 0;
  }
}

/* ==================== CONFETTI CANNON ==================== */
.confetti-piece {
  position: fixed;
  pointer-events: none;
  z-index: 25;
  animation: confettiFly 2s ease-out forwards;
}

@keyframes confettiFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.1);
  }
}

/* ==================== STICKER FIREWORKS ==================== */
.sticker-firework {
  position: fixed;
  pointer-events: none;
  z-index: 20;
  animation: stickerPop 1.2s ease-out forwards;
}

@keyframes stickerPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  15% {
    opacity: 1;
    transform: scale(1.5) rotate(20deg);
  }

  30% {
    transform: scale(0.8) rotate(-10deg);
  }

  45% {
    transform: scale(1.2) rotate(5deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.1) rotate(-45deg) translateY(-150px);
  }
}

/* ==================== BIG STICKER FLY-THROUGH ==================== */
.big-sticker {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  animation: bigStickerFly 2.5s ease-in-out forwards;
}

@keyframes bigStickerFly {
  0% {
    transform: translate(var(--startX), var(--startY)) scale(0) rotate(-30deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform: translate(calc(50vw - 150px), calc(50vh - 150px)) scale(1.2) rotate(10deg);
    opacity: 1;
  }

  55% {
    transform: translate(calc(50vw - 150px), calc(50vh - 150px)) scale(0.9) rotate(-5deg);
  }

  60% {
    transform: translate(calc(50vw - 150px), calc(50vh - 150px)) scale(1.1) rotate(3deg);
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--endX), var(--endY)) scale(0) rotate(30deg);
    opacity: 0;
  }
}

/* ==================== TEXT SPLASHES (SHOUTS) ==================== */
.shout {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  font-family: 'Pacifico', cursive;
  font-size: clamp(36px, 7vw, 80px);
  white-space: nowrap;
  animation: shoutFly 2.5s ease-in-out forwards;
  text-shadow:
    0 0 5px var(--glow-color),
    0 0 10px var(--glow-color),
    0 0 20px var(--glow-color),
    0 0 40px var(--glow-color),
    0 0 60px var(--glow-color);
  color: white;
  font-weight: 700;
  letter-spacing: 3px;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

@keyframes shoutFly {
  0% {
    transform: translate(var(--startX), var(--startY)) scale(0) rotate(var(--rot));
    opacity: 0;
  }

  15% {
    opacity: 1;
    transform: translate(var(--midX), var(--midY)) scale(1.5) rotate(3deg);
  }

  25% {
    transform: translate(var(--midX), var(--midY)) scale(0.9) rotate(-2deg);
  }

  35% {
    transform: translate(var(--midX), var(--midY)) scale(1.2) rotate(1deg);
  }

  60% {
    transform: translate(var(--midX), var(--midY)) scale(1.1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(var(--endX), var(--endY)) scale(0) rotate(calc(-1 * var(--rot)));
    opacity: 0;
  }
}

/* ==================== SCREEN SHAKE ==================== */
.shake {
  animation: screenShake 0.5s ease-in-out !important;
}

@keyframes screenShake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  10% {
    transform: translate(-8px, 5px) rotate(-2deg);
  }

  20% {
    transform: translate(8px, -5px) rotate(2deg);
  }

  30% {
    transform: translate(-6px, 8px) rotate(-1.5deg);
  }

  40% {
    transform: translate(6px, -8px) rotate(1.5deg);
  }

  50% {
    transform: translate(-4px, 4px) rotate(-1deg);
  }

  60% {
    transform: translate(4px, -4px) rotate(1deg);
  }

  70% {
    transform: translate(-3px, 3px) rotate(-0.5deg);
  }

  80% {
    transform: translate(3px, -3px) rotate(0.5deg);
  }

  90% {
    transform: translate(-1px, 1px) rotate(-0.2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ==================== CLICK EXPLOSION ==================== */
.click-heart {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  user-select: none;
  animation: clickHeartBurst 1.2s ease-out forwards;
}

@keyframes clickHeartBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.5) rotate(0deg);
  }

  20% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(1.2) rotate(calc(var(--rot) * 0.3));
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot));
  }
}

/* ==================== EMOJI (SMALL STICKERS) ==================== */
.emoji-float {
  position: fixed;
  pointer-events: none;
  z-index: 8;
  animation: emojiDrift 3s ease-in-out forwards;
  opacity: 0.9;
}

@keyframes emojiDrift {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.9;
    transform: translate(var(--dx1), var(--dy1)) scale(1.2) rotate(30deg);
  }

  20% {
    transform: translate(var(--dx1), var(--dy1)) scale(0.8) rotate(60deg);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx2), var(--dy2)) scale(0.1) rotate(270deg);
  }
}

/* ==================== BOUNCING EMOJI ALONG EDGES ==================== */
.bouncing-emoji {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  font-size: 30px;
  animation: bounceAround 6s linear forwards;
  opacity: 0.7;
}

@keyframes bounceAround {
  0% {
    transform: translate(var(--x0), var(--y0)) scale(1);
    opacity: 0;
  }

  5% {
    opacity: 0.8;
  }

  25% {
    transform: translate(var(--x1), var(--y1)) scale(1.3) rotate(90deg);
  }

  50% {
    transform: translate(var(--x2), var(--y2)) scale(0.8) rotate(180deg);
  }

  75% {
    transform: translate(var(--x3), var(--y3)) scale(1.1) rotate(270deg);
  }

  95% {
    opacity: 0.6;
  }

  100% {
    transform: translate(var(--x4), var(--y4)) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}

/* ==================== RING WAVE FROM CENTER ==================== */
.ring-wave {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 3px solid;
  pointer-events: none;
  z-index: 12;
  animation: ringExpand 1.5s ease-out forwards;
}

@keyframes ringExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ==================== FINAL MESSAGE ==================== */
.final-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease-in;
  background: radial-gradient(ellipse at center, rgba(20, 0, 15, 0.6) 0%, transparent 70%);
}

.final-message.visible {
  opacity: 1;
}

.final-message-text {
  font-family: 'Pacifico', cursive;
  font-size: clamp(40px, 9vw, 90px);
  color: white;
  text-align: center;
  text-shadow:
    0 0 20px rgba(255, 100, 200, 0.9),
    0 0 40px rgba(255, 100, 200, 0.7),
    0 0 80px rgba(255, 100, 200, 0.5),
    0 0 120px rgba(255, 50, 150, 0.4),
    0 0 200px rgba(255, 0, 100, 0.3);
  animation: finalPulse 1.2s ease-in-out infinite, finalWobble 3s ease-in-out infinite;
  padding: 20px;
  line-height: 1.4;
}

@keyframes finalPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes finalWobble {
  0% {
    filter: hue-rotate(0deg);
  }

  33% {
    filter: hue-rotate(15deg);
  }

  66% {
    filter: hue-rotate(-15deg);
  }

  100% {
    filter: hue-rotate(0deg);
  }
}

/* ==================== PARALLAX LAYER ==================== */
.parallax-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 0.08s ease-out;
}

/* ==================== SPARKLE RING AROUND HEART ==================== */
.sparkle-ring {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
  animation: sparkleRingSpin 8s linear infinite;
}

@keyframes sparkleRingSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 200, 255, 0.9), 0 0 20px rgba(255, 100, 255, 0.5);
  animation: sparkleOrbit var(--duration) linear infinite;
  opacity: 0;
}

@keyframes sparkleOrbit {
  0% {
    opacity: 0;
    transform: rotate(var(--start-angle)) translateX(190px) scale(0.3);
  }

  10% {
    opacity: 1;
  }

  30% {
    transform: rotate(calc(var(--start-angle) + 108deg)) translateX(200px) scale(1.5);
    opacity: 1;
  }

  50% {
    transform: rotate(calc(var(--start-angle) + 180deg)) translateX(190px) scale(0.5);
    opacity: 0.6;
  }

  70% {
    transform: rotate(calc(var(--start-angle) + 252deg)) translateX(200px) scale(1.2);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(calc(var(--start-angle) + 360deg)) translateX(190px) scale(0.3);
  }
}

/* ==================== FLOATING HEARTS BACKGROUND ==================== */
.bg-heart {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  color: #ff69b4;
  font-size: 80px;
  animation: bgHeartFloat 15s ease-in-out infinite;
}

@keyframes bgHeartFloat {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform: translate(30px, -40px) rotate(10deg) scale(1.1);
  }

  50% {
    transform: translate(-20px, -80px) rotate(-5deg) scale(0.9);
  }

  75% {
    transform: translate(40px, -30px) rotate(15deg) scale(1.05);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 480px) {
  .photo-container {
    width: 240px;
    height: 240px;
  }

  .heart-clip {
    clip-path: path('M120 210 C120 210 15 150 15 90 C15 45 52.5 22.5 82.5 22.5 C105 22.5 116.25 37.5 120 48.75 C123.75 37.5 135 22.5 157.5 22.5 C187.5 22.5 225 45 225 90 C225 150 120 210 120 210Z');
  }

  .heart-border {
    clip-path: path('M120 210 C120 210 15 150 15 90 C15 45 52.5 22.5 82.5 22.5 C105 22.5 116.25 37.5 120 48.75 C123.75 37.5 135 22.5 157.5 22.5 C187.5 22.5 225 45 225 90 C225 150 120 210 120 210Z');
  }

  .sparkle-ring {
    width: 300px;
    height: 300px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .photo-container {
    width: 280px;
    height: 280px;
  }
}