/* ------------------------ */
/* Motion Effect CSS */
/* ------------------------ */
.motion-item {
    opacity: 0;
    transition:
        clip-path 0.8s ease-out var(--delay, 0s),
        transform 0.8s ease-out var(--delay, 0s),
        opacity 0.5s ease-out var(--delay, 0s);
}


.motion-item.active {
    opacity: 1;
    clip-path: var(--motion-clip-end);
    transform: translate(0, 0);
}

.motion-top {
    --motion-clip-start: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    --motion-clip-end: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --motion-translate-x: 0%;
    --motion-translate-y: -100%;

    clip-path: var(--motion-clip-start);
    transform: translate(var(--motion-translate-x), var(--motion-translate-y));
}

.motion-bottom {
    /*--motion-clip-start: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);*/
    --motion-clip-start: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    --motion-clip-end: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --motion-translate-x: 0%;
    --motion-translate-y: 100%;

    clip-path: var(--motion-clip-start);
    transform: translate(var(--motion-translate-x), var(--motion-translate-y));
}

.motion-right {
    --motion-clip-start: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    --motion-clip-end: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --motion-translate-x: 100%;
    --motion-translate-y: 0%;

    clip-path: var(--motion-clip-start);
    transform: translate(var(--motion-translate-x), var(--motion-translate-y));
}

.motion-left {
    --motion-clip-start: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    --motion-clip-end: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --motion-translate-x: -100%;
    --motion-translate-y: 0%;

    clip-path: var(--motion-clip-start);
    transform: translate(var(--motion-translate-x), var(--motion-translate-y));
}

/* For 1300px – 1499px */
@media (max-width: 1499px) {
    .motion-left {
        --motion-translate-x: -50%;   /* medium slide */
    }
}

/* For 1025px – 1299px */
@media (max-width: 1299px) {
    .motion-left {
        --motion-translate-x: -35%;   /* small slide */
    }
}

/* ------------------------------------------- */
/* Delay Effect In Header Right Side Logo CSS */
/* ------------------------------------------- */

#delayedElement {
    opacity: 0;
    transition: opacity 0.3s ease; /* smooth fade-in */
    will-change: opacity;
}

#delayedElement.show {
    opacity: 1;
}

/* ---------------------------------------- */
/* Reveal Effect In Welcom Section CSS */
/* ---------------------------------------- */

.reveal-wipe {
  clip-path: inset(0 100% 0 0 round 0px); 
  transition: clip-path 1.4s ease-out;
  will-change: clip-path;
}

.reveal-wipe.reveal {
  clip-path: inset(0 0 0 0 round 0px);
}

.wipe-reveal {
    position: relative;
    overflow: visible;
}

.wipe-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(53, 53, 53);
    z-index: 999;
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform 1.2s ease-out;
    pointer-events: none;
}

.wipe-reveal.revealed::before {
    transform: scaleX(0);
}

.wipe-reveal::after {
    display: none;
}