/* Premium motion layer - scroll reveals, headline masks, counters, parallax, draw-ins.
   Static HTML, no framework. Transform/opacity only (GPU friendly, zero CLS). */

/* ── Scroll reveals (auto-tagged by motion.js) ─────────────────────── */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
[data-reveal].in{opacity:1;transform:none;}

/* ── Headline word-mask (Anton display lines rise from behind a mask) ─ */
.hl-split .hlm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.hl-split .hlm-i{display:inline-block;transform:translateY(114%);transition:transform 1s cubic-bezier(.16,1,.3,1);will-change:transform;}
.hl-split.hl-in .hlm-i{transform:none;will-change:auto;}

/* ── Seam / rule draw-ins ──────────────────────────────────────────── */
.draw-x{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s;}
.draw-x.in{transform:scaleX(1);}

/* ── Hover microinteractions ───────────────────────────────────────── */
a,button{transition:transform .22s ease,opacity .22s ease,color .22s ease;}
a:hover,button:hover{transform:translateY(-1px);}
[class*="shadow"]{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease;}
[class*="shadow"]:hover{transform:translateY(-6px);}

/* Gallery tiles: slight zoom under the mask + raking light (pairs with
   .gallery-tile::after sweep in bespoke.css) */
.gallery-tile img{transition:transform .8s cubic-bezier(.16,1,.3,1),filter .4s ease;}
.gallery-tile:hover img{transform:scale(1.045);}

/* Service card photo: gentle raking-light lift (card itself already lifts
   and draws its gold ticket edge in bespoke.css) */
.service-card .img-slot{transition:filter .45s ease;}
.service-card:hover .img-slot{filter:saturate(1) sepia(.06) contrast(1.05) brightness(1.05);}

/* CTA buttons: troweled sheen sweep on hover (transform-only) */
.btn{position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;top:-4px;bottom:-4px;left:0;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-130%) skewX(-18deg);transition:transform .05s;}
.btn:hover::after{transform:translateX(300%) skewX(-18deg);transition:transform .6s cubic-bezier(.4,0,.2,1);}

/* Counters: lock width while counting so nothing shifts */
.counting{display:inline-block;min-width:var(--cw,auto);}

/* Parallax targets get their own layer */
#hero-img,.hero-ghost,.cta-ghost{will-change:transform;}

/* ── Reduced motion: everything collapses to instant / static ──────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  .hl-split .hlm-i{transform:none!important;transition:none!important;}
  .draw-x{transform:scaleX(1)!important;transition:none!important;}
  [class*="shadow"]:hover{transform:none;}
  .gallery-tile:hover img{transform:none;}
  .btn::after{display:none;}
  a:hover,button:hover{transform:none;}
}