/* CYEB GREEN: the next chapter, an interactive energy portal. */
.portal.soon{background:radial-gradient(ellipse at 55% 45%,#174b5c 0%,#102b44 48%,#091e35 100%);color:#fff;isolation:isolate}
.portal.soon::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,#66c8d303 3px 4px);pointer-events:none}
.soon .future-stage{position:relative;min-height:245px;overflow:hidden;perspective:700px;--vortex-x:0deg;--vortex-y:0deg}
.future-vortex-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95}
.future-vortex-body{position:relative;width:142px;height:172px;transform:rotateX(var(--vortex-y)) rotateY(var(--vortex-x)) rotateZ(-13deg);transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform;pointer-events:none}
.future-vortex-body::before{content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(ellipse,#a6ce3900 24%,#6de0d80a 48%,#6de0d81d 58%,transparent 73%);filter:blur(9px);animation:future-breath 5s ease-in-out infinite}
.future-vortex-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#80e7e000,#80e7e057 16%,#caf9dc 23%,#a6ce3999 28%,#80e7e000 39%,#80e7e025 67%,#b3e374d9 73%,#80e7e000 85%);box-shadow:0 0 25px #72ddd22b,inset 0 0 25px #7eddb62b;animation:future-rim-spin 15s linear infinite}
.future-vortex-rim::before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(ellipse,#020b15 0%,#071a2b 57%,#104b52 100%);box-shadow:inset 0 0 20px #75d9c23d}
.future-vortex-rim::after{content:"";position:absolute;inset:-12px;border:1px solid #7ad8cf21;border-radius:50%;box-shadow:0 0 0 17px #7ad8cf06}
.future-vortex-axis{position:absolute;inset:22px -36px;border:1px solid #74dad957;border-radius:50%;transform:rotateZ(33deg) rotateY(58deg);box-shadow:0 0 10px #75d9b91c}
.future-vortex-axis::after{content:"";position:absolute;width:5px;height:5px;left:50%;top:-3px;border-radius:50%;background:#ccff9b;box-shadow:0 0 11px 3px #a6ce3980}
.future-vortex-slit{position:absolute;width:1px;height:64%;left:50%;top:18%;background:linear-gradient(transparent,#d6fff4 35%,#ebffdd 50%,#6cddd5 70%,transparent);box-shadow:0 0 14px 4px #6ddbc44f;opacity:.88;transform:rotate(13deg);transition:transform .5s,opacity .5s}
.future-vortex-slit::before{content:"";position:absolute;left:-15px;right:-15px;top:50%;height:1px;background:linear-gradient(90deg,transparent,#cdffe0,transparent)}
.soon .future-coordinate{z-index:2;color:#96b8bf;bottom:7px;letter-spacing:.22em;font-size:7px}
.soon .future-activation{position:absolute;bottom:25px;left:0;right:0;color:#c3e3b1;text-align:center;font-size:8px;letter-spacing:.11em;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.soon:hover .future-activation,.soon:focus-visible .future-activation,.soon.is-active .future-activation{opacity:1;transform:translateY(0)}
.soon:hover .future-vortex-rim,.soon:focus-visible .future-vortex-rim{box-shadow:0 0 45px #72ddd24f,inset 0 0 35px #b5f27447}
.soon.is-opening .future-vortex-body{transform:scale(1.65) rotateZ(4deg);transition:transform .42s ease-in}
.soon.is-opening .future-vortex-slit{transform:scaleX(38) rotate(13deg);opacity:1;transition:transform .35s ease-in}
#soon-dialog{overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#194956,#102b44 62%);border-color:#69b5aa68;isolation:isolate}
#soon-dialog::before{content:"";position:absolute;width:420px;height:420px;left:50%;top:36%;border:1px solid #70dad518;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 30px #78d3c908,0 0 0 75px #78d3c904;z-index:-1;pointer-events:none}
#soon-dialog .dialog-symbol{width:58px;height:58px;border-radius:50%;margin:27px auto 22px;background:radial-gradient(ellipse,#c5fca60d,#57ced303);font-size:32px;box-shadow:0 0 60px #a6ce3940,inset 0 0 20px #a6ce3910}
#soon-dialog #soon-title{font-size:clamp(26px,3vw,35px);line-height:1.22}
#soon-dialog .future-word{display:flex;justify-content:center;gap:.11em;color:#c7efa4;font-family:Poppins,Arial,sans-serif;letter-spacing:.06em;font-weight:500;font-size:clamp(22px,3vw,34px);margin:26px 0 0}
#soon-dialog .future-word span{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(13px) scale(1.25);text-shadow:0 0 20px #a6ce3966}
#soon-dialog[open] .future-word span{animation:future-letter .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(150ms + var(--letter-i) * 55ms)}
#soon-dialog[open]{animation:future-dialog-in .5s cubic-bezier(.2,.8,.2,1)}
#soon-dialog .future-word+.future-dialog-note{color:#a7bdc9;font-size:13px;line-height:1.8;margin:20px 0 0}
#soon-dialog .dialog-back{margin-top:27px}
@keyframes future-breath{50%{transform:scale(1.2);opacity:.65}}
@keyframes future-rim-spin{to{transform:rotate(360deg)}}
@keyframes future-letter{to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes future-dialog-in{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:960px){.soon .future-stage{min-height:245px}.future-vortex-body{width:147px;height:178px}}
@media(max-width:640px){.soon .future-stage{min-height:220px;height:220px}.future-vortex-body{width:133px;height:160px}.soon .future-activation{opacity:1;transform:none;font-size:7px;bottom:21px}.soon .future-coordinate{font-size:6px;bottom:4px}#soon-dialog .future-word{margin-top:24px}#soon-dialog .dialog-symbol{margin-top:24px}#soon-dialog #soon-title{font-size:26px}#soon-dialog .future-dialog-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.future-vortex-body{will-change:auto}.future-vortex-rim,.future-vortex-body::before{animation:none!important}.soon.is-opening .future-vortex-body{transform:none}.soon.is-opening .future-vortex-slit{transform:rotate(13deg)}#soon-dialog .future-word span{opacity:1;filter:none;transform:none;animation:none!important}#soon-dialog[open]{animation:none!important}}

.future-stage.is-dormant .future-vortex-rim,.future-stage.is-dormant .future-vortex-body::before{animation-play-state:paused}