/* Memorial Image Effects - เอฟเฟกต์พิเศษสำหรับรูปภาพ */

/* เอฟเฟกต์สำหรับรูปในหน้า Home */
.memorial-theme .slideshow img,
.memorial-theme .banner img {
    filter: grayscale(100%) brightness(0.8) contrast(1.2) !important;
    transition: all 0.8s ease !important;
}

.memorial-theme .slideshow img:hover,
.memorial-theme .banner img:hover {
    filter: grayscale(85%) brightness(1) contrast(1.3) !important;
    transform: scale(1.02) !important;
}

/* เอฟเฟกต์สำหรับรูปผู้บริหาร */
.memorial-theme .director-image,
.memorial-theme .executive-image {
    filter: grayscale(100%) brightness(0.85) contrast(1.3) !important;
    border: 3px solid #f8f8f8 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.6s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.memorial-theme .director-image:hover,
.memorial-theme .executive-image:hover {
    filter: grayscale(80%) brightness(1) contrast(1.4) !important;
    transform: translateY(-5px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
    border-color: #e8e8e8 !important;
}

/* เอฟเฟกต์แสง (Light Effect) */
.memorial-theme .director-image::before,
.memorial-theme .executive-image::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255,255,255,0.2) 50%, 
        transparent 70%) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.8s ease !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

.memorial-theme .director-image:hover::before,
.memorial-theme .executive-image:hover::before {
    transform: rotate(45deg) translate(100%, 100%) !important;
    opacity: 1 !important;
}

/* เอฟเฟกต์สำหรับรูปใน Widget */
.memorial-theme .widget img {
    filter: grayscale(100%) brightness(0.8) contrast(1.2) !important;
    border-radius: 4px !important;
    transition: all 0.4s ease !important;
}

.memorial-theme .widget img:hover {
    filter: grayscale(75%) brightness(1) contrast(1.3) !important;
    transform: scale(1.05) !important;
}

/* เอฟเฟกต์สำหรับรูปใน Counter Section */
.memorial-theme .counter img,
.memorial-theme .stats img {
    filter: grayscale(100%) brightness(0.7) contrast(1.2) !important;
    opacity: 0.7 !important;
    transition: all 0.5s ease !important;
}

.memorial-theme .counter:hover img,
.memorial-theme .stats:hover img {
    filter: grayscale(80%) brightness(1) contrast(1.4) !important;
    opacity: 1 !important;
}

/* เอฟเฟกต์การสั่นไหวอ่อนๆ */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.memorial-theme .floating-effect {
    animation: gentleFloat 3s ease-in-out infinite !important;
}

/* เอฟเฟกต์การเฟดตามลำดับ */
.memorial-theme .sequential-fade img {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.6s ease !important;
}

.memorial-theme .sequential-fade.visible img {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* เอฟเฟกต์สำหรับรูปที่มีข้อความ overlay */
.memorial-theme .image-with-text {
    position: relative !important;
    overflow: hidden !important;
}

.memorial-theme .image-with-text img {
    filter: grayscale(100%) brightness(0.75) contrast(1.3) !important;
    transition: all 0.6s ease !important;
}

.memorial-theme .image-with-text:hover img {
    filter: grayscale(80%) brightness(1) contrast(1.4) !important;
    transform: scale(1.1) !important;
}

.memorial-theme .image-with-text .text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.6)) !important;
    color: white !important;
    padding: 20px !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s ease !important;
}

.memorial-theme .image-with-text:hover .text-overlay {
    transform: translateY(0) !important;
}

/* เอฟเฟกต์การซูมแบบนุ่มนวลสำหรับรูปสำคัญ */
.memorial-theme .zoom-soft {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform !important;
}

.memorial-theme .zoom-soft:hover {
    transform: scale(1.08) !important;
}

/* เอฟเฟกต์สำหรับรูปที่มี border */
.memorial-theme .framed-image {
    border: 5px solid #f5f5f5 !important;
    box-shadow: 
        0 0 0 1px #e8e8e8,
        0 5px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.5s ease !important;
}

.memorial-theme .framed-image:hover {
    border-color: #e0e0e0 !important;
    box-shadow: 
        0 0 0 1px #d0d0d0,
        0 8px 25px rgba(0,0,0,0.2) !important;
    transform: translateY(-3px) !important;
}

/* เอฟเฟกต์การปรากฏแบบ Progressive */
.memorial-theme .progressive-fade {
    opacity: 0 !important;
    filter: blur(5px) !important;
    transition: opacity 1s ease, filter 1s ease !important;
}

.memorial-theme .progressive-fade.loaded {
    opacity: 1 !important;
    filter: blur(0px) !important;
}

/* เอฟเฟกต์สำหรับรูป Logo พิเศษ */
.memorial-theme .special-logo {
    filter: grayscale(20%) brightness(0.95) contrast(1.05) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
}

.memorial-theme .special-logo:hover {
    filter: grayscale(0%) brightness(1.1) contrast(1.2) !important;
    transform: scale(1.05) !important;
}

.memorial-theme .special-logo::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle, transparent 50%, rgba(255,255,255,0.1) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.memorial-theme .special-logo:hover::after {
    opacity: 1 !important;
}

/* เอฟเฟกต์สำหรับการแสดงผลในมือถือ */
@media (max-width: 768px) {
    .memorial-theme img {
        filter: grayscale(25%) brightness(0.92) !important;
    }
    
    .memorial-theme .hover-effects {
        /* ลดเอฟเฟกต์สำหรับมือถือ */
        transform: none !important;
        transition: filter 0.3s ease !important;
    }
    
    .memorial-theme .gentle-shake:hover {
        animation: none !important;
    }
}