@font-face{font-family:OctletsDisplay;src:url('assets/fonts/lilita-one.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* Resolution-independent title scene. All scenery is CSS or inline vector paths. */
.world-panorama.depth-title{display:grid;place-items:center;isolation:isolate;height:clamp(350px,34vw,460px);background:#493085;border-color:#754cb5;box-shadow:0 24px 60px #3923661a}
.depth-water{position:absolute;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at 48% -25%,#e4bfff9c,transparent 59%),radial-gradient(ellipse at 50% 60%,#ac7bf58c,transparent 56%),radial-gradient(ellipse at 0 90%,#241d61b8,transparent 58%),linear-gradient(180deg,#a375ed 0%,#8153ce 35%,#593595 73%,#33245f 100%)}
.depth-water:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,#1e174647);pointer-events:none}
.depth-surface{position:absolute;inset:-18px -2% auto;width:104%;height:30%;fill:none;stroke:#e9d8ff;stroke-width:2;opacity:.23}
.depth-surface path:first-child{stroke-width:6;stroke-linecap:round;opacity:.65}
.depth-surface path:last-child{stroke-width:2;opacity:.7}
.depth-beams{position:absolute;inset:-20% -10% 0;filter:blur(12px);opacity:.5;transform-origin:50% 0;animation:depth-light 18s ease-in-out infinite alternate}
.depth-beams i{position:absolute;top:0;height:115%;background:linear-gradient(#eed5ff94,#e9d7ff06 90%);clip-path:polygon(42% 0,59% 0,100% 100%,0 100%);transform:rotate(15deg);transform-origin:50% 0}
.depth-beams i:nth-child(1){left:12%;width:18%;opacity:.55}.depth-beams i:nth-child(2){left:53%;width:24%;transform:rotate(-9deg);opacity:.6}.depth-beams i:nth-child(3){left:79%;width:12%;transform:rotate(-20deg);opacity:.3}
.depth-floor{position:absolute;bottom:-1px;left:0;width:100%;height:32%;fill:none}
.depth-ripple{position:absolute;width:36%;height:70%;border:1px solid #d2b5ff24;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 0 28px #d2b5ff06,0 0 0 60px #d2b5ff05}
.ripple-left{left:-20%;bottom:-26%}.ripple-right{right:-23%;top:20%;transform:rotate(24deg)}
.depth-wordmark{position:relative;display:flex;align-items:center;flex-direction:column;gap:2px;max-width:92%;margin:0 0 26px;color:#fff2d7;text-align:center;font-family:OctletsDisplay,'Nunito Sans',ui-rounded,system-ui,sans-serif;font-weight:400;line-height:.95;letter-spacing:-.035em;-webkit-text-stroke:1.5px #432372;paint-order:stroke fill;text-shadow:0 4px 0 #4c287f,0 8px 0 #442475,0 16px 32px #28134652}
.depth-wordmark>span{display:block;font-size:clamp(27px,3.6vw,48px);letter-spacing:-.02em;transform:rotate(-3deg);padding-bottom:8px}
.depth-wordmark>strong{display:block;font-size:clamp(96px,12.3vw,166px);font-weight:400;letter-spacing:-.04em;-webkit-text-stroke:2px #432372}
.depth-title figcaption{z-index:2;background:linear-gradient(transparent,#211a303b);padding:26px 30px;font-size:10px;color:#eee1ff}
.depth-title figcaption .status-dot{background:#c5f0d1;box-shadow:0 0 12px #c5f0d166}
.depth-bubbles{position:absolute;inset:0}
.depth-bubbles i{position:absolute;left:var(--x);bottom:var(--y);width:var(--size);height:var(--size);border:1px solid #f7e9ff66;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff5 0,transparent 38%);box-shadow:inset -2px -3px 6px #d0b5ff18,0 0 12px #dec5ff0d;animation:depth-bubble var(--duration) ease-in-out var(--delay) infinite alternate}
.depth-bubbles i:after{content:'';position:absolute;top:20%;left:23%;width:23%;height:13%;border-radius:50%;background:#fff9;transform:rotate(-38deg)}
.depth-bubbles i:nth-child(1){--x:10%;--y:24%;--size:26px;--duration:12s;--delay:-3s}
.depth-bubbles i:nth-child(2){--x:22%;--y:54%;--size:12px;--duration:15s;--delay:-8s}
.depth-bubbles i:nth-child(3){--x:17%;--y:9%;--size:9px;--duration:11s;--delay:-5s}
.depth-bubbles i:nth-child(4){--x:78%;--y:23%;--size:22px;--duration:14s;--delay:-9s}
.depth-bubbles i:nth-child(5){--x:89%;--y:49%;--size:10px;--duration:17s;--delay:-3s}
.depth-bubbles i:nth-child(6){--x:84%;--y:10%;--size:33px;--duration:16s;--delay:-11s}
.depth-bubbles i:nth-child(7){--x:31%;--y:78%;--size:7px;--duration:13s;--delay:-7s}
.depth-bubbles i:nth-child(8){--x:68%;--y:74%;--size:8px;--duration:18s;--delay:-1s}
@keyframes depth-bubble{from{transform:translate3d(0,15px,0);opacity:.2}to{transform:translate3d(8px,-38px,0);opacity:.8}}
@keyframes depth-light{from{transform:rotate(-3deg);opacity:.35}to{transform:rotate(3deg);opacity:.6}}
body.motion-paused .depth-title *,body.page-hidden .depth-title *,body.modal-open .depth-title *,.depth-title.motion-offscreen *{animation-play-state:paused!important}
@media(max-width:800px){.world-panorama.depth-title{height:350px}.depth-wordmark>strong{font-size:clamp(100px,17vw,140px)}.depth-wordmark>span{font-size:clamp(29px,5vw,42px)}}
@media(max-width:520px){.world-panorama.depth-title{height:300px;border-radius:17px}.depth-wordmark{margin-bottom:18px}.depth-wordmark>strong{font-size:clamp(82px,23vw,118px);-webkit-text-stroke:1px #432372;text-shadow:0 3px 0 #4c287f,0 6px 0 #442475,0 12px 25px #28134652}.depth-wordmark>span{font-size:clamp(25px,7.4vw,36px);-webkit-text-stroke:1px #432372;padding-bottom:5px}.depth-title figcaption{padding:20px 16px;font-size:9px}.depth-title figcaption>span:last-child{display:none}.depth-beams{filter:blur(8px)}.depth-bubbles i:nth-child(6){--size:22px}}
@media(prefers-reduced-motion:reduce){.depth-title *{animation:none!important}}