/* =================================
   Fade Up on Scroll
================================= */

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}


/* =================================
   Fade Delays
================================= */

.fade-delay-1 {
    transition-delay: 0.15s;
}

.fade-delay-2 {
    transition-delay: 0.30s;
}

.fade-delay-3 {
    transition-delay: 0.45s;
}

.fade-delay-4 {
    transition-delay: 0.60s;
}


/* =================================
   Scroll Reveal
================================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* =================================
   Service Cards Stagger
================================= */

.services-grid > *:nth-child(1) .fade-up {
    transition-delay: 0.15s;
}

.services-grid > *:nth-child(2) .fade-up {
    transition-delay: 0.30s;
}

.services-grid > *:nth-child(3) .fade-up {
    transition-delay: 0.45s;
}

.services-grid > *:nth-child(4) .fade-up {
    transition-delay: 0.60s;
}


/* =================================
   Luxury Service Card Hover
================================= */

/* Image */

.service-card-image {
    overflow: hidden;
}

.service-card-image img {
    transform: scale(1);
    transform-origin: center;
    transition:
        transform 1.6s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}


/* Title */

.service-card-title {
    transition:
        color 0.75s ease,
        letter-spacing 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}


/* Details Link */

.service-card-link {
    transition:
        letter-spacing 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}


/* Arrow */

.service-card-arrow {
    display: inline-flex;
    transition:
        transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}


/* =================================
   Service Card Hover State
================================= */

.service-card:hover .service-card-image img {
    transform: scale(1.05);
}

.service-card:hover .service-card-title {
    color: #b99150;
    letter-spacing: 0.03em;
}

.service-card:hover .service-card-link {
    letter-spacing: 0.34em;
}

.service-card:hover .service-card-arrow {
    transform: translateX(8px);
}


/* =================================
   Reduced Motion Accessibility
================================= */

@media (prefers-reduced-motion: reduce) {

    .fade-up,
    .reveal,
    .service-card-image img,
    .service-card-title,
    .service-card-link,
    .service-card-arrow {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .fade-up,
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Description */

/* Description Hover */

.service-card-description{
    opacity:.72;
    transition:
        color .75s ease,
        opacity .75s ease;
}

.service-card:hover .service-card-description{
    color:#5A4332;
    opacity:1;
}


/* =================================
   Portfolio Side Items
================================= */

.portfolio-item{
    transition:
        transform 1s cubic-bezier(.19,1,.22,1),
        box-shadow 1s ease;
}

.portfolio-item:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 55px rgba(62,44,34,.16);
}

.portfolio-image{
    transform:scale(1);
    transition:
        transform 2.4s cubic-bezier(.19,1,.22,1),
        filter 1.2s ease;
    will-change:transform;
}

.portfolio-side:hover .portfolio-image{
    transform:scale(1.07);
    filter:brightness(.88);
}

.portfolio-overlay{
    transition:
        opacity .9s ease;
}

.portfolio-content{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.19,1,.22,1);
}

.portfolio-item:hover .portfolio-content{
    opacity:1;
    transform:translateY(0);
}

.portfolio-item h4,
.portfolio-item span{
    transition:
        letter-spacing .8s ease;
}

.portfolio-item:hover span{
    letter-spacing:.36em;
}

/* =================================
   Portfolio Section
================================= */

/* ترتيب ظهور الصور */

.portfolio-grid > .portfolio-item:nth-child(1){
    transition-delay:.15s;
}

.portfolio-grid > div:nth-child(2) .portfolio-item:nth-child(1){
    transition-delay:.30s;
}

.portfolio-grid > div:nth-child(2) .portfolio-item:nth-child(2){
    transition-delay:.45s;
}


/* البطاقة */

.portfolio-item{
    transition:
        transform 1s cubic-bezier(.19,1,.22,1),
        box-shadow 1s ease;
}

.portfolio-item:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 55px rgba(62,44,34,.16);
}


/* الصورة */

.portfolio-image{
    transform:scale(1);
    transition:
        transform 2.4s cubic-bezier(.19,1,.22,1),
        filter 1.2s ease;
    will-change:transform;
}

.portfolio-feature:hover .portfolio-image{
    transform:scale(1.05);
    filter:brightness(1.02);
}

.portfolio-side:hover .portfolio-image{
    transform:scale(1.07);
    filter:brightness(1.02);
}


/* طبقة النص */

.portfolio-item > .absolute{
    transition:
        opacity .9s ease;
}


/* النص داخل الصور */

.portfolio-item h4,
.portfolio-item span{
    transition:
        transform .9s cubic-bezier(.19,1,.22,1),
        opacity .8s ease,
        letter-spacing .8s ease;
}

.portfolio-item:hover h4{
    transform:translateY(-4px);
}

.portfolio-item:hover span{
    letter-spacing:.36em;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
}

.accordion-item.active .chevron {
    transform: rotate(180deg);
}


@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fade-up 0.8s ease-out forwards;
}

.reveal {
    opacity: 0;
}

.reveal.active {
    animation: fade-up 0.8s ease-out forwards;
}