/* ==========================================================================
   SOIL+ — motion layer (2026-10-04)
   Everything here is gated on html.motion, which motion.js sets only when
   the visitor has not asked for reduced motion. Without it the page is static.
   ========================================================================== */

/* ---------- hero: tall section, sticky stage, image drifts with scroll ---------- */
.hero__stick { position: absolute; inset: 0; overflow: hidden; }
html.motion .hero { height: 190svh; min-height: 0; overflow: visible; background: none; }
html.motion .hero__stick { position: sticky; top: 0; height: 100svh; min-height: 600px; background: var(--soil); }
html.motion .hero__img {
  height: 118%;
  translate: 0 calc(var(--p, 0) * -12%);
  scale: calc(1 + var(--p, 0) * 0.08);
}
html.motion .hero__stick::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #141210; opacity: calc(var(--p, 0) * 0.55);
}
html.motion .hero__title {
  letter-spacing: calc(0.16em + var(--p, 0) * 0.34em);
  translate: 0 calc(var(--p, 0) * -14vh);
}
html.motion .hero__sub { opacity: calc(1 - var(--p, 0) * 2.4); }
html.motion .hero.is-ready .hero__sub { transition: opacity 0.9s var(--ease) 0.5s, transform 0.9s var(--ease) 0.5s; }
html.motion .hero__scroll::after { transform-origin: top; animation: scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 600px) { html.motion .hero { height: 160svh; } }

/* ---------- headings: split into characters, rise out of a blur ---------- */
.w { display: inline-block; white-space: nowrap; }
html.motion .ch {
  display: inline-block; opacity: 0; filter: blur(8px);
  transform: translateY(0.7em) rotate(8deg); transform-origin: left bottom;
  transition: opacity 0.7s var(--ease), filter 0.9s var(--ease), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 26ms);
}
html.motion .is-split-in .ch { opacity: 1; filter: blur(0); transform: none; }

/* ---------- photos: curtain wipe on entry, then parallax inside the frame ---------- */
html.motion [data-reveal] {
  opacity: 1; transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.18, 1);
}
html.motion [data-reveal].is-in { clip-path: inset(0 0 0 0); }
.c3__photo, .c3__side, .wgrid a, .witem__fig, .mbody__fig, .wide-photo { overflow: hidden; }
html.motion .px { scale: 1.16; will-change: translate; }

/* ---------- cursor follower (fine pointers only) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out), opacity 0.3s;
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cursor.is-view { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.cursor b {
  font-family: var(--en); font-weight: 500; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #000; opacity: 0; transition: opacity 0.3s;
}
.cursor.is-view b { opacity: 1; }

/* ---------- floating image on service rows (fine pointers only) ---------- */
.hover-img {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(220px, 20vw, 300px); aspect-ratio: 4 / 5; margin: -55% 0 0 -50%;
  overflow: hidden; opacity: 0; scale: 0.85; rotate: -4deg;
  transition: opacity 0.35s var(--ease), scale 0.6s var(--ease-out), rotate 0.6s var(--ease-out);
}
.hover-img.is-on { opacity: 1; scale: 1; rotate: 0deg; }
.hover-img img { width: 100%; height: 100%; object-fit: cover; }
html.motion .svc5__row { transition: padding 0.5s var(--ease-out), color 0.4s; }
html.motion .svc5__row:hover { padding-left: 24px; }
html.motion .svc5__row:hover h3 { color: var(--rust); }

/* ---------- brand mark flips on hover (the mark is symmetric) ---------- */
.brand .lg-mark { transition: filter 0.5s var(--ease), rotate 0.9s var(--ease-out); }
.brand:hover .lg-mark { rotate: 180deg; }

/* ---------- magnetic buttons ---------- */
html.motion .cta, html.motion .btn, html.motion .inquiry__dm a { transition: translate 0.5s var(--ease-out), background 0.3s, color 0.3s; }

/* ---------- page transition: a rust curtain between pages ---------- */
.pt {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: #4b2c1b url("../img/tex-rust-3.jpg") center / cover;
  display: grid; place-items: center;
  clip-path: inset(100% 0 0 0);
}
.pt img { width: 64px; height: 64px; filter: invert(1); opacity: 0.9; }
.pt.is-cover { clip-path: inset(0 0 0 0); }
.pt.is-in { transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.18, 1); clip-path: inset(0 0 0 0); }
.pt.is-out { transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0.1s; clip-path: inset(0 0 100% 0); }