/* hc1 motion engine (pairs with hc1-motion.js). Every rule is gated on html.hm-on, which the
   script sets only for visitors who have not asked for reduced motion. The feel comes from each
   preview's own --motion-* tokens (its motion.css, generated from design-vars); the fallbacks
   below are only used by a preview that has no tokens yet. Nothing loops at rest. */

@property --hm-blind{syntax:'<length>';inherits:false;initial-value:0px}

/* page to page: the old page lifts away, the new one rises in */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:hm-vt-out .3s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:hm-vt-in var(--motion-dur,550ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)) both}
  @keyframes hm-vt-out{to{opacity:0;transform:translateY(-14px)}}
  @keyframes hm-vt-in{from{opacity:0;transform:translateY(20px)}}
}

/* ---------- headings ---------- */
.hm-on .hm-words .hm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hm-on .hm-words .hm-wi{display:inline-block;transition:translate var(--motion-dur,900ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),opacity var(--motion-dur,900ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),filter var(--motion-dur,900ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),letter-spacing var(--motion-dur,900ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),scale var(--motion-dur,900ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1))}
/* rise: out of a mask from below */
.hm-on[data-hm-head=rise] .hm-words .hm-wi{translate:0 108%}
/* blur: a focus pull, soft to sharp, no mask */
.hm-on[data-hm-head=blur] .hm-words .hm-w{overflow:visible}
.hm-on[data-hm-head=blur] .hm-words .hm-wi{filter:blur(10px);opacity:0;translate:0 .15em}
/* slide: in from the left, like a line being written */
.hm-on[data-hm-head=slide] .hm-words .hm-wi{translate:-110% 0}
/* spread: tracked-out letters close up into the word */
.hm-on[data-hm-head=spread] .hm-words .hm-w{overflow:visible}
.hm-on[data-hm-head=spread] .hm-words .hm-wi{letter-spacing:.35em;opacity:0}
/* slam: words land hard from slightly larger */
.hm-on[data-hm-head=slam] .hm-words .hm-w{overflow:visible}
.hm-on[data-hm-head=slam] .hm-words .hm-wi{scale:1.6;opacity:0}
.hm-on .hm-words.hm-in .hm-wi{translate:0 0;filter:none;opacity:1;letter-spacing:inherit;scale:1}

/* ---------- pictures ---------- */
.hm-on .hm-pic{transition:clip-path var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),scale var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),translate var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),rotate var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),opacity var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),filter var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),--hm-blind var(--motion-dur,1150ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1))}
.hm-on .hm-pic.hm-settle{scale:1.14}
.hm-on[data-hm-pic=wipe-up] .hm-pic{clip-path:inset(100% 0 0 0)}
.hm-on[data-hm-pic=wipe-down] .hm-pic{clip-path:inset(0 0 100% 0)}
.hm-on[data-hm-pic=wipe-side] .hm-pic{clip-path:inset(0 100% 0 0)}
.hm-on[data-hm-pic=iris] .hm-pic{clip-path:circle(0% at 50% 50%)}
.hm-on[data-hm-pic=iris] .hm-pic.hm-in{clip-path:circle(75% at 50% 50%)}
.hm-on[data-hm-pic=diagonal] .hm-pic{clip-path:polygon(0 0,0 0,0 0,0 0)}
.hm-on[data-hm-pic=diagonal] .hm-pic.hm-in{clip-path:polygon(0 0,200% 0,0 200%,0 0)}
.hm-on[data-hm-pic=blinds] .hm-pic{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 var(--hm-blind),transparent var(--hm-blind) 48px);mask:repeating-linear-gradient(to bottom,#000 0 var(--hm-blind),transparent var(--hm-blind) 48px)}
.hm-on[data-hm-pic=blinds] .hm-pic.hm-in{--hm-blind:48px}
.hm-on[data-hm-pic=focus] .hm-pic{filter:blur(16px) saturate(.6);opacity:.4}
.hm-on[data-hm-pic=plate] .hm-pic{translate:0 calc(-1 * var(--motion-dist,18px));scale:1.04;opacity:0}
.hm-on[data-hm-pic=jab] .hm-pic.hm-l{translate:calc(-1 * var(--motion-dist,70px)) 0;opacity:0}
.hm-on[data-hm-pic=jab] .hm-pic.hm-r{translate:var(--motion-dist,70px) 0;opacity:0}
.hm-on[data-hm-pic=roll] .hm-pic.hm-l{translate:calc(-1 * var(--motion-dist,80px)) 0;rotate:-5deg;opacity:0}
.hm-on[data-hm-pic=roll] .hm-pic.hm-r{translate:var(--motion-dist,80px) 0;rotate:5deg;opacity:0}
.hm-on[data-hm-pic=lift] .hm-pic{translate:0 var(--motion-dist,40px);opacity:0}
.hm-on[data-hm-pic=unfold] .hm-pic{clip-path:inset(0 0 100% 0);scale:1 .82;transform-origin:50% 0}
.hm-on[data-hm-pic=bloom] .hm-pic{clip-path:circle(0% at 50% 60%);rotate:-4deg}
.hm-on[data-hm-pic=bloom] .hm-pic.hm-in{clip-path:circle(80% at 50% 60%)}
.hm-on[data-hm-pic=strands] .hm-pic{-webkit-mask:repeating-linear-gradient(to right,#000 0 var(--hm-blind),transparent var(--hm-blind) 36px);mask:repeating-linear-gradient(to right,#000 0 var(--hm-blind),transparent var(--hm-blind) 36px)}
.hm-on[data-hm-pic=strands] .hm-pic.hm-in{--hm-blind:36px}
.hm-on .hm-pic.hm-in{clip-path:inset(0 0 0 0);scale:1;translate:0 0;rotate:0deg;opacity:1;filter:none}
.hm-on[data-hm-pic=bloom] .hm-pic.hm-in{clip-path:circle(80% at 50% 60%)}
.hm-on[data-hm-pic=iris] .hm-pic.hm-in{clip-path:circle(75% at 50% 50%)}
.hm-on[data-hm-pic=diagonal] .hm-pic.hm-in{clip-path:polygon(0 0,200% 0,0 200%,0 0)}

/* ---------- signature light passes (one pass, then gone) ---------- */
.hm-pass{position:absolute;z-index:5;pointer-events:none;overflow:hidden}
.hm-pass::after{content:"";position:absolute;inset:0;transition:transform var(--motion-sig-dur,1100ms) cubic-bezier(.45,.05,.3,1),opacity .4s ease var(--motion-sig-dur,1100ms)}
/* scan: a thin clinical light line travels down the picture once */
.hm-pass-scan::after{inset:auto 0 auto 0;top:0;height:2px;background:var(--motion-light,rgba(255,255,255,.9));box-shadow:0 0 18px 4px var(--motion-light,rgba(255,255,255,.55))}
.hm-pass-scan.go::after{transform:translateY(var(--hm-h,100%));opacity:0}
/* glint: a narrow diagonal highlight crosses once, like light off a polished edge */
.hm-pass-glint::after{inset:-20% auto -20% 0;width:28%;background:linear-gradient(100deg,transparent,var(--motion-light,rgba(255,255,255,.55)) 50%,transparent);transform:translateX(-120%) skewX(-18deg);mix-blend-mode:screen;opacity:.7}
.hm-pass-glint.go::after{transform:translateX(480%) skewX(-18deg)}
/* sheen: a broad warm wash moves across, like light over a glaze */
.hm-pass-sheen::after{inset:0;background:linear-gradient(90deg,transparent,var(--motion-light,rgba(255,236,200,.28)) 50%,transparent);transform:translateX(-100%);mix-blend-mode:screen;opacity:.4}
.hm-pass-sheen.go::after{transform:translateX(100%)}

/* pour: a soft band of light runs down the picture once, like something being poured */
.hm-pass-pour::after{inset:0;background:linear-gradient(180deg,transparent,var(--motion-light,rgba(255,220,160,.5)) 50%,transparent);transform:translateY(-100%);mix-blend-mode:screen;opacity:.45}
.hm-pass-pour.go::after{transform:translateY(100%)}

/* ---------- desktop: tilt and lean ---------- */
.hm-fine .hm-tilt{transition:transform .7s var(--motion-ease,cubic-bezier(.2,.7,.2,1))}
.hm-fine .hm-tilt.hm-tilting{transition:transform .14s linear}
.hm-fine .hm-mag:not(.hm-pull){transition:all .3s cubic-bezier(.2,.7,.2,1),translate .5s var(--motion-ease,cubic-bezier(.2,.7,.2,1))}
.hm-fine .hm-mag.hm-pull{transition:all .3s cubic-bezier(.2,.7,.2,1),translate .12s linear}