/* ---------- WHAT WE PRINT (pink stock) ---------- */
.print{background:var(--pink);overflow:clip}
.print .wrap{position:relative;height:980px}
.corner{position:absolute;font:72px/72px var(--display);animation:corner 1.3s var(--spring) both}
.c1{left:48px;top:48px;color:var(--red);--x:-50px;--y:-50px}
.c2{right:48px;top:48px;color:var(--blue);--x:50px;--y:-50px;animation-delay:.1s}
.c3{left:48px;bottom:48px;color:var(--blue);--x:-50px;--y:50px;animation-delay:.2s}
.c4{right:48px;bottom:48px;color:var(--red);--x:50px;--y:50px;animation-delay:.3s}
@keyframes corner{from{transform:translate(var(--x),var(--y))}}
.fold-v,.fold-h{position:absolute;background:rgba(29,27,27,.08)}
.fold-v{left:50%;top:0;width:1px;height:100%;animation:foldV 1.6s var(--out) both}
.fold-h{left:0;top:490px;width:100%;height:1px;animation:foldH 1.6s var(--out) .2s both}
@keyframes foldV{from{transform:scaleY(0)}}
@keyframes foldH{from{transform:scaleX(0)}}
.beasts{position:absolute;left:calc(50% - 320px);top:150px;width:640px;height:400px;touch-action:pan-y}
.beasts svg{position:absolute;left:0;top:0;width:640px;height:400px;mix-blend-mode:multiply;pointer-events:none;transform-origin:50% 90%}
/* cats react: heads + eyes follow you, stroking speeds tails/ears, tap = hop */
.beasts svg *{pointer-events:visiblePainted;cursor:pointer}
.beasts .head{rotate:var(--hr,0deg);transition:rotate .35s var(--spring)}
.beasts .eye{translate:var(--ex,0px) var(--ey,0px);transition:translate .2s}
.beasts svg.done{animation:none}
.beasts svg.done.hop{animation:hop .75s var(--spring)}
@keyframes hop{30%{transform:translateY(-50px) scaleY(1.06)}55%{transform:translateY(0) scaleY(.88)}75%{transform:translateY(-8px)}}
.beasts .pet .tail{animation-duration:.4s}
.beasts .pet .ear{animation-duration:.9s}
.tabby{animation:walkL 2.6s var(--out) .2s both}
.tiger{animation:walkR 2.8s var(--out) .35s both}
@keyframes walkL{from{transform:translateX(-280px)}}
@keyframes walkR{from{transform:translateX(320px)}}
.leg{transform-origin:50% 0;animation:step .3s ease-in-out 9 alternate both}
.leg.b{animation-direction:alternate-reverse}
@keyframes step{from{transform:rotate(12deg)}to{transform:rotate(-12deg)}}
.walk{animation:bob2 .3s ease-in-out 9 alternate}
@keyframes bob2{to{transform:translateY(-5px)}}
.tail{animation:swish 1.8s ease-in-out infinite alternate}
.tabby .tail{transform-origin:0% 100%}
.tiger .tail{transform-origin:100% 0%;animation-duration:2.6s}
@keyframes swish{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
.tiger .head{transform-origin:50% 90%;animation:look 6s ease-in-out 3.2s infinite}
@keyframes look{0%,58%,100%{transform:none}66%,86%{transform:rotate(-10deg) translateX(-8px) scaleX(.92)}}
.eye{animation:blinkEye 4.6s infinite}
.tiger .eye{animation-delay:-1.4s}
@keyframes blinkEye{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.ear{transform-origin:50% 100%;animation:twitch 5s infinite}
@keyframes twitch{0%,88%,100%{transform:none}92%{transform:rotate(-14deg)}96%{transform:rotate(6deg)}}

.p-menu{position:absolute;left:calc(50% - 460px);top:600px;width:920px;display:flex;flex-direction:column;align-items:center;gap:44px}
.p-intro{width:620px;text-align:center;font:16px/25px var(--mono);color:var(--red);margin:0}
.items{display:flex;justify-content:space-between;width:100%}
.item{width:280px;display:flex;flex-direction:column;align-items:center;gap:6px}
.item b{font:400 56px/56px var(--display);transition:transform .45s var(--spring),text-shadow .45s}
.item b.blue{--sh:rgba(239,65,53,.55)} .item b.red{--sh:rgba(31,127,230,.55)}
.item:hover b{transform:translateY(-8px) rotate(-3deg);text-shadow:5px 4px 0 var(--sh)}
.item span{font:14px/18px var(--mono);letter-spacing:.08em}

/* ---------- VISIT ---------- */
.visit .wrap{display:flex;align-items:center;justify-content:center;gap:100px;padding:64px 48px}
.v-art{position:relative;width:560px;height:600px;flex-shrink:0;touch-action:pan-y}
/* mango swings with real momentum when swiped; tap = the hand leaps and grabs */
.mango{rotate:var(--ma,0deg);cursor:pointer}
.hand{pointer-events:none}
.finger{transition:rotate .4s var(--spring)}
.grab .finger{rotate:calc(var(--a) * -1.8)}
.grab .reach{animation:grabUp .9s var(--spring)}
@keyframes grabUp{40%{transform:translateY(-80px)}}
.v-art svg{position:absolute;left:0;top:0;width:560px;height:600px;mix-blend-mode:multiply}
.mango{transform-box:view-box;transform-origin:263px 44px;animation:mango 4.2s ease-in-out infinite alternate}
@keyframes mango{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.leafm{transform-box:view-box;transform-origin:270px 80px;animation:flut 1.3s ease-in-out infinite alternate}
@keyframes flut{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
.hand{animation:rise 1.7s var(--out) .2s both}
@keyframes rise{from{transform:translateY(60px)}}
.reach{transform-box:view-box;transform-origin:262px 600px;animation:reach 3.6s ease-in-out 2s infinite alternate}
@keyframes reach{to{transform:translateY(-12px) rotate(1.5deg)}}
.finger{transform-origin:50% 100%;animation:spread 1.1s var(--spring) 1.3s both}
@keyframes spread{from{transform:rotate(0)}to{transform:rotate(var(--a))}}
.v-copy{width:620px;flex-shrink:0;display:flex;flex-direction:column;gap:36px}
.v-copy .h{display:flex;flex-direction:column;gap:12px}
.v-copy h2{font:400 120px/110px var(--display);letter-spacing:-.01em;margin:0}
.details{border-top:1.5px solid var(--ink)}
.drow{position:relative;isolation:isolate;display:flex;padding-block:16px;border-bottom:1.5px solid var(--ink)}
.drow b{width:180px;flex-shrink:0;font:700 13px/24px var(--mono);letter-spacing:.14em}
.drow span{font:16px/24px var(--mono)}
.mail{display:flex;flex-direction:column;gap:14px}
.mail p{font:italic 34px/40px var(--serif);color:var(--blue);margin:0}
.mail form{display:flex}
.mail input{flex:1;min-width:0;border:2px solid var(--ink);border-radius:0;background:transparent;padding:18px 20px;font:16px/20px var(--mono);color:var(--ink)}
.mail input::placeholder{color:#6E6A66}
.mail input:focus{outline:none;border-color:var(--blue)}
.mail .btn{align-items:center;padding-inline:26px}
.msg{font:700 13px/16px var(--mono);letter-spacing:.14em;color:var(--red);margin:0;min-height:16px}
.msg.ok{animation:ghost 1s var(--out) both}

/* ---------- FOOTER ---------- */
.foot-wrap{border-top:1.5px solid var(--ink)}
.foot-wrap .wrap{display:flex;flex-direction:column;gap:28px;padding:40px 48px}
.giant{position:relative;width:1344px;height:300px;overflow:clip}
.giant span{position:absolute;left:0;top:0;font:348px/300px var(--display);letter-spacing:-.005em;mix-blend-mode:multiply;white-space:nowrap}
.giant .r{color:var(--red)}
.giant .b{color:var(--blue);transform:translate(var(--g,12px),calc(var(--g,12px)*.66))}
.foot{display:flex;justify-content:space-between;align-items:center;font:13px/16px var(--mono);letter-spacing:.12em}
.foot nav{display:flex;gap:32px;font-weight:700}
.foot a{transition:color .2s}
.foot a:hover{color:var(--red)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}