/* Opening greeting: a clean paper page, one raised paw, a high five before the prologue film */
.hf-stage{--hf-paper:#f4f2ed;--hf-ink:#2a2823;--hf-muted:#8a8378;position:absolute;inset:0;z-index:1;display:none;overflow:hidden;background:var(--hf-paper);color:var(--hf-ink);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:opacity .8s ease .35s}
.hf-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.arrival-gate.is-greeting .hf-stage{display:block}
.arrival-gate.is-greeting .arrival-invitation,.arrival-gate.is-greeting .arrival-bottom output{visibility:hidden}
.arrival-gate.is-greeting .arrival-top,.arrival-gate.is-greeting .arrival-bottom{color:#2a2823}
.arrival-gate.is-greeting .arrival-top>span{visibility:hidden}
.arrival-gate.is-greeting .arrival-top button,.arrival-gate.is-greeting .arrival-bottom button{border-color:#2a282340;background:#fffdf8aa;color:#2a2823}
.arrival-gate.is-greeting .arrival-top button:hover,.arrival-gate.is-greeting .arrival-bottom button:hover{background:#2a2823;color:#fff}
.arrival-gate.is-greeting .arrival-bottom>span{color:#8a8378}

.hf-top{position:absolute;left:36px;top:30px;display:flex;gap:28px;font:11px var(--mono);letter-spacing:1.5px;color:var(--hf-muted);animation:hf-fade 1s ease .2s both}

/* The paw floats like a specimen on the page: the forearm dissolves into the paper */
.hf-paw{position:absolute;left:50%;top:46%;height:min(62vh,640px);aspect-ratio:372/949;padding:0;border:0;background:none;color:inherit;cursor:inherit;transform:translate(-50%,-50%) translateX(var(--lean,0px)) translateY(var(--drop,0%)) rotate(var(--tilt,0deg));transform-origin:50% 80%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hf-paw::before{content:"";position:absolute;left:-40%;right:-40%;top:-8%;height:70%;border-radius:50%;background:radial-gradient(closest-side,#e7dfd1,#ebe5da99 55%,transparent);filter:blur(6px);z-index:-1}
.hf-paw:focus-visible{outline:none}
.hf-paw:focus-visible .hf-target i{border-width:3px}
.hf-bob{position:absolute;inset:0;display:block;transform-origin:50% 80%;animation:hf-rise 1.2s cubic-bezier(.2,.9,.25,1.05) .3s both,hf-bob 3.8s ease-in-out 1.5s infinite}
.hf-bob img{width:100%;height:100%;display:block;pointer-events:none;transform-origin:57% 25%;filter:drop-shadow(0 18px 22px #5b4a3526);-webkit-mask:linear-gradient(0deg,transparent 12%,#000 62%);mask:linear-gradient(0deg,transparent 12%,#000 62%)}
.hf-target{position:absolute;left:57%;top:19%;width:48%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s}
.hf-target i{position:absolute;inset:0;border:1.5px solid #b5553f;border-radius:50%;animation:hf-ping 2.2s ease-out 1.6s infinite both}
.hf-target b{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);white-space:nowrap;font:500 12px var(--sans);letter-spacing:1px;color:var(--hf-ink);background:#fffdf8;border:1px solid #2a282326;border-radius:30px;padding:7px 13px;animation:hf-fade-up .6s ease 1.7s both}
.hf-target b::before{content:"";position:absolute;right:100%;top:50%;width:18px;height:1px;background:#2a282355}

.hf-caption{position:absolute;left:24px;right:24px;top:calc(46% + min(31vh,320px) + 12px);text-align:center;animation:hf-fade 1s ease .6s both}
.hf-caption h1{font:400 clamp(22px,2.2vw,30px)/1.3 'Cormorant Garamond',Georgia,'Times New Roman',serif;letter-spacing:.3px;margin:0}
.hf-caption p{font:12px/1.8 var(--sans);letter-spacing:2px;color:var(--hf-muted);margin:10px 0 0}
.hf-mark{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:grid;justify-items:center;gap:5px;color:#6f685d;animation:hf-fade 1s ease .8s both}
.hf-mark b{display:grid;place-items:center;width:20px;height:26px;border:1px solid currentColor;border-radius:10px 10px 2px 2px;font:400 13px/1 Georgia,serif}
.hf-mark span{font:8px var(--mono);letter-spacing:2px}
.hf-credit{position:absolute;right:36px;bottom:80px;font:10px var(--mono);letter-spacing:.5px;color:#a39b8e}

/* Cursor: a human palm meets the paw */
.hf-cursor{display:none;position:absolute;left:0;top:0;z-index:6;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0)}
.hf-cursor>div{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:1px;background:#2a2823e6;color:#f4f2ed;box-shadow:0 10px 24px #2a282333;transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .25s}
.hf-cursor svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hf-cursor span{font:9px var(--mono);letter-spacing:1px}
.hf-stage.is-over-paw .hf-cursor>div{transform:scale(1.15);background:#b5553f}
.hf-stage.is-pressing .hf-cursor>div{transform:scale(.86)}
@media (hover:hover) and (pointer:fine){.hf-stage{cursor:none}.hf-stage.has-cursor .hf-cursor{display:block}}

/* Impact, drawn in ink and pigment instead of light */
.hf-fx{position:absolute;left:var(--hx,50%);top:var(--hy,40%);width:0;height:0;z-index:5;pointer-events:none}
.hf-fx>*{position:absolute;left:0;top:0}
.hf-flash{width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(#f3d9aecc,#ecd0a066 35%,transparent 68%);animation:hf-flash .6s ease-out forwards}
.hf-ring{width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;border:1.5px solid #8a6a48;animation:hf-ring .85s cubic-bezier(.1,.7,.3,1) forwards}
.hf-ring+.hf-ring{border-color:#b5553f;animation-delay:.09s}
.hf-ray{width:2px;height:26px;margin-left:-1px;border-radius:2px;background:#2a2823;transform-origin:50% 0;animation:hf-ray .55s cubic-bezier(.1,.7,.3,1) forwards}
.hf-bit{width:var(--s);height:calc(var(--s)*.56);margin:calc(var(--s)*-.28) 0 0 calc(var(--s)*-.5);background:var(--c);border-radius:0 80% 0 80%;animation:hf-bit var(--t,1s) cubic-bezier(.12,.7,.3,1) forwards}
.hf-bit.is-print{height:var(--s);margin-top:calc(var(--s)*-.5);background:none;border-radius:0;color:var(--c)}
.hf-bit.is-print svg{width:100%;height:100%;fill:currentColor}
.hf-word{--wx:80px;--wy:-150px;transform:translate(var(--wx),var(--wy));white-space:nowrap;color:var(--hf-ink);animation:hf-word 1s cubic-bezier(.3,1.6,.5,1) forwards}
.hf-word strong{display:block;font:700 clamp(52px,5.5vw,80px)/1 'Songti SC','Noto Serif SC',Georgia,serif}
.hf-word span{display:block;margin-top:6px;font:11px var(--mono);letter-spacing:3px;color:#b5553f}

.hf-stage.is-hitting .hf-target,.hf-stage.is-hitting .hf-cursor{opacity:0}
.hf-stage.is-hitting .hf-bob{animation:none}
.hf-stage.is-hitting .hf-bob img{animation:hf-punch .5s cubic-bezier(.3,.7,.3,1) forwards}
.hf-stage.is-hit{animation:hf-shake .34s linear}
.hf-stage.is-stamped .hf-caption{animation:hf-swap .5s ease}

/* Leaving: the paw sinks, the page fades into the film */
.hf-stage.is-leaving{pointer-events:none;opacity:0}
.hf-stage.is-leaving .hf-paw{--drop:30%;transition:transform .9s cubic-bezier(.6,0,.75,.3)}
.hf-stage.is-leaving .hf-fx{opacity:0;transition:opacity .4s}

@keyframes hf-fade{from{opacity:0}}
@keyframes hf-swap{0%{opacity:0;transform:translateY(6px)}}
@keyframes hf-rise{from{opacity:0;transform:translateY(24%) rotate(5deg)}60%{opacity:1}75%{transform:translateY(-2%) rotate(-1.2deg)}}
@keyframes hf-bob{0%,100%{transform:none}30%{transform:translateY(-1.4%) rotate(-1.2deg)}62%{transform:translateY(-.4%) rotate(1deg)}}
@keyframes hf-ping{0%{transform:scale(.7);opacity:0}25%{opacity:.8}100%{transform:scale(1.35);opacity:0}}
@keyframes hf-fade-up{from{opacity:0;transform:translate(-8px,-50%)}}
@keyframes hf-punch{0%{transform:none}30%{transform:translateY(3%) scale(.94)}52%{transform:translateY(-4%) scale(1.16) rotate(-2deg)}72%{transform:translateY(-2%) scale(1.08) rotate(1deg)}100%{transform:translateY(-1%) scale(1.06)}}
@keyframes hf-flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes hf-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes hf-ray{0%{transform:rotate(var(--a)) translateY(46px) scaleY(.2);opacity:.8}100%{transform:rotate(var(--a)) translateY(140px) scaleY(1);opacity:0}}
@keyframes hf-bit{0%{transform:scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1);opacity:0}}
@keyframes hf-word{0%{opacity:0;transform:translate(var(--wx),var(--wy)) scale(.3) rotate(-14deg)}35%{opacity:1;transform:translate(var(--wx),calc(var(--wy) - 10px)) scale(1.12) rotate(-6deg)}60%,85%{opacity:1;transform:translate(var(--wx),calc(var(--wy) - 10px)) scale(1) rotate(-6deg)}100%{opacity:0;transform:translate(var(--wx),calc(var(--wy) - 40px)) scale(.96) rotate(-6deg)}}
@keyframes hf-shake{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-2px,2px)}80%{transform:translate(1px,-1px)}}

@media (max-width:760px){
 .hf-top{left:18px;top:74px;gap:14px;font-size:9px}
 .hf-paw{top:44%;height:min(54svh,520px)}
 .hf-caption{top:calc(44% + min(27svh,260px) + 8px)}
 .hf-caption p{font-size:11px;letter-spacing:1px}
 .hf-target b{left:auto;right:calc(100% + 14px);font-size:11px;padding:6px 11px}
 .hf-target b::before{right:auto;left:100%}
 .hf-word{--wx:-40px;--wy:-170px}
 .hf-credit{right:auto;left:50%;transform:translateX(-50%);bottom:74px;white-space:nowrap}
 .hf-mark{display:none}
}
@media (prefers-reduced-motion:reduce){
 .hf-top,.hf-caption,.hf-mark,.hf-bob,.hf-target i,.hf-target b{animation:none}
 .hf-stage.is-hit,.hf-stage.is-hitting .hf-bob img{animation:none}
 .hf-stage.is-leaving .hf-paw{transition:none}
}