/* ══════════════════════════════════════
   HERO ANIMATIONS
══════════════════════════════════════ */
.anim-hero-pre {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 1.2s ease 0.5s forwards;
}

.anim-hero-name {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1.3s ease 0.9s forwards;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   SCROLL REVEAL  (class "reveal")
   JS adds class "visible" via IntersectionObserver
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1s ease var(--d, 0s),
    transform 1s ease var(--d, 0s);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   POLAROID ENTRANCE
══════════════════════════════════════ */
.pol-left {
  opacity: 0;
  transform: rotate(-12deg) translateX(-120px);
  transition: opacity 1s ease 0.3s, transform 1s cubic-bezier(.22,1,.36,1) 0.3s;
}

.pol-right {
  opacity: 0;
  transform: rotate(12deg) translateX(120px);
  transition: opacity 1s ease 0.5s, transform 1s cubic-bezier(.22,1,.36,1) 0.5s;
}

.pol-left.visible {
  opacity: 1;
  transform: rotate(-6deg) translateX(-82px);
}

.pol-right.visible {
  opacity: 1;
  transform: rotate(5deg) translateX(82px);
}

/* ══════════════════════════════════════
   CALENDAR DAY HIGHLIGHT PULSE
══════════════════════════════════════ */
.cal-day.tiec-cuoi::before {
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,100% { transform: translate(-50%, -54%) scale(1); }
  15%     { transform: translate(-50%, -54%) scale(1.25); }
  30%     { transform: translate(-50%, -54%) scale(1); }
  45%     { transform: translate(-50%, -54%) scale(1.15); }
  60%     { transform: translate(-50%, -54%) scale(1); }
}

.cal-day.vu-quy {
  animation: softPulse 3s ease-in-out infinite;
}

@keyframes softPulse {
  0%,100% { background: rgba(255,255,255,0.15); }
  50%     { background: rgba(255,255,255,0.28); }
}

/* ══════════════════════════════════════
   COUNTDOWN FLIP  (số thay đổi)
══════════════════════════════════════ */
.flip {
  animation: flipNum 0.5s ease;
}

@keyframes flipNum {
  0%   { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════
   GALLERY HOVER SHINE
══════════════════════════════════════ */
.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0s;
  pointer-events: none;
}

.gallery-item:hover::after {
  left: 130%;
  transition: left 0.75s ease;
}

/* ══════════════════════════════════════
   EVENT BLOCK ENTRANCE
══════════════════════════════════════ */
.event-block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.event-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   HERO PARALLAX (handled by JS)
══════════════════════════════════════ */
.hero-bg {
  will-change: transform;
}

/* ══════════════════════════════════════
   SAVE PHOTO FLOAT
══════════════════════════════════════ */
.save-photo.visible {
  animation: floatPhoto 5s ease-in-out infinite;
}

@keyframes floatPhoto {
  0%,100% { transform: translateY(0); box-shadow: 0 8px 40px rgba(29,52,97,0.18); }
  50%     { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(29,52,97,0.25); }
}

/* ══════════════════════════════════════
   SCROLL HINT ARROW
══════════════════════════════════════ */
.hero-scroll {
  animation: scrollBounce 2.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,100% { opacity: 0.5; transform: translateY(0); }
  50%     { opacity: 0.9; transform: translateY(8px); }
}

/* ══════════════════════════════════════
   RING ICON SPIN
══════════════════════════════════════ */
.event-icon {
  display: inline-block;
  animation: ringWiggle 4s ease-in-out infinite;
}

@keyframes ringWiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%     { transform: rotate(-10deg) scale(1.1); }
  40%     { transform: rotate(10deg) scale(1.1); }
  60%     { transform: rotate(-5deg) scale(1.05); }
  80%     { transform: rotate(0deg) scale(1); }
}

/* ══════════════════════════════════════
   SECTION DIVIDER DRAW
══════════════════════════════════════ */
.event-divider {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.7s ease, transform 0.9s ease;
}

.event-divider.visible {
  opacity: 1;
  transform: scaleY(1);
}

/* ══════════════════════════════════════
   THANK YOU PHOTO KEN BURNS
══════════════════════════════════════ */
.thankyou-photo {
  animation: kenBurns 14s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  from { transform: scale(1)    translateX(0); }
  to   { transform: scale(1.06) translateX(-2%); }
}

/* ══════════════════════════════════════
   FOOTER FADE IN
══════════════════════════════════════ */
footer {
  opacity: 0;
  transition: opacity 1.3s ease;
}

footer.visible { opacity: 1; }