/* DmApp Parallax Scrolling Styles */

/* Enable GPU acceleration for smooth parallax */
.content-card,
.announcement-card,
.moment-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Smooth transitions for parallax elements */
.content-card img,
.content-card video,
.moment-card img {
    transition: transform 0.1s ease-out;
    will-change: transform;
    transform-origin: center center;
}

/* Prevent overflow on parallax containers */
#activitiesGrid,
#momentsGrid,
#announcementsList {
    overflow: hidden;
    position: relative;
}

/* Individual card containers for parallax */
.content-card,
.moment-card {
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
}

/* Image/video scaling for depth effect */
.content-card img,
.content-card video,
.moment-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
}

/* Announcement cards parallax */
.announcement-card {
    transition: transform 0.1s ease-out;
    will-change: transform;
    transform-origin: center center;
}

/* Parallax performance optimizations */
@media (prefers-reduced-motion: reduce) {
    /* Disable parallax for users who prefer reduced motion */
    .content-card,
    .announcement-card,
    .moment-card,
    .content-card img,
    .content-card video {
        transform: none !important;
        transition: none !important;
    }
}

/* Enhanced depth effect for activities grid */
#activitiesGrid {
    perspective: 1200px;
}

#activitiesGrid .content-card {
    transform-style: preserve-3d;
}

/* Moments grid 3D depth */
#momentsGrid {
    perspective: 1200px;
}

#momentsGrid .content-card {
    transform-style: preserve-3d;
}

/* Announcements list layering */
#announcementsList {
    position: relative;
}

#announcementsList .announcement-card {
    position: relative;
    z-index: 1;
}

/* Smooth scrolling container */
.tab-content {
    scroll-behavior: smooth;
}

/* Parallax overlay gradients for depth */
.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.content-card:hover::before {
    opacity: 0.5;
}

/* Animation for initial load */
@keyframes parallaxFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-card,
.announcement-card,
.moment-card {
    animation: parallaxFadeIn 0.6s ease-out;
}

/* Stagger animation delays for cards */
.content-card:nth-child(1) { animation-delay: 0s; }
.content-card:nth-child(2) { animation-delay: 0.1s; }
.content-card:nth-child(3) { animation-delay: 0.2s; }
.content-card:nth-child(4) { animation-delay: 0.3s; }
.content-card:nth-child(5) { animation-delay: 0.4s; }
.content-card:nth-child(6) { animation-delay: 0.5s; }

.announcement-card:nth-child(1) { animation-delay: 0s; }
.announcement-card:nth-child(2) { animation-delay: 0.15s; }
.announcement-card:nth-child(3) { animation-delay: 0.3s; }

/* Enhanced hover states with parallax consideration */
.content-card:hover {
    z-index: 10;
}

.content-card:hover img,
.content-card:hover video {
    transform: scale(1.05) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce parallax intensity on mobile for performance */
    .content-card,
    .announcement-card,
    .moment-card {
        transform: none;
    }
    
    .content-card img,
    .content-card video {
        transform: none !important;
    }
}

/* High-performance mode for low-end devices */
@media (max-width: 480px) {
    /* Disable parallax completely on very small screens */
    * {
        will-change: auto !important;
    }
}