/* ==========================================================================
   CPM SYSTEMS — Motion
   Professional, fast, restrained. Everything here is disabled under
   prefers-reduced-motion (see bottom of file).
   ========================================================================== */

/* Scroll reveal — content is only hidden when JS is running (html.js),
   so the site stays fully readable without JavaScript. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
@media (min-width: 992px) {
  .js [data-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
  .js [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
}
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Image mask reveal (architectural "wipe") */
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 72% 0); transition: clip-path 1.3s var(--ease-in-out); }
.js [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

/* Hero entrance */
.js .hero .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero.is-ready .line > span { transform: none; }
.js .hero.is-ready .line:nth-child(2) > span { transition-delay: .12s; }
.js .hero [data-hero-fade] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delay, .35s); }
.js .hero.is-ready [data-hero-fade] { opacity: 1; transform: none; }

/* Ken Burns — slow, subtle */
.kenburns { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Floating cards gentle drift */
.float-card { animation: drift 7s ease-in-out infinite; }
.float-card:nth-child(2) { animation-delay: -2.3s; }
.float-card:nth-child(3) { animation-delay: -4.6s; }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(214,168,95,.2); } 50% { box-shadow: 0 0 0 8px rgba(214,168,95,.05); } }
@keyframes scrollcue { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes tabprogress { from { width: 0; } to { width: 100%; } }
@keyframes loaderbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes bob { 0%,100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(4px, -4px); } }

/* Stagger helper: children of [data-stagger] get incremental delays via JS (--delay) */

/* --------------------------------------------------------------------------
   Reduced motion: remove non-essential movement, keep state changes instant.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js .hero .line > span, .js .hero [data-hero-fade] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .kenburns, .float-card, .logos__track { animation: none !important; }
  .hero__canvas { display: none; }
  .cursor, .cursor-dot { display: none !important; }
}