html,body{margin:0;background:#050505}.hook-demo{--red:#8f0e2d;position:fixed;inset:0;overflow:hidden;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif}.hook-destination{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;background:#f4f3ef;color:#080808;opacity:0;transform:scale(1.08);transition:opacity .45s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}.hook-destination:before{content:"";position:absolute;inset:22px;border:1px solid #1113}.hook-destination>span{position:absolute;left:4vw;top:4vw;font-size:9px;letter-spacing:.22em}.hook-destination strong{font-size:clamp(86px,17vw,320px);line-height:.75;letter-spacing:-.105em}.hook-destination p{margin:38px 0 0;font-size:10px;letter-spacing:.35em}.hook-destination button{position:absolute;right:4vw;bottom:4vw;border:0;border-bottom:1px solid;background:none;padding:0 0 8px;font:800 9px/1 Arial;letter-spacing:.16em;cursor:pointer}.has-entered .hook-destination{opacity:1;transform:none}.hook-film{position:absolute;z-index:3;inset:0;overflow:hidden;background:#040404;perspective:1400px;transform-style:preserve-3d;animation:filmExit .1s linear 3.45s forwards}.hook-film:before{content:"";position:absolute;z-index:8;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#fff0 0 3px,#ffffff06 4px);mix-blend-mode:screen;opacity:.32}.hook-void{position:absolute;inset:-30%;display:grid;place-items:center;transform-style:preserve-3d;animation:voidRush 2.75s cubic-bezier(.2,.8,.2,1) both}.hook-void:before{content:"";position:absolute;width:130vmax;height:130vmax;border-radius:50%;background:repeating-radial-gradient(circle,#ffffff18 0 1px,transparent 2px 5.5vw);transform:rotateX(70deg) translateZ(-300px);opacity:.55}.hook-void:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 6%,#040404 46%)}.hook-orbit{position:absolute;z-index:2;width:48vmin;height:48vmin;border:1px solid #ffffff45;border-radius:50%;box-shadow:0 0 80px #000 inset;transform-style:preserve-3d}.hook-orbit:before,.hook-orbit:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 25px #fff}.hook-orbit-one{animation:orbitOne 2.35s cubic-bezier(.16,1,.3,1) both}.hook-orbit-two{width:62vmin;height:62vmin;border-color:#8f0e2d99;animation:orbitTwo 2.4s cubic-bezier(.16,1,.3,1) both}.hook-orbit-three{width:76vmin;height:76vmin;animation:orbitThree 2.5s cubic-bezier(.16,1,.3,1) both}.hook-core{position:absolute;z-index:3;width:3px;height:38vh;background:#fff;box-shadow:0 0 25px #fff,0 0 90px var(--red);transform:scaleY(0);animation:coreStrike .55s cubic-bezier(.76,0,.24,1) .82s both}.hook-meta{position:absolute;z-index:12;left:2.3vw;right:2.3vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.25em;color:#bbb;opacity:0;animation:metaIn .5s ease .12s forwards}.hook-meta-top{top:25px}.hook-meta-bottom{bottom:25px;align-items:center}.hook-load{width:min(34vw,520px);height:1px;background:#ffffff24;overflow:hidden}.hook-load i{display:block;width:100%;height:100%;background:#fff;transform-origin:left;animation:loadLine 2.9s cubic-bezier(.4,0,.2,1) both}.hook-word{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;white-space:nowrap}.hook-word>span{display:inline-block;font-size:clamp(96px,18.5vw,340px);font-weight:950;line-height:.75;letter-spacing:-.11em;opacity:0;color:#f7f7f5;text-shadow:0 1px 0 #999,0 22px 40px #000;transform:translate3d(calc((var(--i) - 2.5) * 25vw),calc((var(--i) - 2.5) * -11vh),calc(-1000px + var(--i) * 110px)) rotateX(calc(80deg - var(--i) * 21deg)) rotateY(calc(-90deg + var(--i) * 29deg)) rotateZ(calc((var(--i) - 2) * 18deg));animation:letterAssemble 1.55s cubic-bezier(.12,.88,.18,1) calc(.24s + var(--i) * .07s) forwards,wordBreathe .55s ease-in-out 1.95s forwards}.hook-word>span:nth-child(3){color:#fff}.hook-scan{position:absolute;width:0;height:45%;background:var(--red);mix-blend-mode:multiply;transform:skewX(-17deg);box-shadow:0 0 45px var(--red);animation:scanCut .48s cubic-bezier(.76,0,.24,1) 1.72s forwards}.hook-stamp{position:absolute;z-index:7;inset:0;display:flex;align-items:center;justify-content:center;gap:2vw;opacity:0;transform:translateZ(350px) rotateX(72deg) scale(1.7);animation:stampDrop .62s cubic-bezier(.16,1,.3,1) 2.12s forwards,stampPull .7s cubic-bezier(.76,0,.24,1) 2.72s forwards}.hook-stamp span{font-size:clamp(74px,14vw,250px);font-weight:950;letter-spacing:-.095em}.hook-stamp i{width:3px;height:clamp(90px,16vw,270px);background:var(--red);transform:rotate(13deg)}.hook-door{position:absolute;z-index:10;top:0;bottom:0;width:51%;background:#040404;box-shadow:0 0 100px #000;animation:doorOpen .78s cubic-bezier(.76,0,.24,1) 2.9s forwards}.hook-door-left{left:0;transform-origin:left}.hook-door-right{right:0;transform-origin:right}.hook-door-left:after,.hook-door-right:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#fff;box-shadow:0 0 30px #fff,0 0 75px var(--red)}.hook-door-left:after{right:0}.hook-door-right:after{left:0}
@keyframes metaIn{to{opacity:1}}@keyframes loadLine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes voidRush{0%{transform:translateZ(-700px) rotateZ(-38deg);opacity:0}25%{opacity:1}100%{transform:translateZ(280px) rotateZ(10deg);opacity:.16}}@keyframes orbitOne{0%{transform:rotateX(82deg) rotateY(0) scale(.3)}100%{transform:rotateX(72deg) rotateY(300deg) scale(1.4)}}@keyframes orbitTwo{0%{transform:rotateY(83deg) rotateZ(0) scale(.25)}100%{transform:rotateY(66deg) rotateZ(-260deg) scale(1.35)}}@keyframes orbitThree{0%{transform:rotateX(62deg) rotateY(45deg) scale(.2)}100%{transform:rotateX(-22deg) rotateY(260deg) scale(1.25)}}@keyframes coreStrike{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.02);opacity:0}}@keyframes letterAssemble{0%{opacity:0}18%{opacity:1}100%{opacity:1;transform:translate3d(0,0,70px) rotateX(0) rotateY(0) rotateZ(0)}}@keyframes wordBreathe{0%{filter:blur(0)}35%{filter:blur(7px);transform:translateZ(70px) scale(1.05)}100%{filter:blur(0);transform:translateZ(0) scale(.96);opacity:0}}@keyframes scanCut{0%{width:0;opacity:0;transform:translateX(-45vw) skewX(-17deg)}40%{width:10vw;opacity:1}100%{width:2vw;opacity:0;transform:translateX(48vw) skewX(-17deg)}}@keyframes stampDrop{0%{opacity:0;transform:translateZ(350px) rotateX(72deg) scale(1.7);filter:blur(20px)}100%{opacity:1;transform:translateZ(0) rotateX(0) scale(1);filter:blur(0)}}@keyframes stampPull{0%{opacity:1;transform:translateZ(0) scale(1)}100%{opacity:0;transform:translateZ(-900px) scale(.12);filter:blur(8px)}}@keyframes doorOpen{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}@keyframes filmExit{to{visibility:hidden}}
@media(max-width:700px){.hook-meta{left:16px;right:16px;font-size:6px}.hook-meta-top{top:18px}.hook-meta-bottom{bottom:18px}.hook-meta-bottom>span:last-child{display:none}.hook-load{width:56vw}.hook-word>span{font-size:24vw}.hook-stamp{gap:4vw}.hook-stamp span{font-size:19vw}.hook-stamp i{height:25vw}.hook-destination strong{font-size:24vw}.hook-destination p{font-size:7px}.hook-destination button{right:18px;bottom:22px}.hook-destination>span{left:18px;top:22px}}
@media(prefers-reduced-motion:reduce){.hook-film{display:none}.hook-destination{opacity:1;transform:none}}