:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#16051d}.mirage{position:relative;isolation:isolate;width:100%;height:100%;height:100svh;overflow:hidden;background:#16051d}.mirage__filters{position:absolute;pointer-events:none}.mirage__aura{position:absolute;inset:-35%;background:conic-gradient(from 45deg at 50% 50%,#65184f,#153e57,#8c4b25,#472e8a,#10392d,#65184f);filter:blur(65px);animation:aura 48s linear infinite;opacity:.7}.mirage__image-space{position:absolute;inset:5% 15% 4%;filter:url(#mirage-warp);animation:float 17s ease-in-out infinite alternate}.mirage__image,.mirage__echo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;user-select:none;pointer-events:none}.mirage__image{filter:saturate(1.55) contrast(1.08);mask-image:radial-gradient(ellipse at 50% 48%,#000 33%,#000d 54%,transparent 76%);animation:chromatic 29s linear infinite}.mirage__echo{mix-blend-mode:screen;opacity:.26;mask-image:radial-gradient(ellipse,#000 35%,transparent 74%)}.mirage__echo--left{translate:-27% 0;scale:-1.08 1.08;filter:hue-rotate(105deg) saturate(1.4);animation:echo-left 19s ease-in-out infinite alternate}.mirage__echo--right{translate:27% 0;scale:-1.08 1.08;filter:hue-rotate(255deg) saturate(1.4);animation:echo-right 23s ease-in-out infinite alternate}.mirage__echo--slice{clip-path:polygon(0 28%,100% 38%,100% 55%,0 45%,0 72%,100% 66%,100% 73%,0 82%);translate:6% 0;filter:hue-rotate(170deg);opacity:.35;animation:slice-drift 21s ease-in-out infinite alternate}.mirage__syrup{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 30%,#ff12674a,transparent 50%),radial-gradient(ellipse at 80% 65%,#19ffb84a,transparent 45%),linear-gradient(130deg,#58207926,#2c0d5600 45%,#ffbb4022);mix-blend-mode:color;animation:syrup 27s ease-in-out infinite alternate}.mirage__contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.65}.mirage__seal{position:absolute;z-index:2;display:grid;place-items:center;width:clamp(110px,21vw,290px);aspect-ratio:1;border-radius:50%;border:1px solid #ffbd6355;outline:1px solid #6affac33;outline-offset:14px;color:#ffcf9a88;mix-blend-mode:screen;box-shadow:0 0 90px #ff77251a,inset 0 0 60px #bc497812;animation:seal 45s linear infinite}.mirage__seal:before,.mirage__seal:after{content:"";position:absolute;inset:12%;border:1px dashed #ffc78977;border-radius:43% 57% 58% 42% / 48% 44% 56% 52%}.mirage__seal:after{inset:27%;border-style:solid;rotate:45deg;border-radius:9%;color:#76ffb5}.mirage__seal span{position:absolute;font:12px monospace;letter-spacing:9px;white-space:nowrap;rotate:-23deg;text-shadow:0 0 14px #ffa36955}.mirage__seal--one{left:4%;top:13%;rotate:-18deg}.mirage__seal--two{right:3%;bottom:12%;border-color:#89ffc555;outline-color:#d572ff33;color:#a6ffd788;animation-direction:reverse}.mirage__tunnel{position:absolute;inset:0;pointer-events:none;perspective:500px;opacity:.45}.mirage__tunnel i{position:absolute;left:50%;top:50%;width:85vmin;height:85vmin;translate:-50% -50%;border:1px solid #ffb28b66;border-radius:40% 60% 60% 40% / 60% 40% 60% 40%;rotate:35deg;animation:tunnel 24s ease-in-out infinite alternate}.mirage__tunnel i:nth-child(2){scale:1.3;rotate:65deg;border-color:#7dfbb94d;animation-delay:-5s}.mirage__tunnel i:nth-child(3){scale:1.7;rotate:95deg;border-color:#de8aff4d;animation-delay:-10s}.mirage__tunnel i:nth-child(4){scale:2.2;rotate:125deg;animation-delay:-15s}.mirage__tunnel i:nth-child(5){scale:.65;rotate:5deg;border-color:#7cfbc433;animation-delay:-20s}.mirage__edge{position:absolute;z-index:3;left:-15%;width:130%;overflow:hidden;height:18px;font:10px/18px monospace;letter-spacing:11px;white-space:nowrap;color:#f2c9a57a;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.mirage__edge--top{top:3%;rotate:-2deg;animation:edge 35s linear infinite alternate}.mirage__edge--bottom{bottom:3%;rotate:2deg;color:#9beabb7a;animation:edge 29s linear infinite alternate-reverse}.mirage__lens{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,transparent 25%,#14051833 63%,#07020be6 110%);box-shadow:inset 0 0 90px #08020d}.mirage__texture{position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,#f7ba8d22 3px 4px);mix-blend-mode:soft-light}.mirage.is-paused *{animation-play-state:paused!important}@keyframes aura{to{rotate:360deg}}@keyframes float{to{translate:1.5% -1%;scale:1.06;rotate:1.5deg}}@keyframes chromatic{to{filter:saturate(1.55) contrast(1.08) hue-rotate(360deg)}}@keyframes echo-left{to{translate:-34% 3%;rotate:-7deg;scale:-1.14 1.14}}@keyframes echo-right{to{translate:35% -3%;rotate:7deg;scale:-1.14 1.14}}@keyframes slice-drift{to{translate:-7% 2%;rotate:-3deg}}@keyframes syrup{to{opacity:.4;scale:1.1}}@keyframes seal{to{rotate:342deg}}@keyframes tunnel{to{rotate:85deg;border-radius:60% 40% 40% 60% / 40% 60% 40% 60%}}@keyframes edge{to{translate:-8% 0}}@media(max-width:650px){.mirage__image-space{inset:8% -12% 7%}.mirage__seal{width:33vw}.mirage__seal--one{left:-9%;top:13%}.mirage__seal--two{right:-8%;bottom:13%}.mirage__seal span{font-size:9px;letter-spacing:5px}.mirage__echo--left{opacity:.2}.mirage__echo--right{opacity:.2}.mirage__edge{font-size:8px;letter-spacing:8px}}@media(prefers-reduced-motion:reduce){.mirage *{animation:none!important}.mirage__image-space{filter:none}.mirage__echo--slice{display:none}.mirage__contours{opacity:.32}}
