/* ========== RESET ========== */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ========== BASE ========== */
body {
  background: #000;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* ========== HEART CONTAINER ========== */
#ui {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* breathing glow */
#ui {
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,155,191,0.4)); }
  50%     { filter: drop-shadow(0 0 18px rgba(255,155,191,0.8)); }
}

/* ========== LOVE TEXT ========== */
.love {
  position: absolute;
  transform: translate(-50%, -50%);

  background: linear-gradient(
    90deg,
    #ffb3c6,
    #ff4d6d,
    #ffd166,
    #ffb3c6
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: clamp(11px, 2.5vw, 14px);
  letter-spacing: 2px;
  white-space: nowrap;

  text-shadow: 0 0 6px rgba(255,155,191,0.6);
  animation: textFlow 8s linear infinite;
}

@keyframes textFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* ========== SNOW ========== */
#snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ========== GREETING ========== */
.greeting {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  font-size: clamp(14px, 4vw, 18px);
  letter-spacing: 3px;
  color: #fff;
  opacity: 0.9;

  text-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: floatText 5s ease-in-out infinite;
}

@keyframes floatText {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, -6px); }
}

/* ========== CREDIT ========== */
.credit {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  font-size: clamp(11px, 3vw, 13px);
  color: rgba(255,255,255,0.6);
  letter-spacing: 1px;
  user-select: none;
}

.credit span {
  color: #ff9bbf;
  text-shadow: 0 0 6px rgba(255,155,191,0.6);
}