/* ============================================================
   Base Reset & Layout
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

body {
  background:
    radial-gradient(ellipse at 50% 5%, rgba(255, 210, 235, 0.55) 0%, transparent 55%),
    linear-gradient(180deg,
      #ffffff 0%,
      #fff0f5 30%,
      #ffd6e8 68%,
      #ffb6d9 100%
    );
  min-height: 100vh;
}

/* ============================================================
   Particle Canvas
   ============================================================ */
#particleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* ============================================================
   Hint Text
   ============================================================ */
.hint-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(176, 0, 80, 0.90);
  font-family: 'Great Vibes', 'Georgia', cursive;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(220, 50, 120, 0.40),
    0 0 28px rgba(190, 10,  70, 0.22);
  animation: hint-pulse 2.2s ease-in-out infinite;
  z-index: 8;
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

.hint-text.hidden {
  opacity: 0 !important;
  filter: blur(8px);
  transform: translate(-50%, -50%) scale(0.82) !important;
  animation: none;
}

/* ============================================================
   Center Container
   ============================================================ */
.center-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition:
    opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

.center-container.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   Heart Wrapper
   ============================================================ */
.heart-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Big Glowing Heart
   ============================================================ */
.big-heart {
  display: block;
  font-size: clamp(160px, 32vw, 340px);
  line-height: 1;
  color: #f48fb1;
  animation:
    heartbeat  1.35s ease-in-out infinite,
    glow-pulse 2.6s  ease-in-out infinite;
  will-change: transform, filter;
}

/* ============================================================
   Love Text  — fade-in scale reveal
   ============================================================ */
.love-text-clip {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3em 0.6em;
  pointer-events: none;
  white-space: nowrap;
}

.love-text {
  display: block;
  white-space: nowrap;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.5rem, 4.2vw, 3.4rem);
  color: #7b0034;
  text-shadow:
    0  1px  3px rgba(255, 255, 255, 0.95),
    0  0   14px rgba(255, 220, 235, 0.75),
    0  0   30px rgba(160,   0,  60, 0.28);
  opacity: 0;
  transform: scale(0.78);
}

.love-text.writing {
  animation: fade-scale-in 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes hint-pulse {
  0%, 100% {
    opacity: 0.60;
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1);    }
  15%       { transform: scale(1.22); }
  30%       { transform: scale(1.02); }
  45%       { transform: scale(1.14); }
  65%       { transform: scale(1);    }
}

@keyframes glow-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 4px 12px rgba(244, 143, 177, 0.60))
      drop-shadow(0 0  30px rgba(244, 143, 177, 0.32));
  }
  50% {
    filter:
      drop-shadow(0 4px 22px rgba(244, 143, 177, 0.85))
      drop-shadow(0 0  55px rgba(244, 143, 177, 0.55))
      drop-shadow(0 0  90px rgba(233,  30,  99, 0.18));
  }
}

@keyframes fade-scale-in {
  0%   { opacity: 0; transform: scale(0.78); }
  100% { opacity: 1; transform: scale(1);    }
}

/* ============================================================
   Responsive Tweaks
   ============================================================ */
@media (max-width: 768px) {
  @keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 3px 10px rgba(244, 143, 177, 0.55)); }
    50%       { filter: drop-shadow(0 3px 18px rgba(244, 143, 177, 0.80)); }
  }
  .big-heart {
    will-change: transform;
  }
}

@media (max-width: 480px) {
  .love-text {
    font-size: clamp(1.1rem, 7vw, 1.9rem);
  }
  .love-text-clip {
    top: 55%;
  }
}

@media (max-width: 360px) {
  .big-heart {
    font-size: clamp(130px, 40vw, 160px);
  }
}