body:has(.grip-gate:not([hidden])){overflow:hidden}
.grip-gate{position:fixed;inset:0;z-index:50;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:25px;border:0;overflow:hidden;background:transparent;color:var(--ivory);display:grid;place-items:center;isolation:isolate}
.grip-gate[hidden]{display:none}.grip-gate::backdrop{background:transparent}
.grip-shutter{position:absolute;inset:0;z-index:-1;width:50.1%;background:#050505;will-change:transform}
.grip-shutter-left{right:auto;background:radial-gradient(ellipse at 100% 50%,#241017 0%,#0b0809 45%,#050505 80%)}
.grip-shutter-right{left:49.9%;background:radial-gradient(ellipse at 0% 50%,#241017 0%,#0b0809 45%,#050505 80%)}
.grip-origin{position:absolute;top:max(30px,env(safe-area-inset-top));left:20px;right:20px;margin:0;text-align:center;font:8px 'Courier New',monospace;letter-spacing:3px;color:#9f9185}
.grip-enter{display:flex;flex-direction:column;align-items:center;gap:0;border:0;background:none;color:var(--ivory);padding:0;cursor:pointer;max-width:90vw;position:relative}
.grip-enter:focus-visible{outline:1px solid #d5baaa;outline-offset:12px}
.grip-art{width:min(60svh,510px,81vw);height:auto;display:block;filter:drop-shadow(0 0 28px #811a3638);transform-origin:50% 65%;transition:transform .4s,filter .4s}
.grip-enter:hover .grip-art{transform:scale(1.035) rotate(-1deg);filter:drop-shadow(0 0 38px #a82c504f)}
.grip-title{font:clamp(16px,2vw,22px) Georgia,serif;letter-spacing:.45em;margin:26px 0 13px;padding-left:.45em}
.grip-hint{font:7px 'Courier New',monospace;letter-spacing:2px;color:#ab9a8c;line-height:2}
.grip-vines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#b08d7c;opacity:0;transform:scale(.15) rotate(-16deg);transform-origin:center}
.grip-vines path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.is-gripping .grip-art{animation:grip-clench 1.15s cubic-bezier(.6,.05,.28,1) both}
.is-gripping .grip-title,.is-gripping .grip-hint,.is-gripping .grip-origin{animation:grip-copy-out .25s both}
.is-gripping .grip-shutter-left{animation:grip-open-left .8s .48s cubic-bezier(.7,0,.2,1) both}
.is-gripping .grip-shutter-right{animation:grip-open-right .8s .48s cubic-bezier(.7,0,.2,1) both}
.is-gripping .grip-vines{animation:grip-wrap 1.4s cubic-bezier(.5,.05,.2,1) both}
.is-gripping .grip-vines path[pathLength]{animation:grip-draw .5s .12s both}
@keyframes grip-clench{0%{transform:scale(1)}18%{transform:scale(.93) rotate(-3deg)}60%{opacity:1}100%{transform:scale(5) rotate(8deg);opacity:0;filter:blur(4px)}}
@keyframes grip-copy-out{to{opacity:0;transform:translateY(6px)}}
@keyframes grip-open-left{to{transform:translateX(-102%)}}
@keyframes grip-open-right{to{transform:translateX(102%)}}
@keyframes grip-wrap{0%{opacity:0;transform:scale(.15) rotate(-16deg)}30%{opacity:1}70%{opacity:1;transform:scale(.97) rotate(0deg)}100%{opacity:0;transform:scale(1.16) rotate(4deg)}}
@keyframes grip-draw{to{stroke-dashoffset:0}}
@media(max-width:600px){.grip-art{width:min(64svh,85vw)}.grip-title{margin-top:25px}.grip-hint{font-size:6px;letter-spacing:1.5px}.grip-origin{font-size:7px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.grip-art{transition:none!important}.is-gripping .grip-art,.is-gripping .grip-vines{animation:none!important}.is-gripping .grip-vines{display:none}.is-gripping .grip-shutter{animation:none!important}}
/* A stronger clench, thorn surge, and dry fragments clear on the landing beat. */
.is-gripping .grip-art{animation:grip-clench var(--entry-duration,1650ms) cubic-bezier(.6,.05,.28,1) both}
.is-gripping .grip-vines{animation:grip-wrap var(--entry-duration,1650ms) cubic-bezier(.5,.05,.2,1) both}
.is-gripping .grip-shutter-left{animation:grip-open-left calc(var(--entry-duration,1650ms)*.62) calc(var(--entry-duration,1650ms)*.38) cubic-bezier(.7,0,.2,1) both}
.is-gripping .grip-shutter-right{animation:grip-open-right calc(var(--entry-duration,1650ms)*.62) calc(var(--entry-duration,1650ms)*.38) cubic-bezier(.7,0,.2,1) both}
.grip-impact{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}.grip-impact span{position:absolute;width:18vmin;height:18vmin;border:1px solid #ba425c;border-radius:50%;opacity:0;box-shadow:0 0 30px #b12b5025}
.is-gripping .grip-impact span{animation:grip-impact var(--entry-duration,1650ms) ease-out both}.is-gripping .grip-impact span+span{animation-delay:90ms;border-color:#d8bea6}
.grip-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.grip-burst i{position:absolute;top:50%;left:50%;width:7px;height:23px;background:#b58b78;clip-path:polygon(0 0,100% 28%,60% 100%,25% 64%);opacity:0}
.grip-burst i:nth-child(3n){background:#7f233b;width:11px;height:17px}.is-gripping .grip-burst i{animation:grip-fragment calc(var(--entry-duration,1650ms)*.75) var(--delay) cubic-bezier(.2,.6,.2,1) both}
@keyframes grip-impact{0%,18%{opacity:0;transform:scale(.4)}30%{opacity:.65}100%{opacity:0;transform:scale(7)}}
@keyframes grip-fragment{0%,18%{opacity:0;transform:translate(0,0) rotate(0)}30%{opacity:.75}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.grip-impact,.grip-burst{display:none!important}}
.grip-rip{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.grip-rip span{position:absolute;top:48%;left:-15%;width:130%;height:3px;background:#b68376;opacity:0;clip-path:polygon(0 30%,20% 0,26% 60%,51% 20%,66% 80%,85% 0,100% 45%,100% 100%,0 100%);transform:rotate(-17deg)}.grip-rip span:nth-child(2){top:38%;transform:rotate(22deg);background:#b12b50}.grip-rip span:nth-child(3){top:70%;transform:rotate(-8deg)}.grip-rip span:nth-child(4){top:20%;transform:rotate(40deg);background:#7f233b}.is-gripping .grip-rip span{animation:grip-tear var(--entry-duration,1950ms) ease-out both}.is-gripping .grip-rip span:nth-child(even){animation-delay:65ms}.is-gripping .grip-enter{animation:grip-recoil var(--entry-duration,1950ms) ease-out both}.is-gripping .grip-vines path[pathLength]{stroke-width:6}.is-gripping .grip-thorns{transform-origin:50% 50%;animation:thorn-punch var(--entry-duration,1950ms) ease-out both}@keyframes grip-tear{0%,25%{opacity:0;scale:.1 1}42%{opacity:.8;scale:1 1}65%,100%{opacity:0;scale:1.2 4}}@keyframes grip-recoil{0%,12%{translate:0 0}18%{translate:-7px 3px}23%{translate:6px -4px}30%{translate:-3px 2px}42%,100%{translate:0 0}}@keyframes thorn-punch{0%,25%{scale:.85}55%{scale:1.15}100%{scale:1.3}}@media(prefers-reduced-motion:reduce){.grip-rip{display:none!important}.is-gripping .grip-enter,.is-gripping .grip-thorns{animation:none!important}}
/* Familiar fists break out through the flower, tear the room open, then land. */
.grip-breakthrough{position:absolute;inset:0;z-index:6;pointer-events:none}.grip-breakthrough .hand{position:absolute;left:50%;top:50%;width:clamp(140px,26vmin,300px);height:clamp(140px,26vmin,300px);opacity:0;filter:drop-shadow(0 10px 15px #000);transform-origin:50% 60%}
.is-gripping .grip-breakthrough .hand-left{animation:entry-fist-left var(--entry-duration,1950ms) cubic-bezier(.2,.7,.2,1) both}.is-gripping .grip-breakthrough .hand-right{animation:entry-fist-right var(--entry-duration,1950ms) cubic-bezier(.2,.7,.2,1) both}
@keyframes entry-fist-left{0%,20%{opacity:0;transform:translate(-55%,-30%) scale(.15) rotate(30deg)}33%{opacity:1;transform:translate(-80%,-45%) scale(.8) rotate(8deg)}55%{opacity:1;transform:translate(-115%,-50%) scale(1.7) rotate(-24deg)}85%{opacity:1}100%{opacity:0;transform:translate(-65vw,30vh) scale(1.2) rotate(-70deg)}}
@keyframes entry-fist-right{0%,20%{opacity:0;transform:translate(-45%,-30%) scale(.15) rotate(-30deg)}33%{opacity:1;transform:translate(-20%,-45%) scale(.8) rotate(-8deg)}55%{opacity:1;transform:translate(15%,-50%) scale(1.7) rotate(24deg)}85%{opacity:1}100%{opacity:0;transform:translate(45vw,40vh) scale(.4) rotate(60deg)}}
@media(prefers-reduced-motion:reduce){.grip-breakthrough{display:none!important}}