/* Header effects: the top bar slims down, hides and tracks your reading; on the homepage the headline
   is cut, painted, rewritten and pulled toward your cursor. All of it rests when motion is turned off. */

/* ---------- top bar ---------- */
.nav{transition:translate .35s var(--ease,ease)}
.nav-in{transition:padding .25s}
.logo{transition:font-size .25s}
.nav.hfx-slim .nav-in{padding-block:8px}
.nav.hfx-slim .logo{font-size:22px}
.nav.hfx-hide{translate:0 -110%}
.nav.hfx-on.hfx-on::after{display:none} /* the wave below replaces the plain line */
.nav.hfx-on{border-bottom-color:transparent}
.hfx-edge{position:absolute;left:0;bottom:-10px;width:100%;height:18px;overflow:visible;pointer-events:none}
.hfx-ink{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.hfx-brush{fill:none;stroke:var(--lime);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
@media (prefers-reduced-motion:reduce){.nav,.nav-in,.logo{transition:none}}

/* ---------- homepage headline (only with the motion layer on) ---------- */
.mo .hfx.go h1 .w{animation:none}

/* 1. the brand line arrives as cut-paper letters, then gets taped down */
.hfx-cut{display:inline-block;background:var(--bg,#fff);padding:0 .05em;margin:0 .012em;border-radius:2px;box-shadow:1px 2px 0 rgba(22,22,22,.22);rotate:var(--r,0deg)}
.hfx-cut.dot{background:none;box-shadow:none;padding:0}
.mo .hfx.go .hfx-cut{animation:hfxCut .55s var(--spring,ease) calc(.08s + var(--i) * .045s) backwards}
@keyframes hfxCut{from{opacity:0;translate:0 -.7em;rotate:calc(var(--r,0deg) * -4);scale:1.3}}
.h1-brand{position:relative}
.hfx-tape{position:absolute;width:.9em;height:.32em;background:rgba(217,246,107,.8);top:-.12em;pointer-events:none}
.hfx-tape.l{left:-.25em;rotate:-24deg}.hfx-tape.r{right:-.3em;rotate:18deg}
.mo .hfx.go .hfx-tape{animation:tape .3s ease-out .85s backwards}

/* 2. a brush paints each word in, left to right */
.hfx-p{position:relative;isolation:isolate}
.hfx-p::after{content:"";position:absolute;left:-.08em;right:-.1em;top:.2em;bottom:.08em;z-index:-1;background:var(--lime);border-radius:45% 55% 40% 60% / 60% 40% 60% 40%;transform-origin:0 50%;scale:0 1;opacity:0;pointer-events:none}
.mo .hfx.go .hfx-p{animation:hfxPaint .45s ease-out calc(.55s + var(--j) * .13s) backwards}
.mo .hfx.go .hfx-p::after{animation:hfxBrush 1.5s ease-out calc(.5s + var(--j) * .13s) forwards}
@keyframes hfxPaint{from{clip-path:inset(-30% 100% -30% -10%)}to{clip-path:inset(-30% -10% -30% -10%)}}
@keyframes hfxBrush{0%{opacity:1;scale:0 1}30%{opacity:1;scale:1 1}70%{opacity:.85;scale:1 1}100%{opacity:0;scale:1 .2}}
.mo .hfx.go .scrib path{animation-delay:1.7s}

/* 3. the rotating word: struck out in pen, then rewritten */
/* the changing word keeps a line of its own, so the headline never reflows */
.hero h1 .w:has(.hfx-rot){display:block;width:fit-content}
.hfx-rot{position:relative;display:inline-block;white-space:nowrap}
.hfx-word{display:inline-block}
.hfx-rot.out .hfx-word{opacity:0;translate:0 -.25em;transition:opacity .25s,translate .25s}
.hfx-rot.in .hfx-word{animation:hfxWrite .5s steps(10) backwards}
@keyframes hfxWrite{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% -5% -30% 0)}}
.hfx-strike{opacity:0;position:absolute;left:-4%;top:42%;width:108%;height:.3em;overflow:visible;pointer-events:none}
.hfx-strike path{fill:none;stroke:var(--tangerine);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hfx-rot.hfx-striking .hfx-strike{opacity:1}
.hfx-rot.hfx-striking .hfx-strike path{transition:stroke-dashoffset .35s ease-out;stroke-dashoffset:0}
.hfx-rot.in .hfx-strike{opacity:0;transition:opacity .2s}

/* 4. letters swell toward the cursor */
.hfx-ch{display:inline-block;transform:translateY(calc(var(--p,0) * -.07em)) scale(calc(1 + var(--p,0) * .16));transition:transform .3s var(--ease,ease),color .3s;color:color-mix(in srgb,var(--ink) calc(100% - var(--p,0) * 70%),var(--blue))}

/* the painted line rides a slow wave instead of a straight baseline */
.mo .hfx .hfx-ch,.mo .hfx h1 .scribble,.mo .hfx h1 .hl{display:inline-block;animation:hfxWave 3.2s ease-in-out calc(var(--k,0) * -.24s) infinite}
@keyframes hfxWave{0%,100%{translate:0 -.1em}50%{translate:0 .1em}}

/* 5. "WEB" is filled with a moving reel of little webfolios */
.hfx-reel{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='120'%3E%3Crect%20width='240'%20height='120'%20fill='%232B3BFF'/%3E%3Crect%20x='8'%20y='14'%20width='52'%20height='70'%20rx='5'%20fill='%23161616'/%3E%3Ccircle%20cx='34'%20cy='42'%20r='14'%20fill='%23FF6B35'/%3E%3Crect%20x='16'%20y='66'%20width='36'%20height='6'%20rx='3'%20fill='%23D9F66B'/%3E%3Crect%20x='70'%20y='40'%20width='56'%20height='66'%20rx='5'%20fill='%23FF6B35'/%3E%3Crect%20x='78'%20y='50'%20width='30'%20height='6'%20rx='3'%20fill='%23161616'/%3E%3Ccircle%20cx='98'%20cy='84'%20r='12'%20fill='%23FFB3C7'/%3E%3Crect%20x='136'%20y='8'%20width='46'%20height='58'%20rx='5'%20fill='%23CDB8FF'/%3E%3Crect%20x='144'%20y='18'%20width='22'%20height='5'%20rx='2'%20fill='%23161616'/%3E%3Crect%20x='136'%20y='74'%20width='46'%20height='36'%20rx='5'%20fill='%23161616'/%3E%3Crect%20x='190'%20y='22'%20width='44'%20height='84'%20rx='5'%20fill='%23FFB3C7'/%3E%3Crect%20x='198'%20y='34'%20width='28'%20height='28'%20rx='14'%20fill='%232B3BFF'/%3E%3Crect%20x='198'%20y='72'%20width='26'%20height='5'%20rx='2'%20fill='%23161616'/%3E%3C/svg%3E") 0 50%/auto 70% repeat-x,var(--blue);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mo .hfx-reel{animation:hfxReel 7s linear infinite}
@keyframes hfxReel{to{background-position:-240px 50%}}

/* 6. hero cards tilt toward the cursor, with a soft shine */
.hfx-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.6),transparent 50%);mix-blend-mode:soft-light}
.card.hfx-tilt .hfx-shine{opacity:1}