/* Flat Rock Custom — motion layer (2026-09-27).
   Everything here is opt-in: it only runs under html.motion, which motion.js adds
   when the visitor has NOT asked for reduced motion. No JS = static, fully visible page.
   To remove: delete this file, motion.js, and their two tags in each page. */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);        /* fast out, soft landing */
  --m-snap: cubic-bezier(.34, 1.56, .64, 1);    /* slight overshoot — the chalk-line "twang" */
}

/* ---------- 1. Hero entrance ---------- */
.motion .hero--min h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.motion .hero--min h1 .w > span {
  display: inline-block;
  transform: translateY(105%);
  animation: m-rise .9s var(--m-ease) forwards;
  animation-delay: calc(120ms + var(--i) * 55ms);
}
.motion .hero--min .hero__tagline,
.motion .hero--min .pill-row,
.motion .hero--min .hero__contactline {
  opacity: 0;
  animation: m-fade-up .8s var(--m-ease) forwards;
}
.motion .hero--min .hero__tagline     { animation-delay: var(--m-after, 700ms); }
.motion .hero--min .pill-row          { animation-delay: calc(var(--m-after, 700ms) + 120ms); }
.motion .hero--min .hero__contactline { animation-delay: calc(var(--m-after, 700ms) + 240ms); }

/* Wood texture: slow push-in on load, then scroll parallax via --m-par */
.motion .hero__bg {
  transform: translate3d(0, var(--m-par, 0px), 0) scale(1.06);
  animation: m-push 2.6s var(--m-ease) both;
  will-change: transform;
}
/* Rim light sweeps in once from the left */
.motion .hero__rim { animation: m-sweep 1.8s var(--m-ease) .35s both; }

@keyframes m-rise    { to { transform: translateY(0); } }
@keyframes m-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-push    { from { transform: translate3d(0, 0, 0) scale(1.16); } }
@keyframes m-sweep   { from { transform: translateX(-38%); opacity: 0; } to { transform: none; opacity: .55; } }

/* ---------- 2. Chalk-line snap above the service list ---------- */
html.js.motion .svc-list:not(.is-revealed) { border-top-color: transparent; }
.motion .svc-list { position: relative; }
.motion .svc-list.is-revealed { border-top-color: transparent; }
.motion .svc-list::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--charcoal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--m-snap);
}
.motion .svc-list.is-revealed::before { transform: scaleX(1); }
.motion .svc-list[data-reveal] { opacity: 1; transform: none; }  /* the list itself doesn't fade; its rule snaps */

/* ---------- 3. Service rows: hover ---------- */
.svc-list li {
  position: relative;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size .45s var(--m-ease), padding-left .35s var(--m-ease), color .2s;
}
.svc-list .icon { transition: transform .45s var(--m-snap); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc-list li:hover { background-size: 100% 2px; padding-left: 8px; }
  .svc-list li:hover .icon { transform: rotate(-8deg) scale(1.12); }
}

/* ---------- 4. Tape-measure scroll progress (in the header) ---------- */
.tape-progress {
  position: absolute; left: 0; right: 0; top: 100%; height: 4px;
  pointer-events: none;
  transform: scaleX(var(--m-progress, 0)); transform-origin: left center;
  background:
    repeating-linear-gradient(90deg, rgba(33,32,31,.55) 0 1px, transparent 1px 12px) left top / 100% 3px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left bottom / 100% 3px no-repeat;
  opacity: 0; transition: opacity .3s;
}
.motion .tape-progress { opacity: 1; }

/* ---------- 5. CTA band texture drifts ---------- */
.motion .cta-band__bg { transform: translate3d(0, var(--m-par, 0px), 0) scale(1.12); will-change: transform; }

/* ---------- 6. Buttons: press feel ---------- */
.motion .pill { transition-property: background-color, color, box-shadow, transform; }
.motion .pill:active { transform: translateY(1px) scale(.985); }

/* ---------- Safety: reduced motion always wins ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before { animation: none !important; transition: none !important; }
  .motion .hero--min h1 .w > span { transform: none; }
  .motion .hero--min .hero__tagline, .motion .hero--min .pill-row, .motion .hero--min .hero__contactline { opacity: 1; }
  .motion .svc-list::before { transform: scaleX(1); }
  .tape-progress { display: none; }
}

/* Background textures are taller than their frames so parallax never shows an edge */
.hero__bg, .cta-band__bg { inset: auto 0; top: -12%; height: 124%; }
html.js [data-reveal].is-revealed { will-change: auto; }