dialog.hi-insertion{--hi-accent:#d4e8a1;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#081110;color:#e8eddf;font-family:system-ui,sans-serif}
.hi-insertion::backdrop{background:#050a08}.hi-scene{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:#0c1614}
.hi-terrain{position:absolute;inset:-10%;background:linear-gradient(0deg,#06110ed9,#1c332b22 65%,#07140d88),url('../assets/haff-war/haff-dam-battle-backdrop-v1.png') center 25%/cover;filter:saturate(.45);animation:hi-terrain 6.4s cubic-bezier(.2,.7,.2,1) both}
.hi-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 79px,#d0e7bf08 80px),repeating-linear-gradient(90deg,transparent 0 79px,#d0e7bf08 80px);mask-image:linear-gradient(transparent,#000)}
.hi-haze{position:absolute;inset:-30%;background:radial-gradient(ellipse at 70% 60%,#aeae8155,transparent 50%),radial-gradient(ellipse at 20% 50%,#a9b6a338,transparent 45%);filter:blur(22px);animation:hi-haze 6.4s ease-out both}
.hi-aircraft{position:absolute;left:16%;top:9%;width:64%;filter:drop-shadow(0 25px 24px #0009);animation:hi-flight 6.4s cubic-bezier(.22,.7,.3,1) both}.hi-aircraft svg{width:100%;overflow:visible}.hi-rotor{transform-origin:540px 54px;animation:hi-rotor .12s linear infinite}
.hi-ground{position:absolute;left:45%;top:60%;width:40%;height:15%;border:2px solid #d5e6b337;border-radius:50%;box-shadow:0 0 0 22px #d5e6b30a,0 0 0 48px #d5e6b308;filter:blur(2px);animation:hi-ground 6.4s ease-out both}
.hi-team{position:absolute;left:46%;top:31%;width:25%;height:40%}.hi-rappeller{position:absolute;left:calc(var(--i)*34%);top:0;width:65px;height:100%;animation:hi-team 6.4s linear both}.hi-rope{position:absolute;bottom:40px;left:32px;width:2px;height:60vh;background:linear-gradient(#bcc5a777,#d2c9a8);transform-origin:bottom;box-shadow:1px 0 #0009}.hi-operator{position:absolute;bottom:0;width:65px;filter:drop-shadow(8px 12px 7px #000a)}.hi-rappeller:nth-child(2){animation-name:hi-team-two}.hi-rappeller:nth-child(3){animation-name:hi-team-three}
.hi-door{position:absolute;top:0;bottom:0;width:51%;z-index:3;background:repeating-linear-gradient(0deg,transparent 0 100px,#71817112 102px),linear-gradient(100deg,#101918,#25332c 50%,#0b1212);border:5px solid #536052;box-shadow:inset 0 0 70px #000;animation:hi-door 6.4s cubic-bezier(.65,0,.2,1) both}.hi-door:before{content:'';position:absolute;top:16%;left:20%;width:60%;height:42%;border:12px solid #111a18;background:linear-gradient(30deg,#0b181bcc,#51726033),url('../assets/haff-war/haff-dam-battle-backdrop-v1.png') center/cover;box-shadow:0 0 0 2px #62726755;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}.hi-door:after{content:'CAUTION / 保持安全扣锁闭';position:absolute;bottom:18%;left:20%;color:#c9c092;font:11px monospace;letter-spacing:3px;border-left:4px solid #c4b779;padding:14px}.hi-door-left{left:0;--exit:-102%}.hi-door-right{right:0;--exit:102%}
.hi-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,#040b0af5,transparent 48%,#040b0ab8),radial-gradient(ellipse,transparent 25%,#0006);box-shadow:inset 0 30px #050b09,inset 0 -30px #050b09}
.hi-header,.hi-footer{position:absolute;left:5vw;right:5vw;z-index:5;display:flex;justify-content:space-between;gap:20px;align-items:center}.hi-header{top:7%;font:11px monospace;letter-spacing:3px;color:#c6d2b8;border-top:1px solid #c6d2b855;padding-top:15px}.hi-telemetry{position:absolute;right:6%;top:32%;z-index:5;color:#c1d0b2;font:11px/2 monospace;letter-spacing:2px;border-right:2px solid #bbd09766;padding-right:18px}.hi-telemetry b{font-size:20px;font-weight:400}
.hi-copy{position:absolute;left:6%;bottom:20%;z-index:5;max-width:85%}.hi-kicker{color:var(--hi-accent);font:12px monospace;letter-spacing:4px;margin:0 0 18px}.hi-copy h2{font-size:clamp(36px,5.8vw,80px);line-height:1.12;letter-spacing:.09em;margin:0;text-shadow:0 3px 30px #000}.hi-brief{font-size:14px;color:#b8c7b9;letter-spacing:2px;margin:18px 0 0}.hi-footer{bottom:7%;font-size:13px;color:#d5dfca}.hi-radio{max-width:70%;line-height:1.6}.hi-skip{color:#e2e8da;background:#16221dbb;border:1px solid #b8c89b77;padding:12px 20px;min-height:44px;font:12px system-ui;cursor:pointer;white-space:nowrap}.hi-skip:hover{background:#364936}.hi-skip:focus-visible{outline:2px solid var(--hi-accent);outline-offset:4px}.hi-progress{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:6;background:#d4e8a111}.hi-progress i{display:block;height:100%;background:var(--hi-accent);transform-origin:left;transform:scaleX(0)}
@keyframes hi-door{0%,22%{transform:translateX(0)}43%,100%{transform:translateX(var(--exit))}}
@keyframes hi-flight{0%{transform:translate(-35%,-12%) scale(.55)}30%,80%{transform:translate(0,0) scale(1)}100%{transform:translate(70%,-80%) scale(.6)}}
@keyframes hi-rotor{to{transform:scaleX(-1)}}
@keyframes hi-terrain{from{transform:scale(1.2) translateY(-3%)}to{transform:scale(1) translateY(3%)}}
@keyframes hi-haze{from{transform:translateX(-15%) scale(.7);opacity:.3}65%{opacity:1}to{transform:translateX(15%) scale(1.3);opacity:.3}}
@keyframes hi-team{0%,40%{opacity:0;transform:translateY(-100%)}44%{opacity:1}78%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(8%)}}
@keyframes hi-team-two{0%,45%{opacity:0;transform:translateY(-110%)}49%{opacity:1}80%,90%{opacity:1;transform:translateY(4%)}100%{opacity:0;transform:translateY(12%)}}
@keyframes hi-team-three{0%,50%{opacity:0;transform:translateY(-110%)}54%{opacity:1}83%,92%{opacity:1;transform:translateY(-4%)}100%{opacity:0;transform:translateY(8%)}}
@keyframes hi-ground{0%,40%{opacity:0;transform:scale(.4)}75%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:600px){.hi-header{font-size:9px;letter-spacing:1px;top:6%}.hi-header span:last-child{display:none}.hi-aircraft{left:-21%;top:20%;width:130%}.hi-team{left:37%;top:37%;width:40%;height:25%}.hi-rappeller,.hi-operator{width:48px}.hi-rope{left:24px;bottom:30px}.hi-telemetry{top:16%;font-size:9px;line-height:1.7}.hi-copy{bottom:21%;left:7%}.hi-copy h2{font-size:36px}.hi-kicker{font-size:10px;letter-spacing:2px}.hi-brief{font-size:12px;letter-spacing:0;line-height:1.6}.hi-footer{bottom:7%;font-size:11px;gap:12px}.hi-radio{max-width:59%}.hi-skip{padding:10px 12px}.hi-door:after{font-size:9px;letter-spacing:1px;left:12%;right:12%;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.hi-insertion *{animation:none!important}.hi-door,.hi-team,.hi-aircraft{display:none}}
/* The rope stays anchored at the cabin while the operator descends. */
.hi-ready{position:absolute;right:6%;bottom:25%;z-index:5;display:flex;align-items:center;gap:15px;padding:16px 22px;background:#0c1b15df;border-left:3px solid #d4e8a1;opacity:0;transform:translateX(24px);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hi-ready>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #bcdca2;border-radius:50%;font-size:22px;color:#d4e8a1}.hi-ready small{display:block;font:9px monospace;letter-spacing:2px;color:#a9c49a;margin-bottom:7px}.hi-ready strong{font-size:18px;letter-spacing:2px;color:#e7f0da}.hi-insertion[data-stage="3"] .hi-ready{opacity:1;transform:none}
@media(max-width:600px){.hi-ready{right:auto;left:7%;bottom:36%;padding:10px 14px;gap:10px}.hi-ready>span{width:27px;height:27px;font-size:17px}.hi-ready strong{font-size:13px;letter-spacing:1px}.hi-ready small{font-size:8px;letter-spacing:1px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.hi-ready{transition:none;transform:none}}
.hi-team{top:37%;left:47%;width:17%;--drop:25vh}
.hi-rappeller,.hi-rappeller:nth-child(2),.hi-rappeller:nth-child(3){animation:none}
.hi-operator{top:0;bottom:auto;animation:hi-drop 6.4s cubic-bezier(.22,.65,.4,1) both;animation-delay:calc(var(--i)*.12s)}
.hi-operator svg g{stroke:#526256;stroke-width:.8}
.hi-rope{top:0;bottom:auto;height:calc(var(--drop) + 18px);transform-origin:top;animation:hi-line 6.4s cubic-bezier(.22,.65,.4,1) both;animation-delay:calc(var(--i)*.12s)}
@keyframes hi-drop{0%,40%{opacity:0;transform:translateY(-30px) rotate(-6deg)}43%{opacity:1}75%,87%{opacity:1;transform:translateY(var(--drop)) rotate(0)}98%,100%{opacity:0;transform:translateY(var(--drop)) translateX(20px)}}
@keyframes hi-line{0%,40%{opacity:0;transform:scaleY(0)}43%{opacity:1}75%{opacity:1;transform:scaleY(1)}85%,100%{opacity:0;transform:scaleY(1)}}
@media(max-width:600px){.hi-team{left:41%;top:43%;width:25%;--drop:14vh}}