/* ============================================================================
   MIKE ZOOKA — motion.css · animation layer (loaded after sections.css)
   Hero line-mask reveal, staggered grid reveals, gallery + nav hover polish.
   All effects are disabled by the prefers-reduced-motion block in site.css.
   ============================================================================ */

/* hero title — line mask reveal (motion.js splits the title into .hl lines) */
.hero-title.split{opacity:1 !important;animation:none !important}
.hero-title .hl{display:block;overflow:hidden;padding:0.14em 0.1em;margin:-0.14em -0.1em}
.hero-title .hl-in{display:inline-block;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.19,1,.22,1)}
.hero-title .hl:nth-child(2) .hl-in{transition-delay:.14s}
.hero-title.split.go .hl-in{transform:none}

/* staggered child reveals — motion.js tags grid children with .sg + --d delay */
.sg{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:var(--d,0ms)}
.sg-in .sg{opacity:1;transform:none;filter:none}

/* gallery hover — accent scan line under the photo */
.gshot::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--uv);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
.gshot:hover::before{transform:scaleX(1)}

/* nav links — underline slides in from the left, out to the right */
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--uv);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}

/* marquee rows get a scroll-velocity skew from motion.js */
.marquee-row{will-change:transform}

@media (prefers-reduced-motion: reduce){
  .sg{opacity:1;transform:none;filter:none}
  .hero-title .hl-in{transform:none}
}