/* ============================================================
   GLOBAL STYLES, RESETS & ANIMATIONS
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: #f2ece4;
  color: var(--color-primary);
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: visible;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Khóa cuộn khi màn hình phong bì mở đầu đang hiển thị */
body.envelope-locked {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

/* Keyframe DrFloat (đung đưa lơ lửng bồng bềnh) */
@keyframes drFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Scroll reveal helper */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--trans-smooth), transform 0.8s var(--trans-smooth);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hỗ trợ accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient-heart, .floating-peony, .envelope-polaroid-box {
    animation: none !important;
  }
}