/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
    scroll-behavior: smooth;
}

#back-top a {
    transition: all 0.65s ease-in-out;
    -moz-transition: all 0.65s ease-in-out;
    -webkit-transition: all 0.65s ease-in-out;
    -o-transition: all 0.65s ease-in-out;
    -ms-transition: all 0.65s ease-in-out;
}

.select-none {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

section[data-controller="gallery"][data-tab="Photos"] .gallery-item:not(.photo) {
    display: none;
}

section[data-controller="gallery"][data-tab="Videos"] .gallery-item:not(.video) {
    display: none;
}

.font-shadow {
    text-shadow: 0 2px 4px black;
}

.animate-right {
    animation: fadeInRight 800ms cubic-bezier(.62,.05,.74,.92) forwards;
}

.animate-left {
    animation: fadeInLeft 800ms cubic-bezier(.62,.05,.74,.92) forwards;
}

@keyframes fadeInRight {
    0%, 20% {
        opacity: 0;
        transform: translateX(5%);
    }
    50% {
        opacity: 0.1;
        transform: translateX(4%);
    }
    60% {
        opacity: 0.2;
        transform: translateX(3%);
    }
    70% {
        opacity: 0.3;
        transform: translateX(2%);
    }
    80% {
        opacity: 0.5;
        transform: translateX(1%);
    }
    90% {
        opacity: 0.7;
        transform: translateX(0.5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes fadeInLeft {
    0%, 20% {
        opacity: 0;
        transform: translateX(-5%);
    }
    50% {
        opacity: 0.1;
        transform: translateX(-4%);
    }
    60% {
        opacity: 0.2;
        transform: translateX(-3%);
    }
    70% {
        opacity: 0.3;
        transform: translateX(-2%);
    }
    80% {
        opacity: 0.5;
        transform: translateX(-1%);
    }
    90% {
        opacity: 0.7;
        transform: translateX(-0.5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.form-lucid {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

@media (min-width: 640px) {
    .swiper-pagination-bullet[aria-current="true"] {
        background-color: #C52031;
        opacity: 1;
    }
    .swiper-pagination-bullet {
        background-color: #8C8C8C;
        opacity: 0.5;
    }
}


@media (max-width: 640px) {
    .swiper-pagination-bullet[aria-current="true"] {
        background-color: #8C8C8C;
        opacity: 1;
    }
    .swiper-pagination-bullet {
        background-color: #FFFFFF;
        opacity: 0.5;
    }
}


#before-img img, #after-img img {
    transition: object-fit 0.3s ease;  /* Smooth fit change if switching */
    will-change: transform;  /* Optimize for mobile */
}