/* =========================================================
   PT DIRATAMA MAPAN SEJAHTERA
   GLOBAL MOTION SYSTEM
   ========================================================= */


/* =========================================================
   1. BASE REVEAL
   ========================================================= */

.motion-ready .reveal-section {
    opacity: 0;

    transform:
        translate3d(0, 70px, 0)
        scale(0.985);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}

.motion-ready .reveal-section.is-visible {
    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);
}


/* =========================================================
   2. SEQUENTIAL CHILD REVEAL
   ========================================================= */

.motion-ready .reveal-item {
    opacity: 0;

    transform:
        translate3d(0, 35px, 0);

    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay:
        calc(var(--reveal-delay, 0) * 90ms);

    will-change: opacity, transform;
}

.motion-ready
.reveal-section.is-visible
.reveal-item {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


/* =========================================================
   3. HERO SPECIAL ENTRANCE
   ========================================================= */

.motion-ready
.hero
.text-content
> * {
    opacity: 0;

    transform:
        translate3d(0, 30px, 0);
}

.motion-ready
.hero.is-visible
.text-content
> * {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready
.hero.is-visible
.text-content
> *:nth-child(1) {
    transition-delay: 0.05s;
}

.motion-ready
.hero.is-visible
.text-content
> *:nth-child(2) {
    transition-delay: 0.15s;
}

.motion-ready
.hero.is-visible
.text-content
> *:nth-child(3) {
    transition-delay: 0.25s;
}

.motion-ready
.hero.is-visible
.text-content
> *:nth-child(4) {
    transition-delay: 0.38s;
}


/* =========================================================
   4. PARALLAX
   ========================================================= */

.js-parallax {
    will-change: transform;

    transform:
        translate3d(
            0,
            var(--parallax-y, 0px),
            0
        );
}


/* Hero background gets subtle scale
   to prevent empty edges during movement */
.hero .slide {
    transform:
        scale(1.06)
        translate3d(
            0,
            var(--parallax-y, 0px),
            0
        );

    transition:
        opacity 1s ease-in-out,
        transform 0.15s linear;
}


/* =========================================================
   5. PARALLAX DECORATIONS
   ========================================================= */

.about-visuals .main-image-wrapper,
.about-visuals .secondary-image-wrapper,
.values-section .decor-right-text,
.services-decor,
.work-decor,
.final-cta-bg-img {
    will-change: transform;
}


/* =========================================================
   6. CARD HOVER
   Keep hover after reveal animation
   ========================================================= */

.reveal-section.is-visible
.value-card:hover {
    transform:
        translate3d(0, -5px, 0);
}

.reveal-section.is-visible
.service-card:hover {
    transform:
        translate3d(0, -5px, 0);
}

.reveal-section.is-visible
.port-card:hover img {
    transform:
        scale(1.05);
}


/* =========================================================
   7. IMAGE MICRO MOVEMENT
   ========================================================= */

.about-visuals img,
.service-card img,
.port-card img {
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   8. ACCESSIBILITY
   ========================================================= */

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

    .motion-ready .reveal-section,
    .motion-ready .reveal-item,
    .motion-ready .hero .text-content > * {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

    .js-parallax,
    .hero .slide {
        transform: none !important;

        transition: none !important;
    }

}