/* A single coordinate system keeps the aperture, frame and traveler aligned. */
#opening{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#173d2e,#081f18 65%);opacity:1;visibility:visible;transition:opacity .28s ease,visibility .28s;isolation:isolate}
#opening:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#071f18e8,#071f18e8),url('assets/blocks/dirt.png') center/64px;opacity:.8;image-rendering:pixelated}
#opening:after{content:'';position:absolute;left:-15%;right:-15%;bottom:-80px;height:46%;z-index:-1;background-image:linear-gradient(#a4e6bb0b 1px,transparent 1px),linear-gradient(90deg,#a4e6bb0b 1px,transparent 1px);background-size:45px 45px;transform:perspective(500px) rotateX(52deg);mask-image:linear-gradient(transparent,#000);pointer-events:none}
#opening.finished{opacity:0;visibility:hidden;pointer-events:none}
.entrance-stage{position:relative;width:360px;height:330px;flex:0 0 330px;isolation:isolate}
.entrance-aura{position:absolute;inset:25px 20px 4px;background:radial-gradient(ellipse,#9a57d522,transparent 68%);pointer-events:none}
.entrance-rig{--cell:52px;position:absolute;left:76px;top:9px;width:calc(var(--cell)*4);height:calc(var(--cell)*5);transform-origin:50% 83%;isolation:isolate;will-change:transform}
.entrance-aperture{position:absolute;z-index:1;left:var(--cell);top:var(--cell);width:calc(var(--cell)*2);height:calc(var(--cell)*3);overflow:hidden;transform-origin:center;background:#773caf;box-shadow:0 0 28px #a862cf3b;opacity:0}
.entrance-fluid{position:absolute;inset:0;background-color:#783caa;background-image:repeating-linear-gradient(0deg,#c07be51f 0 13px,transparent 13px 26px),repeating-linear-gradient(90deg,#e2acfa12 0 13px,#421b6d0e 13px 26px);background-size:52px 52px;animation:entranceFlow 2.7s linear infinite;image-rendering:pixelated}
.entrance-fluid:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 18px #3c126a99;background:radial-gradient(ellipse,#be77df22,transparent 80%)}
#entrance-frame{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(5,var(--cell));pointer-events:none}
.entrance-obsidian{display:block;width:var(--cell);height:var(--cell);background:#26212e url('assets/blocks/obsidian.png') center/100% 100%;image-rendering:pixelated;box-shadow:inset 2px 2px 0 #ba9ed115,inset -3px -3px 0 #08091288;will-change:transform,opacity}
.entrance-traveler{position:absolute;z-index:4;left:17px;top:38px;width:174px;height:196px;object-fit:contain;transform-origin:50% 100%;opacity:0;filter:drop-shadow(3px 4px 0 #04190f66);image-rendering:pixelated;will-change:transform,opacity;pointer-events:none}
#entrance-ground{position:absolute;z-index:0;top:272px;left:45px;width:270px;height:35px;display:grid;grid-template-columns:repeat(6,45px);filter:drop-shadow(0 12px 10px #00110d55)}
.entrance-grass{display:block;height:35px;background:#78603f url('assets/blocks/grass_side_carried.png') center/45px 45px;image-rendering:pixelated;box-shadow:inset 0 -7px 0 #051d1538;position:relative}
.entrance-grass:before{content:'';position:absolute;left:0;right:0;top:-9px;height:10px;background:#78a74d url('assets/blocks/grass_top.png') center/45px 45px;background-blend-mode:multiply;border-top:1px solid #9bcf6e44}
#entrance-particles{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
.entrance-particle{position:absolute;width:3px;height:3px;background:#cf92f4;box-shadow:0 0 5px #c778ef66;opacity:0}
.entrance-copy{position:relative;text-align:center;z-index:5;flex-shrink:0;padding:0 20px}
.entrance-copy>.eyebrow{font:6px/1.8 Mono,monospace;letter-spacing:1.6px;color:#84b396;margin-bottom:11px}
.entrance-copy h1{font:700 46px/1 Pixel,Craft,sans-serif;color:#e8f4d6;text-shadow:3px 4px 0 #00190e;letter-spacing:0;margin:0 0 12px}
.entrance-copy>.entrance-tagline{font:5px/1.6 Mono,monospace;letter-spacing:2px;color:#a5e5c0;display:block}
.entrance-progress{height:8px;width:204px;margin:22px auto 0;padding:2px;border:1px solid #547c63;background:#052118;box-shadow:2px 2px 0 #03180f;overflow:hidden}
.entrance-progress>i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(90deg,#a4ebba 0 8px,#75ba94 8px 10px)}
.entrance-copy #opening-stage{font:6px/1.8 Mono,monospace;color:#91baa0;min-height:12px;margin:14px 0 0}
#skip-opening{position:absolute;right:28px;bottom:26px;border:1px solid #7cb08d55;background:#123a2c;border-radius:0;padding:11px 15px;color:#c0ddc3;font:12px Pixel,Craft,sans-serif;box-shadow:inset 1px 1px 0 #afddb525,inset -2px -2px 0 #001c1355;z-index:6;cursor:pointer}
#skip-opening>span{margin-left:24px;color:#9ee6c1}
.entrance-foot{position:absolute;left:28px;bottom:39px;color:#709e82;font:5px Mono,monospace;letter-spacing:1px}
@keyframes entranceFlow{to{background-position:0 -52px,52px 0}}
@media(max-width:760px){#opening{gap:0}.entrance-stage{width:360px;height:310px;flex-basis:310px;transform:scale(.9);transform-origin:center bottom;margin-top:-24px}.entrance-copy{padding:8px 14px 0}.entrance-copy h1{font-size:38px}.entrance-copy>.eyebrow{font-size:5px;letter-spacing:1px}.entrance-copy>.entrance-tagline{font-size:4px;letter-spacing:1.4px}.entrance-progress{margin-top:19px;width:184px}.entrance-copy #opening-stage{font-size:5px}.entrance-foot{left:19px;bottom:34px;font-size:4px}#skip-opening{right:18px;bottom:23px;font-size:11px;padding:10px 12px}}
@media(max-height:620px){#opening{gap:0}.entrance-stage{transform:scale(.72);transform-origin:center top;flex-basis:240px;height:330px;margin-top:0}.entrance-copy h1{font-size:32px}.entrance-copy>.eyebrow{font-size:4px;margin-bottom:8px}.entrance-progress{margin-top:14px}.entrance-copy #opening-stage{margin-top:9px}.entrance-foot{bottom:29px}#skip-opening{bottom:17px}}