/* =========================================================
   Motion — every animation on the site lives here.
   Nothing is hidden unless JavaScript is running AND the visitor
   hasn't asked their device for reduced motion.
   ========================================================= */

@keyframes saw-cut { to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes kerf { from { left: 0; } to { left: 100%; } }
@keyframes kerf-out { to { opacity: 0; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drop-on-bench {
  0%   { opacity: 0; transform: translateY(-34px) rotate(-3deg) scale(1.03); }
  70%  { opacity: 1; transform: translateY(3px) rotate(.3deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes tape-pull {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes fade-swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes from-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes from-left  { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes from-zoom  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* Saw blade spinner + check mark used by the quote form button */
.saw-spin { animation: spin .7s linear infinite; flex: none; }
.check-draw path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: check-draw .5s .1s ease-out forwards; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Headline cut in with a saw pass ---------- */
  .js .saw-cut {
    position: relative;
    width: fit-content;
    clip-path: inset(-10% 100% -10% 0);
    animation: saw-cut 1s .15s cubic-bezier(.65, 0, .3, 1) forwards;
  }
  .js .saw-cut::after {
    content: "";
    position: absolute; top: -6%; bottom: -6%; left: 0;
    width: 3px;
    transform: translateX(-100%);
    background: var(--oil);
    box-shadow: 0 0 12px 2px rgba(209, 143, 58, .7);
    animation: kerf 1s .15s cubic-bezier(.65, 0, .3, 1) forwards, kerf-out .3s 1.15s forwards;
    pointer-events: none;
  }

  .js .rise { animation: rise .8s cubic-bezier(.22, .8, .24, 1) both; animation-delay: var(--d, 0s); }

  /* ---------- Hero photo stack ---------- */
  /* The stack drops onto the bench, then the back photos fan out */
  .js .bench-stack { animation: drop-on-bench .9s .35s cubic-bezier(.22, .8, .24, 1) both; }
  .js .bench.is-intro .bench-stack .bench-photo.is-next,
  .js .bench.is-intro .bench-stack .bench-photo.is-after { transform: none; }
  /* The tape measure gets pulled out from the left */
  .js .tape { animation: tape-pull 1.1s .75s cubic-bezier(.3, .7, .2, 1) both; }
  .js .bench-controls { animation: rise .7s 1.2s ease both; }
  .bench-caption.swap { animation: fade-swap .5s ease; }

  /* ---------- Scroll reveals ---------- */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .9s cubic-bezier(.22, .8, .24, 1);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .js [data-reveal="right"] { transform: translateX(34px); }
  .js [data-reveal="deal"]  { transform: translateY(30px) rotate(-2.5deg); }
  /* Logo badge spins up like a piece turning on a lathe */
  .js [data-reveal="lathe"] {
    transform: rotate(-150deg) scale(.75);
    transition: opacity .9s ease, transform 1.5s cubic-bezier(.16, .85, .25, 1);
  }
  .js [data-reveal].in-view { opacity: 1; transform: none; }

  /* ---------- Cut list: pencil lines get drawn across ---------- */
  .js .cutlist { border-top: 0; position: relative; }
  .js .cutlist::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1s cubic-bezier(.6, 0, .2, 1);
  }
  .js .cutlist.in-view::before { transform: scaleX(1); }
  .js .cut { border-bottom: 0; position: relative; }
  .js .cut::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: rgba(43, 29, 19, .28);
    transform: scaleX(0); transform-origin: left;
    transition: transform .9s cubic-bezier(.6, 0, .2, 1);
    transition-delay: calc(var(--i, 0) * 110ms + .25s);
  }
  .js .cut > * {
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .24, 1);
    transition-delay: calc(var(--i, 0) * 110ms + .1s);
  }
  .js .cut.in-view::after { transform: scaleX(1); }
  .js .cut.in-view > * { opacity: 1; transform: none; }

  /* ---------- Signature writes itself in ---------- */
  .js .signoff {
    clip-path: inset(-20% 100% -20% 0);
    transition: clip-path 1.3s cubic-bezier(.5, 0, .3, 1) .8s;
  }
  .js .in-view .signoff { clip-path: inset(-20% 0 -20% 0); }

  /* ---------- Order steps: numbers get stamped on ---------- */
  .js .steps li::before {
    opacity: 0; transform: scale(1.8);
    transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
    transition-delay: calc(var(--i, 0) * 110ms + .3s);
  }
  .js .steps li.in-view::before { opacity: 1; transform: none; }

  /* ---------- Lightbox photo changes ---------- */
  .lb-img.enter-right { animation: from-right .4s cubic-bezier(.22, .8, .24, 1); }
  .lb-img.enter-left  { animation: from-left .4s cubic-bezier(.22, .8, .24, 1); }
  .lb-img.enter-zoom  { animation: from-zoom .45s cubic-bezier(.22, .8, .24, 1); }

  /* Safety net: if the script never runs, show everything */
  .js.motion-failsafe [data-reveal],
  .js.motion-failsafe .cut > * { opacity: 1; transform: none; }
  .js.motion-failsafe .cut::after,
  .js.motion-failsafe .cutlist::before { transform: none; }
  .js.motion-failsafe .signoff { clip-path: none; }
  .js.motion-failsafe .steps li::before { opacity: 1; transform: none; }
}