body {
  font-family: 'Playpen Sans', cursive;
}

.font-wedding {
  font-family: 'Alex Brush', cursive;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Tối ưu hình ảnh và lazy loading */
img {
  max-width: 100%;
  height: auto;
  transform: translateZ(0);
  will-change: transform;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Placeholder cho hình ảnh đang tải */
.card-stack-card {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Cải thiện performance cho scrolling */
.timeline-media {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

.body-no-scroll {
  height: 100vh;
  width: 100vw;
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 767px) {
  .timeline-point {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.85), rgba(248, 113, 113, 0.95));
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 25px rgba(244, 114, 182, 0.35);
    z-index: 5;
  }

  .timeline-point::after {
    content: '';
    position: absolute;
    inset: 0.35rem;
    border-radius: 9999px;
    background: #fff;
  }

  .timeline-entry {
    position: relative;
    padding-top: 2rem;
  }

  .timeline-entry::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    top: 0;
    bottom: -3.5rem;
    background: linear-gradient(180deg, rgba(231, 131, 119, 1), rgba(231, 131, 119, 1));
    z-index: 0;
  }

  .timeline-entry:first-child::before {
    top: 0.75rem;
  }

  .timeline-entry:last-child::before {
    bottom: 50%;
  }

  /* Ensure content is above the line */
  .timeline-entry > div {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .timeline-media {
    position: relative;
  }

  .timeline-media::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(231, 131, 119, 0.1), rgba(231, 131, 119, 0.75));
    border-radius: 9999px;
  }

  .timeline-media-right::before {
    left: -3rem;
  }

  .timeline-media-left::before {
    right: -3rem;
    background: linear-gradient(90deg, rgba(231, 131, 119, 0.75), rgba(231, 131, 119, 0.1));
  }

  .timeline-point {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.85), rgba(248, 113, 113, 0.95));
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 25px rgba(244, 114, 182, 0.35);
    z-index: 10;
  }

  .timeline-point::after {
    content: '';
    position: absolute;
    inset: 0.35rem;
    border-radius: 9999px;
    background: #fff;
  }

  .timeline-entry {
    position: relative;
  }

  .timeline-entry::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    top: -1.5rem;
    bottom: -1.5rem;
    background: linear-gradient(180deg, rgba(231, 131, 119, 0.75), rgba(231, 131, 119, 0.75));
    z-index: 1;
  }

  .timeline-entry:first-child::before {
    top: 50%;
  }

  .timeline-entry:last-child::before {
    bottom: 50%;
  }
}

/* Music Control */
.music-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1100;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .music-control {
    bottom: 20px;
    right: 20px;
  }
}

.music-control:hover {
  transform: scale(1.1);
}

.music-control i {
  transition: all 0.3s ease;
}

.music-control.playing .music-icon-playing {
  display: block;
  animation: spin 4s linear infinite;
}

.music-control.playing .music-icon-muted {
  display: none;
}

.music-control:not(.playing) .music-icon-playing {
  display: none;
}

.music-control:not(.playing) .music-icon-muted {
  display: block;
}

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

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

/* Custom Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  0% { transform: translateY(50px); }
  100% { transform: translateY(0);}
}

@keyframes fade-in-down {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-left {
  0% { transform: translateX(-50px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fade-in-right {
  0% { transform: translateX(50px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }
.animate-fade-in-down { animation: fade-in-down 1s ease-out forwards; }
.animate-fade-in-left { animation: fade-in-left 1s ease-out forwards; }
.animate-fade-in-right { animation: fade-in-right 1s ease-out forwards; }

@keyframes scroll-dot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

.animate-scroll-dot {
  animation: scroll-dot 2s ease-in-out infinite;
}

/* Messages Carousel */
.message-dot.active-dot {
  background-color: white !important;
  width: 1.5rem;
  opacity: 1;
}

#messages-carousel>div {
  width: 100%;
}

/* Preloader Animations */
@keyframes heart-beat {

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

  50% {
    transform: scale(1.15);
  }
}

.animate-heart-beat {
  animation: heart-beat 1.2s ease-in-out infinite;
}


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

/* Toast Notification Styles */
#toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.animate-bounce-subtle {
  animation: bounce-subtle 3s ease-in-out infinite;
}

/* Typing Animation Cursor */
.typing-cursor::after {
  content: '|';
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}