/**
 * BERANDA ANIMATIONS
 * Animasi scroll dan hover untuk halaman beranda
 */

/*====================================================
   SCROLL REVEAL ANIMATIONS - SOFT POP
   Elemen muncul saat scroll dengan efek pop halus
====================================================*/

/* Reveal dasar - soft pop */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade,
.reveal-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Hapus will-change - performance issue */
}

/* Tapi jangan animasikan carousel container - menyebabkan getar */
.gallery-fullwidth-area.reveal-fade,
.teachers-large-carousel-area.reveal-fade,
.blog-fullwidth-area.reveal-fade,
.testimonial-carousel-area.reveal-fade {
    transform: none !important;
    transition: opacity 0.6s ease !important;
}

.gallery-fullwidth-area.reveal-fade.active,
.teachers-large-carousel-area.reveal-fade.active,
.blog-fullwidth-area.reveal-fade.active,
.testimonial-carousel-area.reveal-fade.active {
    opacity: 1 !important;
    transform: none !important;
}

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active,
.reveal-fade.active,
.reveal-up.active {
    opacity: 1;
    transform: scale(1);
}

/* Staggered delay untuk multiple elements */
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }
.reveal.delay-400 { transition-delay: 0.4s; }
.reveal.delay-500 { transition-delay: 0.5s; }

/*====================================================
   ENHANCED CARD HOVER ANIMATIONS
   Animasi hover untuk semua kartu
====================================================*/

/* --- ACTIVITY CARD --- */
.activity .single-activity {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    border-radius: 8px;
    background: #fff;
}

/* Hapus gradient overlay - terlalu berlebihan */

.activity .single-activity:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(27, 180, 185, 0.12);
    background: linear-gradient(to bottom, #ffffff, #fafdfd);
}

.activity .single-activity-icon {
    transition: all 0.35s ease;
    position: relative;
}

.activity .single-activity:hover .single-activity-icon {
    color: #1bb4b9;
    transform: scale(1.1);
}

.activity .single-activity h4 {
    position: relative;
    transition: color 0.35s ease;
}

.activity .single-activity:hover h4 {
    color: #1bb4b9;
}

.activity .single-activity p {
    position: relative;
}

/* --- SERVICE CARD --- */
.single-service-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.single-service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #1bb4b9, #17a2a8);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 4px 0 0 4px;
}

.single-service-item:hover::before {
    transform: scaleY(1);
}

.single-service-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(27, 180, 185, 0.12);
    background: rgba(27, 180, 185, 0.03);
}

.single-service-icon {
    transition: color 0.3s ease;
}

.single-service-item:hover .single-service-icon {
    color: #1bb4b9;
}

.single-service-text h4 {
    transition: color 0.3s ease;
}

.single-service-item:hover .single-service-text h4 {
    color: #1bb4b9;
}

/* --- FUN FACTOR / STATS CARD --- */
.single-fun-factor {
    /* Animasi hover dihapus - tidak ada efek saat disentuh */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* --- TESTIMONIAL CARD --- */
.single-testimonial-carousel {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.single-testimonial-carousel:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(27, 180, 185, 0.15) !important;
}

/* --- BLOG/BERITA CARD --- */
.single-blog-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-blog-item:hover {
    /* Hapus translateY - menyebabkan terpotong di overflow container */
    /* transform: translateY(-5px); */
    box-shadow: 0 12px 35px rgba(27, 180, 185, 0.2);
}

.single-blog-item h4 a {
    transition: color 0.3s ease;
}

/* --- GALERI ITEM --- */
.single-items {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-items:hover {
    /* Hapus translateY - menyebabkan terpotong di overflow container */
    /* transform: translateY(-5px); */
    box-shadow: 0 12px 35px rgba(27, 180, 185, 0.2);
}

/* --- TINGKAT CARD --- */
.tingkat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tingkat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(27, 180, 185, 0.2);
}

/* --- ADVERTISE BUTTON --- */
.advertise-area a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advertise-area a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(27, 180, 185, 0.4);
}

/*====================================================
   BUTTON ANIMATIONS
====================================================*/

.button-default, .btn-primary {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-default:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(27, 180, 185, 0.3);
}

.button-default:active, .btn-primary:active {
    transform: translateY(0);
}

/*====================================================
   RESPONSIVE
====================================================*/

@media (max-width: 768px) {
    /* Reduce animation intensity on mobile */
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        transform: translateY(40px);
    }

    .reveal-left {
        transform: translateX(-50px);
    }

    .reveal-right {
        transform: translateX(50px);
    }

    .activity .single-activity:hover,
    .guru-card:hover {
        transform: translateY(-5px);
    }
}