#intro.zp-intro{position:fixed;inset:0;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:0 18px clamp(34px,6.5vh,72px);background:#070507;text-align:center;z-index:50}
#intro.zp-intro:before{content:"";position:absolute;inset:-3%;z-index:-2;background:url('/assets/zpoty-temple-entrance.png') center 48%/cover no-repeat;animation:zp-temple-drift 22s ease-in-out infinite alternate;transform-origin:center}
#intro.zp-intro:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#08050816 35%,#08050810 56%,#070506ae 100%),radial-gradient(ellipse at 50% 47%,transparent 24%,#08050735 82%,#030203bb 120%)}
.zp-intro-content{position:relative;z-index:1;width:min(100%,560px);display:flex;flex-direction:column;align-items:center;gap:12px}
.zp-intro-caption{margin:0;color:#ffe6a6;font-size:clamp(10px,1.4vw,14px);font-weight:800;letter-spacing:.22em;text-shadow:0 2px 12px #000,0 0 18px #d88e21;text-transform:uppercase}
.zp-enter-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:14px;min-width:245px;min-height:62px;padding:14px 38px;overflow:hidden;border:2px solid #fff0ad;border-radius:15px;background:linear-gradient(180deg,#fff3bd 0%,#f5cf70 20%,#d99c31 58%,#8f5111 100%);color:#321b07;font-size:20px;font-weight:1000;letter-spacing:.18em;text-shadow:0 1px #fff8;box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 8px #753c12b5,0 7px 0 #5b300e,0 0 25px #ffc447b8;transform:perspective(560px) rotateX(8deg);animation:zp-enter-glow 2.6s ease-in-out infinite;transition:transform .24s,filter .24s,box-shadow .24s}
.zp-enter-button:before{content:"";position:absolute;inset:-20% auto -20% -45%;width:35%;z-index:-1;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#fff9d9e8,transparent);animation:zp-enter-shine 3.1s ease-in-out infinite}
.zp-enter-button:after{content:"";position:absolute;inset:4px;border:1px solid #fff5c279;border-radius:10px;pointer-events:none}
.zp-enter-button:hover{filter:brightness(1.14);transform:perspective(560px) rotateX(0) translateY(-3px);box-shadow:inset 0 2px 4px #fff,0 10px 0 #5b300e,0 0 36px #ffcc53}
.zp-enter-button:active{transform:perspective(560px) rotateX(0) translateY(4px);box-shadow:inset 0 3px 8px #603a12,0 3px 0 #5b300e,0 0 18px #ffbf38}
.zp-enter-glyph{font-size:18px;color:#fff3c2;text-shadow:0 1px 3px #6c390e}.zp-enter-arrow{font-size:19px;letter-spacing:0;text-shadow:none}
@keyframes zp-enter-shine{0%,22%{left:-45%}62%,100%{left:125%}}
@keyframes zp-enter-glow{0%,100%{filter:brightness(1);box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 8px #753c12b5,0 7px 0 #5b300e,0 0 22px #ffc44785}50%{filter:brightness(1.08);box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 8px #753c12b5,0 7px 0 #5b300e,0 0 38px #ffc447d9}}
@keyframes zp-temple-drift{0%{transform:scale(1.015) translateY(0)}100%{transform:scale(1.075) translateY(-.8%)}}
@media(max-width:700px){#intro.zp-intro{padding-bottom:max(30px,env(safe-area-inset-bottom))}#intro.zp-intro:before{background-position:center center}.zp-intro-content{gap:10px}.zp-enter-button{min-height:58px;min-width:226px;font-size:18px}}
@media(prefers-reduced-motion:reduce){#intro.zp-intro:before,.zp-enter-button,.zp-enter-button:before{animation:none!important}.zp-enter-button{transform:none}}