/* Scroll-reactive layer. Everything here is keyed on html.motion,
   which js/motion.js adds only when reduced motion is NOT requested. */

/* Scroll progress */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--lime); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }
html:not(.motion) .scroll-progress { display: none; }

/* Header hides on scroll down, returns on scroll up */
.site-header { transition: transform 350ms var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Hero intro */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.motion .hero__copy > * { animation: rise 900ms var(--ease) both; }
.motion .hero__copy > :nth-child(2) { animation-delay: 80ms; }
.motion .hero__copy > :nth-child(3) { animation-delay: 180ms; }
.motion .hero__copy > :nth-child(4) { animation-delay: 260ms; }

/* Rotating phrase: vertical reveal, transform + opacity only */
.motion .rotator { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.motion .rotator__item { visibility: visible; opacity: 0; transform: translateY(60%); transition: transform 700ms var(--ease), opacity 500ms var(--ease); }
.motion .rotator__item.is-active { opacity: 1; transform: none; }
.motion .rotator__item.is-leaving { opacity: 0; transform: translateY(-60%); }

/* Hero 3D stack: pointer tilt (--rx/--ry) + scroll spread (--s) */
.motion .hero__visual {
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 700ms var(--ease);
}
.motion .frame { transition: none; }
.motion .frame--industrial { transform: translate3d(calc(var(--s, 0) * -60px), calc(var(--s, 0) * -80px), -70px) rotate(calc(-3deg - var(--s, 0) * 6deg)); }
.motion .frame--hospitality { transform: translate3d(0, calc(var(--s, 0) * -30px), 0); }
.motion .frame--realestate { transform: translate3d(calc(var(--s, 0) * 70px), calc(var(--s, 0) * 30px), 90px) rotate(calc(2.5deg + var(--s, 0) * 6deg)); }

/* Kinetic band — constant speed, independent of page scroll.
   The track holds two identical copies, so moving it by -50% loops seamlessly. */
@keyframes band-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.band { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1rem, .6rem + 1vw, 1.75rem); }
.band__track { display: flex; width: max-content; }
.motion .band__track { animation: band-scroll 45s linear infinite; }
.band__track span {
  white-space: nowrap; font: 700 clamp(2rem, 1rem + 4vw, 4.5rem)/1 var(--font-display); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px #5a5e57;
}
.band__track i { font-style: normal; color: var(--red); -webkit-text-stroke: 0; font-size: .5em; vertical-align: middle; margin-inline: .4em; }

/* Process line fills as you scroll through it */
.process { position: relative; }
.motion .process::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--lime); transform-origin: left; transform: scaleX(var(--pp, 0)); }
.motion .process li::before { background: #3a3d38; transition: background-color 300ms, box-shadow 300ms; }
.motion .process li.is-lit::before { background: var(--lime); box-shadow: 0 0 0 6px rgb(201 247 85 / .15); }