/* =========================================================
   WADI AL SANNA — CENTRAL MOTION SYSTEM
   Restored industrial reveal rhythm
   Scroll reveal only — no layout / sizing redesign
   ========================================================= */

:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);

  --motion-title-duration:920ms;
  --motion-text-duration:840ms;
  --motion-card-duration:900ms;
  --motion-item-duration:820ms;
  --motion-row-duration:780ms;
  --motion-image-duration:1040ms;
}


/* =========================================================
   BASE
========================================================= */

[data-motion]{
  opacity:0;

  transition-property:
    opacity,
    transform;

  transition-timing-function:
    var(--motion-ease);

  transition-delay:
    var(--motion-delay,0ms);

  will-change:
    opacity,
    transform;
}


/* =========================================================
   TITLES
========================================================= */

[data-motion="title"]{
  transform:translate3d(0,28px,0);

  transition-duration:
    var(--motion-title-duration);
}


/* =========================================================
   TEXT
========================================================= */

[data-motion="text"]{
  transform:translate3d(0,14px,0);

  transition-duration:
    var(--motion-text-duration);
}


/* =========================================================
   LINE / SMALL ACCENT
========================================================= */

[data-motion="line"]{
  transform:translate3d(0,10px,0);
  transition-duration:760ms;
}


/* =========================================================
   CARDS
   Strong industrial piano reveal
========================================================= */

[data-motion="card"]{
  transform:translate3d(0,24px,0);

  transition-duration:
    var(--motion-card-duration);
}


/* =========================================================
   NORMAL ITEMS
   Buttons / links / machine identity / technology / etc.
========================================================= */

[data-motion="item"]{
  transform:translate3d(0,15px,0);

  transition-duration:
    var(--motion-item-duration);
}


/* =========================================================
   TECHNICAL ROWS
========================================================= */

[data-motion="row"]{
  transform:translate3d(0,17px,0);

  transition-duration:
    var(--motion-row-duration);
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.motion-visible[data-motion]{
  opacity:1;
  transform:translate3d(0,0,0);
}


/* =========================================================
   IMAGE REVEAL
   One-time reveal only.
   No continuous Ken Burns.
========================================================= */

[data-motion="image"]{
  opacity:0;

  transform:
    translate3d(0,24px,0)
    scale(.985);

  transition:
    opacity var(--motion-image-duration) var(--motion-ease),
    transform var(--motion-image-duration) var(--motion-ease);

  transition-delay:
    var(--motion-delay,0ms);

  will-change:
    opacity,
    transform;
}


[data-motion="image"].motion-visible{
  opacity:1;

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


/* =========================================================
   IMAGE CONTENT
   Prevent old continuous animations
========================================================= */

.about-image-wrap img,
.machine-showcase-image img,
.industry-card-media img,
.hero-background img{
  animation:none!important;
}


/* =========================================================
   INDUSTRY IMAGE AREA
   Card moves first — image develops softly inside it.
========================================================= */

[data-motion-image-soft]{
  opacity:.18;
  transform:scale(.992);

  transition:
    opacity 950ms var(--motion-ease),
    transform 1050ms var(--motion-ease);

  will-change:
    opacity,
    transform;
}


[data-motion-image-soft].motion-visible{
  opacity:1;
  transform:scale(1);
}


/* Keep actual image itself stable */

[data-motion-image-soft] img{
  animation:none!important;
}


/* =========================================================
   HERO BACKGROUND
   Slow cinematic fade only
========================================================= */

[data-motion-ambient-image]{
  opacity:0;

  transform:scale(1.012);

  transition:
    opacity 1250ms var(--motion-ease),
    transform 1450ms var(--motion-ease);

  will-change:
    opacity,
    transform;
}


[data-motion-ambient-image].motion-visible{
  opacity:1;
  transform:scale(1);
}

/* =========================================================
   MOBILE
   Clear but restrained movement
========================================================= */

@media (max-width:767.98px){

  [data-motion="title"]{
    transform:translate3d(0,22px,0);
    transition-duration:820ms;
  }

  [data-motion="text"]{
    transform:translate3d(0,13px,0);
    transition-duration:760ms;
  }

  [data-motion="line"]{
    transform:translate3d(0,7px,0);
    transition-duration:650ms;
  }

  [data-motion="card"]{
    transform:translate3d(0,22px,0);
    transition-duration:820ms;
  }

  [data-motion="item"]{
    transform:translate3d(0,15px,0);
    transition-duration:760ms;
  }

  [data-motion="row"]{
    transform:translate3d(0,16px,0);
    transition-duration:760ms;
  }

  [data-motion="image"]{
    transform:
      translate3d(0,20px,0)
      scale(.99);

    transition-duration:900ms;
  }

  [data-motion="image"].motion-visible{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  [data-motion-image-soft]{
    opacity:.28;
    transform:scale(.995);

    transition-duration:780ms;
  }

  [data-motion-ambient-image]{
    transform:scale(1.006);

    transition:
      opacity 900ms var(--motion-ease),
      transform 1050ms var(--motion-ease);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  [data-motion],
  [data-motion-image-soft],
  [data-motion-ambient-image]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  .about-image-wrap img,
  .machine-showcase-image img,
  .industry-card-media img,
  .hero-background img{
    animation:none!important;
    transform:none!important;
  }

}