/* 厚金屬門、透光門縫與可穿行的 2.5D 門廊。全部幾何均為裝飾層。 */
.hero[data-cinematic-ready]{--cinema-pan-x:0px;--cinema-pan-y:0px;--cinema-reflect-x:50%;isolation:isolate;background:radial-gradient(ellipse at 50% 5%,#34271c55,transparent 62%),#0d0b0c}
.hero[data-cinematic-ready] .gate-scene{perspective:1600px;perspective-origin:50% 48%;transform:translate3d(var(--cinema-pan-x),var(--cinema-pan-y),0);transition:transform 1.2s cubic-bezier(.2,.7,.1,1),box-shadow 1.2s;border-color:#c9a3658c;box-shadow:0 0 0 6px #090909,0 0 0 7px #af8a4d66,0 0 0 20px #191915,0 0 0 21px #8b703e66,0 0 0 25px #0a0809,0 18px 100px #000,inset 0 0 80px #000}
.hero[data-cinematic-ready] .gate-frame{z-index:4;transform-style:preserve-3d;pointer-events:none}
.hero[data-cinematic-ready] .gate-leaf{transform-style:preserve-3d;background:radial-gradient(ellipse at var(--cinema-reflect-x) 25%,#a28b4b15,transparent 55%),repeating-linear-gradient(0deg,#0000 0 2px,#ffffff04 3px,#0000 4px),linear-gradient(100deg,#0c0a0b,#302827 7%,#191214 16%,#2a2022 48%,#191315 76%,#3b3728 94%,#110c0e);box-shadow:inset 0 0 0 6px #0d090b,inset 0 0 0 7px #b89b5c55,inset 0 0 0 12px #1b1416,inset 0 0 50px #000a,0 0 26px #000;transition:transform 2.05s cubic-bezier(.29,.02,.12,1),filter 2s;will-change:auto}
.hero[data-cinematic-ready] .gate-left{transform-origin:0 50%;transform:rotateY(0deg)}
.hero[data-cinematic-ready] .gate-right{transform-origin:100% 50%;transform:rotateY(0deg)}
.hero[data-cinematic-ready] .gate-panel{inset:28px 31px;border:1px solid #d8ba7b70;box-shadow:inset 0 0 0 3px #0c090b,inset 0 0 0 4px #7d704166,inset 0 0 0 14px #130d1066,inset 0 0 0 15px #a68c4b20,inset 0 0 55px #000a;background:linear-gradient(140deg,#b9a46d08,transparent 45%,#e1c17b05)}
.hero[data-cinematic-ready] .gate-panel:before,.hero[data-cinematic-ready] .gate-panel:after{font-size:25px;color:#baa16b;opacity:.7;text-shadow:0 1px #000,0 0 18px #aa8b3c44}
.hero[data-cinematic-ready] .gate-handle{display:block!important;top:73%;height:80px;width:9px;border-radius:4px;background:linear-gradient(90deg,#3f331c,#f1d79c 40%,#ae894c 58%,#3f2e16);box-shadow:3px 4px 6px #000,inset 1px 0 0 #f5db9c66;transform:translateZ(14px);transition:transform .65s cubic-bezier(.34,0,.15,1)}
.hero[data-cinematic-ready] .gate-left .gate-handle{right:30px}.hero[data-cinematic-ready] .gate-right .gate-handle{left:30px}
.cinema-door-edge{position:absolute;top:0;bottom:0;width:23px;background:repeating-linear-gradient(0deg,#3b3031 0 4px,#21161b 4px 9px);border:1px solid #8b7345;backface-visibility:visible}
.gate-left .cinema-door-edge{right:0;transform-origin:right center;transform:rotateY(-90deg)}.gate-right .cinema-door-edge{left:0;transform-origin:left center;transform:rotateY(90deg)}
.cinema-metal-sheen{position:absolute;inset:5px;background:linear-gradient(105deg,transparent 20%,#eed7a80d 43%,#ffedbf1a 49%,#e7c87c07 52%,transparent 65%);background-size:250% 100%;background-position:var(--cinema-reflect-x) 0;opacity:.65;pointer-events:none;mix-blend-mode:screen;transition:background-position 1s}
.cinema-door-inscription{position:absolute;top:15%;font-size:9px;writing-mode:vertical-rl;letter-spacing:7px;color:#ab925b77;text-shadow:0 1px 2px #000}
.gate-left .cinema-door-inscription{left:14%}.gate-right .cinema-door-inscription{right:14%}
.cinema-rivet{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#d5b774,#6d5832 45%,#1b1411 70%);box-shadow:1px 2px 4px #000}
.cinema-rivet-tl{top:15px;left:15px}.cinema-rivet-tr{top:15px;right:15px}.cinema-rivet-bl{bottom:15px;left:15px}.cinema-rivet-br{bottom:15px;right:15px}
.cinema-lock-rail{position:absolute;top:73%;height:79px;width:18px;display:flex;flex-direction:column;justify-content:space-around;transition:transform .58s cubic-bezier(.5,0,.2,1);z-index:-1}
.gate-left .cinema-lock-rail{right:-16px}.gate-right .cinema-lock-rail{left:-16px}
.cinema-lock-rail i{display:block;height:8px;border:1px solid #8c7649;background:linear-gradient(#d9bb76,#6a5937 45%,#2c2223);box-shadow:1px 3px 5px #000}
.cinema-door-seam{position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:#e7bf75;box-shadow:0 0 9px #e5b96788,0 0 30px #e5b96733;z-index:5;opacity:.25;transition:opacity .7s,transform 2.2s cubic-bezier(.2,.3,.15,1);transform:scaleY(.82);pointer-events:none}
.cinema-door-bloom{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 47%,#e3ba6629,transparent 64%);opacity:0;z-index:5;pointer-events:none;transition:opacity 1.3s}
.hero[data-cinematic-ready] .gate-light{background:#ead6a8;box-shadow:0 0 10px #f1d18f88,0 0 50px 14px #dfad5033;opacity:.7;transition:opacity 1s,box-shadow 1s}
.hero[data-cinematic-ready] .tunnel{perspective:900px;perspective-origin:50% 46%;background:radial-gradient(ellipse at 50% 44%,#b58c4b20,#110b0e 43%,#070406 85%);overflow:hidden;z-index:0}
.cinema-depth{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,0,-120px);transition:transform 2.45s cubic-bezier(.55,.04,.26,1)}
.cinema-wall{position:absolute;top:0;height:100%;width:1900px;background:repeating-linear-gradient(90deg,#0000 0 238px,#93845a22 239px 241px,#0000 242px 480px),repeating-linear-gradient(0deg,#24171c 0 68px,#b0a2770d 69px 70px,#160f12 71px 138px),linear-gradient(#2b2023,#0e090c);backface-visibility:hidden}
.cinema-wall-left{left:0;transform-origin:left center;transform:rotateY(90deg)}.cinema-wall-right{right:0;transform-origin:right center;transform:rotateY(-90deg)}
.cinema-ceiling{position:absolute;left:0;right:0;top:0;height:1900px;transform-origin:50% 0;transform:rotateX(-90deg);background:repeating-linear-gradient(0deg,#20161a 0 237px,#8c79444d 239px 241px,#1a1215 242px 478px);backface-visibility:hidden}
.cinema-floor{position:absolute;left:0;right:0;bottom:0;height:1900px;transform-origin:50% 100%;transform:rotateX(90deg);background:repeating-linear-gradient(90deg,#0000 0 24.7%,#c6b58133 25%,#0000 25.3% 49.7%,#c6b58133 50%,#0000 50.3% 74.7%,#c6b58133 75%,#0000 75.3%),repeating-linear-gradient(0deg,#24171c 0 150px,#a9966433 151px 153px,#1b1116 154px 305px);box-shadow:inset 0 0 200px #0007;backface-visibility:hidden}
.cinema-arch{position:absolute;inset:0;border:14px solid #2b2024;border-bottom-width:10px;box-shadow:inset 0 0 0 1px #d5b77966,0 0 0 2px #9c87534d,0 0 0 9px #0d080a,inset 0 0 20px #000,0 0 30px #0008;transform:translate3d(0,0,var(--arch-depth));background:linear-gradient(90deg,#d8bc6810,transparent 7% 93%,#d8bc6810);pointer-events:none}
.cinema-arch-crown{position:absolute;left:0;right:0;top:0;height:3px;background:#efd39a;box-shadow:0 0 13px 2px #e7bc6e66,0 0 38px #e7bc6e77;opacity:.75}
.cinema-arch-light{position:absolute;top:27%;height:38%;width:4px;background:#e5cca0;box-shadow:0 0 10px #f5d599,0 0 38px 8px #dbae5038;border-radius:2px}
.cinema-arch-light-left{left:14px}.cinema-arch-light-right{right:14px}
.cinema-inner-door{position:absolute;inset:4% 10%;transform:translateZ(-1850px);border:3px solid #a28752;background:radial-gradient(ellipse at 50% 40%,#3b262c,#160d11 80%);box-shadow:0 0 0 12px #1b1016,0 0 0 13px #b4944f99,inset 0 0 0 20px #d9b76708;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#dfc48a;gap:20px}
.cinema-inner-door>span{font-size:90px;text-shadow:0 0 45px #efce8277}
.cinema-floor-reflection{position:absolute;left:14%;right:14%;bottom:0;height:45%;transform:translateZ(-70px);background:linear-gradient(180deg,#c8a15c00,#c8a15c13 60%,#eed7952b);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);filter:blur(12px);pointer-events:none}
.cinema-tunnel-haze{position:absolute;inset:0;transform:translateZ(-250px);background:radial-gradient(ellipse at 50% 44%,#c2a3a912,transparent 55%);pointer-events:none}
.cinema-light-beam{position:absolute;z-index:3;top:1%;height:96%;width:48%;background:linear-gradient(180deg,#dfc18418,transparent 85%);opacity:0;filter:blur(8px);clip-path:polygon(48% 0,54% 0,100% 100%,0 100%);transition:opacity 1.8s;pointer-events:none;mix-blend-mode:screen}
.cinema-beam-left{left:5%;transform:rotate(-12deg);transform-origin:50% 0}.cinema-beam-right{right:5%;transform:rotate(12deg);transform-origin:50% 0}
.cinema-dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6;opacity:0;transition:opacity 1s}.cinema-dust span{position:absolute;left:var(--dust-x);top:var(--dust-y);width:var(--dust-size);height:var(--dust-size);border-radius:50%;background:#f2dda9;box-shadow:0 0 5px #e8c28088;opacity:0;animation:cinema-mote var(--dust-duration) var(--dust-delay) linear infinite;animation-play-state:paused}
.cinema-vignette{position:absolute;inset:0;z-index:7;box-shadow:inset 0 0 110px 30px #0008;pointer-events:none;opacity:.8;transition:opacity 1.5s}
.hero[data-cinematic-ready] .hero-copy{transition:opacity .5s,transform 1.15s cubic-bezier(.2,.65,.1,1),filter .7s;transform:translate3d(calc(var(--cinema-pan-x) * -.25),calc(var(--cinema-pan-y) * -.25),0)}
.hero[data-cinematic-ready] .logo-seal{filter:drop-shadow(0 10px 30px #000b)}
.hero[data-cinematic-ready] #explore{position:relative;overflow:hidden;box-shadow:0 5px 26px #000a,0 0 0 4px #bda16c09}
.hero[data-cinematic-ready] #explore:before{content:"";position:absolute;inset:-1px;background:linear-gradient(105deg,transparent 25%,#fff5 50%,transparent 75%);transform:translateX(-140%);transition:transform .85s cubic-bezier(.16,.5,.12,1);pointer-events:none}.hero[data-cinematic-ready] #explore:hover:before{transform:translateX(140%)}
.cinema-letterbox{position:absolute;left:0;right:0;height:0;background:#080507;z-index:8;pointer-events:none;transition:height .8s cubic-bezier(.2,.6,.1,1)}.cinema-letterbox-top{top:88px}.cinema-letterbox-bottom{bottom:0}
.cinema-arrival{position:absolute;inset:88px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 50%,#180c12e8,#0a0508f2 80%);z-index:9;opacity:0;pointer-events:none;transition:opacity .8s;isolation:isolate}.cinema-arrival-mark{font-size:34px;color:#d6b16b;transform:scale(.8);opacity:0;transition:transform 1s,opacity .6s}.cinema-arrival-rule{width:35px;height:1px;background:#ab8c52;transform:scaleX(0);transition:transform 1s;margin:20px 0 26px}.cinema-arrival p{font-family:"PMingLiU",serif;font-size:clamp(29px,4vw,52px);letter-spacing:10px;line-height:1.6;color:#e7d4ab;transform:translateY(20px);opacity:0;transition:transform .85s cubic-bezier(.2,.65,.1,1),opacity .8s}.cinema-arrival small{font-size:10px;color:#afa188;letter-spacing:4px;margin-top:20px;opacity:0;transition:opacity .7s .2s}
.cinema-skip{position:fixed;top:108px;right:28px;z-index:40;min-height:44px;padding:10px 15px;border:1px solid #ae945b66;background:#120b0fc9;color:#d9c598;letter-spacing:2px;font-size:10px;backdrop-filter:blur(8px)}.cinema-skip span{padding-left:12px}.cinema-skip:hover{border-color:#e4c98d;background:#2d1e23}
.hero.cinema-unlocking .hero-copy{opacity:0;transform:translate3d(0,-14px,0) scale(.97);filter:blur(4px);pointer-events:none}.hero.cinema-unlocking .hero-bottom,.hero.cinema-unlocking .hero-location{opacity:.15;transition:opacity .65s}.hero.cinema-unlocking .cinema-door-seam{opacity:1;transform:scaleY(1);box-shadow:0 0 14px #f2d08aaa,0 0 45px 8px #e5bd6b55}.hero.cinema-unlocking .cinema-door-bloom{opacity:1}.hero.cinema-unlocking .gate-left .cinema-lock-rail{transform:translateX(-24px)}.hero.cinema-unlocking .gate-right .cinema-lock-rail{transform:translateX(24px)}.hero.cinema-unlocking .gate-handle{transform:translateZ(14px) rotateZ(-5deg)}.hero.cinema-unlocking .gate-light{opacity:1;box-shadow:0 0 16px #f5d38eaa,0 0 75px 16px #dfad5040}.hero.cinema-active .gate-leaf{will-change:transform}.hero.cinema-active .cinema-depth{will-change:transform}.hero.cinema-active .cinema-letterbox{height:25px}
.hero.cinema-opening .gate-left{transform:rotateY(-89deg)}.hero.cinema-opening .gate-right{transform:rotateY(89deg)}.hero.cinema-opening .cinema-door-seam{transform:scaleX(36);opacity:0;transition:transform 1.1s,opacity 1s .25s}.hero.cinema-opening .cinema-light-beam,.hero.cinema-opening .cinema-dust{opacity:.75}.hero.cinema-opening .cinema-door-bloom{opacity:.2}.hero.cinema-visible.cinema-opening:not(.cinema-paused) .cinema-dust span{animation-play-state:running}
.hero.cinema-travelling .cinema-depth{transform:translate3d(0,0,1080px)}.hero.cinema-travelling .gate-scene{transform:translate3d(0,-3px,0) scale(1.18);transition:transform 2.3s cubic-bezier(.3,.02,.2,1)}.hero.cinema-travelling .cinema-vignette{opacity:.3}.hero.cinema-travelling .cinema-light-beam{opacity:.35}.hero.cinema-travelling .cinema-dust{transform:scale(1.2);transition:transform 2s,opacity .6s}
.hero.cinema-arriving .cinema-arrival,.hero.cinema-entered .cinema-arrival{opacity:1}.hero.cinema-arriving .cinema-arrival p,.hero.cinema-entered .cinema-arrival p{opacity:1;transform:translateY(0)}.hero.cinema-arriving .cinema-arrival small,.hero.cinema-entered .cinema-arrival small{opacity:1}.hero.cinema-arriving .cinema-arrival-rule,.hero.cinema-entered .cinema-arrival-rule{transform:scaleX(1)}.hero.cinema-arriving .cinema-arrival-mark,.hero.cinema-entered .cinema-arrival-mark{transform:scale(1);opacity:1}
.hero.cinema-entered .gate-left{transform:rotateY(-89deg)}.hero.cinema-entered .gate-right{transform:rotateY(89deg)}.hero.cinema-entered .cinema-depth{transform:translate3d(0,0,-120px)}.hero.cinema-entered .cinema-door-seam{opacity:0}.hero.cinema-entered .hero-copy{opacity:0;visibility:hidden;pointer-events:none;transform:none;filter:none}.hero.cinema-entered .gate-scene{transform:none}.hero.cinema-entered .cinema-arrival{background:radial-gradient(ellipse at 50% 48%,#090609c4, #09060966 33%,transparent 62%);transition:opacity .85s .35s}.hero.cinema-entered .cinema-arrival p{text-shadow:0 3px 16px #000,0 0 36px #000,0 0 70px #000}.hero.cinema-entered .cinema-arrival small{text-shadow:0 2px 10px #000,0 0 20px #000}.hero.cinema-paused .cinema-dust span{animation-play-state:paused!important}
@keyframes cinema-mote{0%{transform:translate3d(0,18px,0);opacity:0}18%{opacity:.5}75%{opacity:.35}100%{transform:translate3d(25px,-55px,0);opacity:0}}
@media(max-width:800px){.hero[data-cinematic-ready] .gate-scene{perspective:1100px}.hero[data-cinematic-ready] .gate-panel{inset:16px 14px;box-shadow:inset 0 0 0 3px #0c090b,inset 0 0 0 4px #7d704166,inset 0 0 20px #0009}.hero[data-cinematic-ready] .gate-handle{height:62px;width:6px;top:76%}.hero[data-cinematic-ready] .gate-left .gate-handle{right:13px}.hero[data-cinematic-ready] .gate-right .gate-handle{left:13px}.cinema-lock-rail{top:76%;height:61px;width:15px}.cinema-door-inscription{font-size:7px;letter-spacing:5px;top:12%}.gate-left .cinema-door-inscription{left:16%}.gate-right .cinema-door-inscription{right:16%}.cinema-door-edge{width:13px}.cinema-arch{border-width:9px}.cinema-arch-light{width:2px;left:8px}.cinema-arch-light-right{left:auto;right:8px}.cinema-light-beam{filter:none;opacity:0}.cinema-letterbox-top{top:72px}.cinema-arrival{top:72px}.cinema-skip{top:88px;right:15px;font-size:9px;padding:9px 12px;letter-spacing:1px}.cinema-arrival p{font-size:30px;letter-spacing:5px}.cinema-arrival small{font-size:9px;letter-spacing:2px}.cinema-inner-door>span{font-size:60px}.cinema-vignette{box-shadow:inset 0 0 55px 12px #0008}.hero.cinema-travelling .gate-scene{transform:scale(1.12)}.hero.cinema-active .cinema-letterbox{height:14px}.cinema-dust span:nth-child(n+11){display:none}.cinema-floor-reflection{filter:none}.hero.cinema-unlocking .hero-copy{filter:none}}
@media(prefers-reduced-motion:reduce){.hero[data-cinematic-ready] .gate-scene,.hero[data-cinematic-ready] .hero-copy{transform:none!important}.hero[data-cinematic-ready] .cinema-dust{display:none}.hero[data-cinematic-ready] .cinema-dust span{animation:none!important}.hero[data-cinematic-ready] .gate-leaf,.hero[data-cinematic-ready] .cinema-depth,.hero[data-cinematic-ready] .gate-scene,.hero[data-cinematic-ready] .hero-copy{transition:none!important}.cinema-letterbox,.cinema-arrival{display:none}.hero.cinema-entered .cinema-arrival{display:flex;transition:none}.hero.cinema-entered .cinema-arrival>*{transition:none}.hero[data-cinematic-ready] #explore:before{display:none}}