/* === Smooth Luxury Stagger === */
.staggered-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.staggered-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Header/Footer Exclusion Class === */
.no-animate, header, footer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* === Hover Amplification === */
.image-hover-effect {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform, box-shadow;
}
.image-hover-effect:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}

/* Legacy animation support - will be deprecated */
.page-content [data-animate="stagger"] {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

.page-content [data-animate="stagger"].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Special animation for Yuhmmy App Store section */
[data-stagger-id="yuhmmy-app-store-section"] .yuhmmy-app-title-container,
[data-stagger-id="yuhmmy-app-store-section"] .app-store-item {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

[data-stagger-id="yuhmmy-app-store-section"] .yuhmmy-app-title-container.visible,
[data-stagger-id="yuhmmy-app-store-section"] .app-store-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Fade-in Animation === */
.fade-in-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* App store item hover effects */
/* Grid item hover and animation effects */
.grid-item {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out,
    box-shadow 0.4s ease-out;
  will-change: opacity, transform, box-shadow;
}

.grid-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Grid item hover effect - ONLY lift up without magnification */
.grid-item:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Ensure grid item images don't scale on hover */
.grid-item img {
  transition: none;
}

.grid-item:hover img {
  transform: none;
}