/* ==========================================================
   MOTION — restrained scroll choreography.
   Softened vs the original demo: shorter travel, shorter
   durations, no rotation/heavy scale on the home page.
   The gallery grid (.gal-grid) keeps a livelier cascade —
   it is the page allowed to "wow".
   ========================================================== */

/* Top progress bar — slim and discreet */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, #E24512);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 100;
  pointer-events: none;
  transition: transform 80ms linear;
}

/* ---------- Base reveal: gentle fade + small lift ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 560ms var(--ease-out, cubic-bezier(.16,.84,.44,1)) var(--reveal-delay, 0ms),
    transform 600ms var(--ease-out, cubic-bezier(.16,.84,.44,1)) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Eyebrow — short slide in from the left */
.sec-eyebrow[data-reveal] { transform: translate3d(-20px, 0, 0); }
.sec-eyebrow[data-reveal].is-in { transform: translate3d(0, 0, 0); }

/* Section titles — modest rise */
.sec-title[data-reveal] { transform: translate3d(0, 32px, 0); transition-duration: 640ms, 700ms; }
.sec-title[data-reveal].is-in { transform: translate3d(0, 0, 0); }

/* Lead — comes just after the title */
.sec-lead[data-reveal] {
  transform: translate3d(0, 18px, 0);
  transition-delay: calc(var(--reveal-delay, 0ms) + 80ms), calc(var(--reveal-delay, 0ms) + 80ms);
}

/* Deep-dive rows — soft lift, no big side slide */
.cap-row > div:not(.cap-row-img)[data-reveal] { transform: translate3d(0, 24px, 0); }
.cap-row > div:not(.cap-row-img)[data-reveal].is-in { transform: translate3d(0, 0, 0); }
.cap-row-img[data-reveal] {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition:
    opacity 600ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 700ms var(--ease-out) var(--reveal-delay, 0ms);
}
.cap-row-img[data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Capability tiles — simple fade-up (no rotate / heavy scale) */
.cap-tile[data-reveal] { transform: translate3d(0, 28px, 0); }
.cap-tile[data-reveal].is-in { transform: translate3d(0, 0, 0); }

/* Stats / materials / process / contact — gentle lift */
.stat[data-reveal],
.mat-cell[data-reveal],
.proc-step[data-reveal],
.contact-card[data-reveal],
.info-block[data-reveal],
.hero-card-stat[data-reveal] { transform: translate3d(0, 22px, 0); }
.stat[data-reveal].is-in,
.mat-cell[data-reveal].is-in,
.proc-step[data-reveal].is-in,
.contact-card[data-reveal].is-in,
.info-block[data-reveal].is-in,
.hero-card-stat[data-reveal].is-in { transform: translate3d(0, 0, 0); }

/* ---------- GALLERY — the lively page: cascade + scale ---------- */
.gal-grid .gal-item[data-reveal] {
  transform: translate3d(0, 48px, 0) scale(0.92);
  transform-origin: center;
  transition:
    opacity 760ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
}
.gal-grid .gal-item[data-reveal].is-in { transform: translate3d(0, 0, 0) scale(1); }

/* ---------- Hover micro-interactions ---------- */
.cap-tile { transition: transform 320ms var(--ease-out), background 240ms ease; }
.cap-tile:hover { transform: translateY(-4px); }
.mat-cell { transition: transform 320ms var(--ease-out), background 240ms ease, color 240ms ease; }
.mat-cell:hover { transform: translateY(-4px); }
.btn { transition: transform 200ms var(--ease-out), background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 220ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(226, 69, 18, 0.28); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .gal-grid .gal-item[data-reveal],
  .cap-row-img[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-progress { display: none; }
}