/* FIXWELL — motion layer for everything below the scroll-world hero.
   scroll-craft rules: transform / opacity / clip-path only, ease-out, hover motion
   gated to fine pointers, reduced motion keeps the fades and drops the travel.
   Nothing here targets #world or the .sw-* hero engine. */
:root {
  --fw-e: cubic-bezier(0.23, 1, 0.32, 1);
  --fw-forest: #193C34; --fw-sage: #DDE6DA; --fw-ivory: #F7F4ED; --fw-copper: #C6532D; --fw-ink: #202823;
}

/* ---------------- Floating header ---------------- */
[data-fw-glide] {
  position: absolute; top: 0; left: 0; z-index: 0; width: 100px; height: 100%;
  border-radius: 12px; background: var(--fw-sage); opacity: 0; transform-origin: 0 50%;
  transition: transform .5s var(--fw-e), opacity .25s var(--fw-e);
  pointer-events: none;
}
[data-fw-roll] { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: top; }
[data-fw-roll-in] { display: block; position: relative; transition: transform .45s var(--fw-e); }
[data-fw-roll-in]::after { content: attr(data-label); position: absolute; left: 0; top: 100%; color: var(--fw-copper); }
[data-fw-link][data-on] { color: var(--fw-forest) !important; font-weight: 600 !important; }
[data-fw-link]:focus-visible { outline: 2px solid var(--fw-copper); outline-offset: 2px; }

[data-fw-cta] { position: relative; overflow: hidden; isolation: isolate; transition: background-color .2s var(--fw-e), transform .15s var(--fw-e); }
[data-fw-cta]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(247,244,237,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--fw-e);
}
[data-fw-cta]:active { transform: scale(.97); }
[data-fw-dot] { transition: transform .5s var(--fw-e); }

@media (hover: hover) and (pointer: fine) {
  [data-fw-link]:hover [data-fw-roll-in] { transform: translateY(-100%); }
  [data-fw-cta]:hover { background: var(--fw-copper) !important; }
  [data-fw-cta]:hover::after { transform: translateX(120%); }
  [data-fw-logo]:hover [data-fw-dot] { transform: translateY(-5px) rotate(45deg); }
}

/* ---------------- Scroll reveals ---------------- */
[data-rv] { transition: opacity .9s var(--fw-e) var(--d, 0ms), transform 1.1s var(--fw-e) var(--d, 0ms); }
[data-rv="0"] { opacity: 0; transform: translate3d(0, 34px, 0); }
[data-rv="1"] { opacity: 1; transform: none; }

[data-rv-mask] { transition: clip-path 1.15s var(--fw-e) var(--d, 0ms), transform 1.15s var(--fw-e) var(--d, 0ms), opacity .6s var(--fw-e) var(--d, 0ms); }
[data-rv-mask="0"] { clip-path: inset(0 0 100% 0); transform: translate3d(0, .45em, 0); opacity: 0; }
[data-rv-mask="1"] { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; opacity: 1; }

[data-rv-wipe] { transition: clip-path 1.3s var(--fw-e) var(--d, 0ms); }
[data-rv-wipe="0"] { clip-path: inset(100% 0 0 0 round 14px); }
[data-rv-wipe="1"] { clip-path: inset(0 0 0 0 round 14px); }
[data-rv-wipe] img { transition: transform 1.6s var(--fw-e) var(--d, 0ms); }
[data-rv-wipe="0"] img { transform: scale(1.18); }

/* ---------------- Services: tilt, pointer parallax, measure-twice ---------------- */
[data-fw-frame] {
  --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--fw-e), box-shadow .6s var(--fw-e), clip-path 1.3s var(--fw-e) var(--d, 0ms);
  box-shadow: 0 0 0 rgba(25,60,52,0);
}
[data-fw-frame] [data-fw-img] {
  transform: scale(1.04) translate3d(var(--px), var(--py), 0);
  transition: transform 1s var(--fw-e);
}
/* Corner brackets: a carpenter's square at each corner. */
[data-fw-corners] i {
  position: absolute; width: 26px; height: 26px; opacity: 0; pointer-events: none;
  border: 0 solid var(--fw-ivory); transform: scale(.55);
  transition: opacity .35s var(--fw-e), transform .5s var(--fw-e);
}
[data-fw-corners] i:nth-child(1) { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; transform-origin: 0 0; }
[data-fw-corners] i:nth-child(2) { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; transform-origin: 100% 0; transition-delay: .05s; }
[data-fw-corners] i:nth-child(3) { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; transform-origin: 100% 100%; transition-delay: .1s; }
[data-fw-corners] i:nth-child(4) { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; transform-origin: 0 100%; transition-delay: .15s; }
/* Tape measure: ticks hang from the top edge, drawn left to right. */
[data-fw-ruler] {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none;
  background:
    linear-gradient(var(--fw-copper), var(--fw-copper)) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(247,244,237,.95) 0 1.5px, transparent 1.5px 60px) 0 3px / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, rgba(247,244,237,.85) 0 1px, transparent 1px 12px) 0 3px / 100% 8px no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--fw-e);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
/* Peek panel: a real project example slides up out of the photo. */
[data-fw-peek] {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(247,244,237,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(25,60,52,.45);
  opacity: 0; transform: translate3d(0, calc(100% + 18px), 0);
  transition: transform .6s var(--fw-e), opacity .35s var(--fw-e);
}
[data-fw-peek-k] { grid-column: 1 / -1; font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fw-copper); }
[data-fw-peek-v] { font: 600 17px/1.3 Manrope, sans-serif; letter-spacing: -0.02em; color: var(--fw-ink); }
[data-fw-peek-go] { display: flex; gap: 8px; align-items: center; white-space: nowrap; font: 600 13px Inter, sans-serif; color: var(--fw-forest); }
[data-fw-name] {
  background: linear-gradient(var(--fw-copper), var(--fw-copper)) 0 100% / 0 2px no-repeat;
  transition: background-size .6s var(--fw-e); padding-bottom: 2px;
}
[data-fw-arrow] { transition: transform .45s var(--fw-e), color .3s; }
[data-fw-card]:active [data-fw-frame] { transform: perspective(1100px) scale(.985); }
[data-fw-card]:focus-visible [data-fw-frame] { outline: 2px solid var(--fw-copper); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  [data-fw-card]:hover [data-fw-frame] { box-shadow: 0 40px 70px -40px rgba(25,60,52,.55); }
  [data-fw-card]:hover [data-fw-img] { transform: scale(1.1) translate3d(var(--px), var(--py), 0); }
  [data-fw-card]:hover [data-fw-corners] i { opacity: 1; transform: scale(1); }
  [data-fw-card]:hover [data-fw-ruler] { clip-path: inset(0 0 0 0); }
  [data-fw-card]:hover [data-fw-peek] { opacity: 1; transform: none; }
  [data-fw-card]:hover [data-fw-name] { background-size: 100% 2px; }
  [data-fw-card]:hover [data-fw-arrow] { transform: translate(4px, -4px); color: var(--fw-copper) !important; }
}
[data-fw-card]:focus-visible [data-fw-peek] { opacity: 1; transform: none; }

/* ---------------- Gallery ---------------- */
[data-fw-gframe] { --px: 0px; --py: 0px; transition: box-shadow .6s var(--fw-e), clip-path 1.3s var(--fw-e) var(--d, 0ms); }
[data-fw-gframe] [data-fw-img] { transform: scale(1.03) translate3d(var(--px), var(--py), 0); transition: transform 1s var(--fw-e); }
[data-fw-gframe]::after {
  content: "View project  \2197"; position: absolute; left: 14px; bottom: 14px;
  padding: 9px 14px; border-radius: 999px; background: rgba(247,244,237,.94);
  font: 600 13px Inter, sans-serif; color: var(--fw-forest); white-space: pre;
  opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .3s var(--fw-e), transform .5s var(--fw-e);
}
[data-fw-gcard] { transition: transform .5s var(--fw-e); }
@media (hover: hover) and (pointer: fine) {
  [data-fw-gcard]:hover { transform: translate3d(0, -6px, 0); }
  [data-fw-gcard]:hover [data-fw-gframe] { box-shadow: 0 30px 60px -34px rgba(25,60,52,.55); }
  [data-fw-gcard]:hover [data-fw-img] { transform: scale(1.09) translate3d(var(--px), var(--py), 0); }
  [data-fw-gcard]:hover [data-fw-gframe]::after { opacity: 1; transform: none; }
}

/* ---------------- Line sweeps: trust pillars + why-us features ---------------- */
[data-fw-sweep] { position: relative; }
[data-fw-sweep]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--fw-copper);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--fw-e);
}
[data-fw-sweep] > i { display: inline-block; transition: transform .5s var(--fw-e), color .3s; }
@media (hover: hover) and (pointer: fine) {
  [data-fw-sweep]:hover::before { transform: scaleX(1); }
  [data-fw-sweep]:hover > i { transform: translateY(-4px) rotate(-10deg); color: var(--fw-copper) !important; }
}

/* ---------------- CTA band: blueprint drawn by scroll + pointer light ---------------- */
section[data-screen-label="CTA band"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 40%), rgba(221,230,218,.14), transparent 62%);
  opacity: var(--spot, 0); transition: opacity .6s var(--fw-e);
}
section[data-screen-label="CTA band"] svg { stroke-opacity: .2; }

/* Large photos that drift under scroll get headroom so the edges never show. */
[data-fw-drift] { will-change: transform; }

/* ---------------- Reduced motion: keep the fades, drop the travel ---------------- */
@media (prefers-reduced-motion: reduce) {
  [data-rv="0"], [data-rv-mask="0"] { transform: none; }
  [data-rv-mask="0"], [data-rv-wipe="0"] { clip-path: none; }
  [data-rv-wipe="0"] img { transform: none; }
  [data-fw-frame] { transform: none !important; }
  [data-fw-glide], [data-fw-roll-in], [data-fw-peek], [data-fw-ruler] { transition-duration: .01s !important; }
}

/* ---------------- Small phones: keep logo, estimate button and menu inside the bar ---------------- */
@media (max-width: 480px) {
  [data-fw-header] { padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; }
  [data-fw-bar] > div { gap: 10px !important; padding: 8px 8px 8px 16px !important; }
  [data-fw-logo] > span:first-child { font-size: 16px !important; letter-spacing: .12em !important; }
  [data-fw-cta] { padding: 11px 14px !important; font-size: 13px !important; }
  [data-fw-header] button[aria-controls="mobile-menu"] { width: 42px !important; height: 42px !important; }
}