/* Preserve the complete button artwork's 2172:724 proportions. */
.ornate{aspect-ratio:3 / 1;min-height:0;height:auto;padding:0;background-size:contain;display:block}
.ornate>span{position:absolute;left:8%;right:8%;top:44%;transform:translateY(-50%);line-height:1.15}
.controls{top:auto;bottom:112px}
#replay{display:block;margin:8px auto 0;width:240px;max-width:90%;min-height:70px;padding:18px 20px;border:0;background:transparent url('assets/nav-button.png') center/100% 100% no-repeat;text-decoration:none;font-family:'Cinzel',Georgia,serif;font-size:18px;color:#ead8ae;text-shadow:0 2px 3px #000;filter:drop-shadow(0 4px 6px #0008);transition:filter .2s,transform .15s}
#replay[hidden]{display:none}
#replay:hover{filter:brightness(1.22) drop-shadow(0 0 12px #b9f98826)}
#replay:active{transform:scale(.985)}
#scene[data-state=ethereum]{height:auto;min-height:max(1040px,100svh)}
#story{isolation:isolate;position:relative;left:auto;top:auto;width:min(49%,740px);margin:80px 2% 170px 49%;padding:30px 30px 29px}
#story:before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(5,5,9,.88);pointer-events:none}
#story h2{font-size:clamp(33px,3.225vw,48px);line-height:1.2;margin-bottom:24px}
#story p{font-size:clamp(24px,1.8vw,27px);line-height:1.45;margin-bottom:22px;color:#f0e8d9;text-shadow:0 1px 2px #000}
#story blockquote{font-size:clamp(25.5px,2.025vw,30px);line-height:1.4;margin-bottom:24px;color:#dfcafa}
#story>a{font-size:21px;color:#deca9d}
#scene[data-state=ethereum] .controls{top:auto;bottom:115px;left:26%;width:40%}
#scene[data-state=ethereum] #cast-meter,#scene[data-state=ethereum] #hint{display:none}
#scene[data-state=ethereum] #reveal{height:min(100%,1050px)}
@media(min-aspect-ratio:2/1){.controls{top:auto;bottom:95px}.ornate{min-height:0;padding:0}}
@media(max-width:1000px) and (min-width:701px){#story{width:53%;margin-left:46%;margin-right:1%;padding:23px 20px}#story h2{font-size:33px}#story p{font-size:24px}#story blockquote{font-size:25.5px}}
@media(max-width:700px){.controls{top:auto;bottom:160px}.ornate{min-height:0;padding:0;aspect-ratio:3 / 1}.ornate>span{left:9%;right:9%;font-size:clamp(16px,4.5vw,20px)}#scene[data-state=ethereum]{min-height:max(1090px,100svh)}#scene[data-state=ethereum] #reveal{height:560px}#story{top:auto;left:auto;width:94%;margin:330px 3% 260px;padding:23px 16px}#story h2{font-size:32px}#story p{font-size:24px;line-height:1.4}#story blockquote{font-size:27px;line-height:1.35;padding-left:12px}#story>a{font-size:19px}#scene[data-state=ethereum] .controls{top:auto;bottom:153px;left:50%;width:80%}#replay{min-height:66px;font-size:17px;width:230px}}
@media(prefers-reduced-motion:reduce){#replay{transition:none}}

/* Soft atmospheric smoke; independent of the hold-to-cast interaction. */
.smoke-edges{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:1;transition:opacity 1.8s ease}
.smoke-edges i,.smoke-button:before,.smoke-button:after{position:absolute;display:block;background:url('assets/smoke.png') center/contain no-repeat;pointer-events:none;filter:blur(5px) brightness(1.8);mix-blend-mode:screen;opacity:.48;animation:smoke-drift 12s ease-in-out infinite alternate;will-change:transform}
.smoke-edges i{width:75vw;height:49%;top:33%;max-width:1100px}
.smoke-left{left:-22%;--smoke-turn:-17deg;--smoke-flip:1}
.smoke-right{right:-22%;--smoke-turn:15deg;--smoke-flip:-1;animation-duration:15s!important;animation-delay:-7s!important}
.smoke-button{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:1;transition:opacity 1.8s ease}
.smoke-button:before,.smoke-button:after{content:'';width:140%;height:170%;left:-20%;top:-32%;opacity:.34;--smoke-turn:0deg;--smoke-flip:1;animation-duration:11s}
.smoke-button:after{opacity:.18;--smoke-turn:8deg;--smoke-flip:-1;animation-duration:16s;animation-delay:-8s}
#scene:not([data-state=idle]):not([data-state=casting]) .smoke-edges,#scene:not([data-state=idle]):not([data-state=casting]) .smoke-button{opacity:0}
@keyframes smoke-drift{0%{transform:translate3d(-38px,22px,0) rotate(var(--smoke-turn)) scaleX(var(--smoke-flip)) scale(1)}50%{transform:translate3d(18px,-18px,0) rotate(calc(var(--smoke-turn) + 3deg)) scaleX(var(--smoke-flip)) scale(1.10)}100%{transform:translate3d(60px,-48px,0) rotate(calc(var(--smoke-turn) - 2deg)) scaleX(var(--smoke-flip)) scale(1.18)}}
@media(max-width:700px){.smoke-edges i{width:115vw;height:40%;top:33%;opacity:.35}.smoke-left{left:-49%}.smoke-right{right:-49%}.smoke-button:before{opacity:.27}.smoke-button:after{opacity:.14}}
@media(prefers-reduced-motion:reduce){.smoke-edges i,.smoke-button:before,.smoke-button:after{animation:none;will-change:auto}.smoke-edges,.smoke-button{transition:none}}

/* Shallow floor mist collects at the corners and rolls sideways. */
.smoke-pool{position:absolute;bottom:-20px;width:62vw;height:clamp(150px,24vh,270px);pointer-events:none;--pool-flip:1}
.smoke-pool-left{left:-15%}
.smoke-pool-right{right:-15%;--pool-flip:-1}
.smoke-pool:before,.smoke-pool:after{content:'';position:absolute;inset:0;background:url('assets/smoke.png') center bottom/100% 100% no-repeat;filter:blur(7px) brightness(1.8);mix-blend-mode:screen;opacity:.43;transform-origin:center bottom;animation:smoke-pool-roll 18s ease-in-out infinite alternate;will-change:transform}
.smoke-pool:after{inset:30% -8% -4%;opacity:.23;animation-duration:25s;animation-delay:-12s}
.smoke-pool-right:before{animation-duration:22s;animation-delay:-9s}
.smoke-pool-right:after{animation-duration:28s;animation-delay:-19s}
@keyframes smoke-pool-roll{0%{transform:translate3d(-24px,3px,0) scaleX(var(--pool-flip)) scale(1,.94)}50%{transform:translate3d(4px,-3px,0) scaleX(var(--pool-flip)) scale(1.07,1.02)}100%{transform:translate3d(36px,1px,0) scaleX(var(--pool-flip)) scale(1.14,.97)}}
@media(max-width:700px){.smoke-pool{width:86vw;height:155px;bottom:-12px}.smoke-pool-left{left:-29%}.smoke-pool-right{right:-29%}.smoke-pool:before{opacity:.34}.smoke-pool:after{opacity:.18}}
@media(prefers-reduced-motion:reduce){.smoke-pool:before,.smoke-pool:after{animation:none;will-change:auto}}