/* Original ivory gatefold with a soft felt dragon charm. */
.nair-open-splash.dragon-gate{display:grid;place-items:center;padding:20px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 35%,#fffdf7 0%,#f4eddf 60%,#e9dfcd 100%);color:#40545a;opacity:1;transition:opacity .65s ease}
.dragon-gate:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23p)' opacity='.045' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.5}
.dragon-stage{position:relative;width:min(88vw,430px,52svh);aspect-ratio:2/3;perspective:1500px;transform-style:preserve-3d;border-radius:8px;isolation:isolate}
.dragon-stage:before{content:'';position:absolute;inset:10px;border-radius:9px;box-shadow:0 30px 65px #715b3833,0 5px 12px #715b3826;transition:opacity .6s ease .2s}
.dragon-inner{position:absolute;inset:4px;background:#fffaf0;border:4px solid #fff9ec;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #c4a87f33;transition:transform 1.25s cubic-bezier(.2,.65,.15,1)}
.dragon-inner>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.dragon-inner:after{content:'';position:absolute;inset:0;background:linear-gradient(#fff9ec45,transparent 30%,transparent 70%,#193c4440)}
.dragon-inner>span{position:absolute;z-index:1;left:0;right:0;bottom:9%;text-align:center;color:#fff5d7}
.dragon-inner svg{width:36px;height:36px;filter:drop-shadow(0 2px 4px #354a4e30)}
.dragon-door{position:absolute;top:0;bottom:0;width:50%;z-index:2;overflow:hidden;background:#fbf5e9;backface-visibility:hidden;transform:rotateY(0deg);transition:transform 1.3s .28s cubic-bezier(.22,.7,.16,1),box-shadow .9s .3s;will-change:transform}
.dragon-door>img{position:absolute;top:0;width:200%;max-width:none;height:100%;display:block;object-fit:fill;pointer-events:none}
.dragon-door-left{left:0;transform-origin:left center;border-radius:7px 0 0 7px;box-shadow:inset -1px 0 0 #a38d6f15}
.dragon-door-right{right:0;transform-origin:right center;border-radius:0 7px 7px 0;box-shadow:inset 1px 0 0 #fffaf0}
.dragon-door-left>img{left:0}.dragon-door-right>img{right:0}
.nair-open-splash.dragon-gate .seal-button{position:absolute;z-index:5;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:inherit;display:block;cursor:pointer;opacity:1;transform:none;transition:none;-webkit-tap-highlight-color:transparent}
.nair-open-splash.dragon-gate .seal-button:hover{transform:none}
.nair-open-splash.dragon-gate .seal-button:focus-visible{outline:2px solid #b6a071;outline-offset:7px}
.dragon-charm{position:absolute;width:53%;aspect-ratio:1;left:23.5%;top:38%;display:block;transform-origin:50% 70%;filter:drop-shadow(0 8px 6px #5e75672b)}
.dragon-charm>img{width:100%;height:100%;display:block;object-fit:contain;animation:dragon-breathe 4.6s ease-in-out infinite;transition:filter .25s ease}
@media(hover:hover){.dragon-gate .seal-button:hover .dragon-charm>img{filter:brightness(1.045)}}
.dragon-sparkles{position:absolute;z-index:4;left:50%;top:56%;pointer-events:none}
.dragon-spark{--x:0px;--y:0px;position:absolute;width:10px;height:10px;opacity:0;background:#d7b56e;clip-path:polygon(50% 0,60% 37%,100% 50%,60% 62%,50% 100%,39% 62%,0 50%,39% 37%)}
.spark-0{--x:-75px;--y:-90px}.spark-1{--x:82px;--y:-105px;width:7px;height:7px}.spark-2{--x:-106px;--y:-8px;width:7px;height:7px}.spark-3{--x:115px;--y:10px}.spark-4{--x:-40px;--y:72px;width:6px;height:6px}.spark-5{--x:50px;--y:65px;width:8px;height:8px}.spark-6{--x:12px;--y:-138px;width:6px;height:6px}
.nair-open-splash.dragon-gate.is-opening{animation:none;visibility:visible;opacity:1}
.dragon-gate.is-opening .dragon-stage:before{opacity:0}
.nair-open-splash.dragon-gate.is-opening .seal-button{opacity:1;transform:none;pointer-events:none}
.dragon-gate.is-opening .dragon-charm{animation:dragon-farewell .85s cubic-bezier(.22,.7,.16,1) forwards}
.dragon-gate.is-opening .dragon-charm>img{animation:none}
.dragon-gate.is-opening .dragon-spark{animation:dragon-sparkle 1.2s .22s ease-out forwards}
.dragon-gate.is-opening .dragon-door-left{transform:rotateY(-118deg);box-shadow:10px 5px 30px #715b3814}
.dragon-gate.is-opening .dragon-door-right{transform:rotateY(118deg);box-shadow:-10px 5px 30px #715b3814}
.dragon-gate.is-opening .dragon-inner{transform:scale(1.025)}
.nair-open-splash.dragon-gate.is-revealing{opacity:0;pointer-events:none}
@keyframes dragon-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes dragon-farewell{0%{transform:scale(1) rotate(0);opacity:1}22%{transform:translateY(5px) scale(.94) rotate(-6deg);opacity:1}52%{transform:translateY(-25px) scale(1.05) rotate(9deg);opacity:1}100%{transform:translateY(-95px) scale(.8) rotate(-5deg);opacity:0}}
@keyframes dragon-sparkle{0%{transform:translate(0,0) scale(.2);opacity:0}22%{opacity:.8}100%{transform:translate(var(--x),var(--y)) rotate(65deg) scale(.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.dragon-gate *{animation:none!important;transition:none!important}.nair-open-splash.dragon-gate{transition:none}}