/* XO World — The Deep dimension loading screen (portal.js) */
#xoDeep{position:fixed;inset:0;z-index:300;display:none;overflow:hidden;color:#eafcff;font-family:Figtree,system-ui,sans-serif;background:#03132b;user-select:none;-webkit-user-select:none;touch-action:none;isolation:isolate}
#xoDeep.on{display:block}
#xoDeep .xd-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
#xoDeep .xd-fallback{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% -10%,#1d7fb3 0%,#0a3f6e 35%,#04183a 70%,#020a1d 100%)}
#xoDeep.xd-gl .xd-fallback{display:none}

/* light shafts (soft, on top of the shader for extra depth) */
#xoDeep .xd-rays{position:absolute;inset:-10% 0 0;pointer-events:none;mix-blend-mode:screen;opacity:.55}
#xoDeep .xd-rays i{position:absolute;top:-10%;width:12vw;height:120%;left:var(--l);background:linear-gradient(180deg,rgba(170,240,255,.45),rgba(120,220,255,.08) 55%,transparent 80%);transform:skewX(-14deg);filter:blur(14px);animation:xdRay var(--d) ease-in-out infinite alternate}
#xoDeep .xd-rays i:nth-child(1){--l:8%;--d:7s}#xoDeep .xd-rays i:nth-child(2){--l:28%;--d:9s;width:7vw}#xoDeep .xd-rays i:nth-child(3){--l:52%;--d:8s;width:15vw}#xoDeep .xd-rays i:nth-child(4){--l:70%;--d:10s;width:6vw}#xoDeep .xd-rays i:nth-child(5){--l:86%;--d:6.5s;width:9vw}
@keyframes xdRay{0%{opacity:.25;transform:skewX(-14deg) translateX(-2vw)}100%{opacity:.9;transform:skewX(-10deg) translateX(2vw)}}

/* fish silhouettes */
#xoDeep .xd-fishes{position:absolute;inset:0;pointer-events:none}
#xoDeep .xd-fish{position:absolute;width:calc(90px * var(--s));fill:rgba(4,30,60,.55);animation:xdSwim linear infinite}
#xoDeep .xd-fish circle{fill:rgba(160,240,255,.5)}
#xoDeep .f1{top:22%;animation-duration:26s;animation-delay:-4s}
#xoDeep .f2{top:34%;animation-duration:32s;animation-delay:-18s;fill:rgba(4,30,60,.4)}
#xoDeep .f3{top:62%;animation-duration:38s;animation-delay:-9s;fill:rgba(4,30,60,.35)}
#xoDeep .f4{top:14%;animation-duration:29s;animation-delay:-22s;animation-direction:reverse;transform:scaleX(-1)}
@keyframes xdSwim{0%{left:-12%;margin-top:0}25%{margin-top:12px}50%{margin-top:-6px}75%{margin-top:10px}100%{left:112%;margin-top:0}}

/* kelp */
#xoDeep .xd-kelp{position:absolute;bottom:-2%;height:46vh;width:auto;pointer-events:none;fill:none;stroke-linecap:round;transform-origin:50% 100%;animation:xdKelp 6s ease-in-out infinite alternate}
#xoDeep .xd-kelp path{stroke:#0b4a4f;stroke-width:16;opacity:.85}
#xoDeep .xd-kelp path:nth-child(2){stroke:#0e5f5c;stroke-width:12}
#xoDeep .xd-kelp path:nth-child(3){stroke:#093c45;stroke-width:10}
#xoDeep .kl{left:-2vw}#xoDeep .kr{right:-2vw;transform:scaleX(-1);animation-delay:-3s}
@keyframes xdKelp{0%{rotate:-3deg}100%{rotate:3deg}}

/* rising bubbles */
#xoDeep .xd-bubbles{position:absolute;inset:0;pointer-events:none}
#xoDeep .xd-bubbles i{position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,.12) 22%,rgba(150,235,255,.08) 60%,rgba(200,250,255,.7) 92%,transparent 100%);box-shadow:0 0 10px rgba(120,230,255,.25);animation:xdRise var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes xdRise{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}50%{transform:translate(var(--w),-55vh) scale(1)}100%{transform:translate(calc(var(--w) * -1),-115vh) scale(1.15);opacity:0}}

/* top bar */
#xoDeep .xd-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(18px,env(safe-area-inset-top)) clamp(16px,3vw,34px) 0;z-index:5}
#xoDeep .xd-logo{display:block;height:30px}
#xoDeep .xd-logo svg,#xoDeep .xd-logo img{height:100%;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,30,60,.5))}
#xoDeep .xd-dim{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:rgba(6,40,74,.45);border:1px solid rgba(140,235,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:800 11.5px/1 Figtree,sans-serif;letter-spacing:.2em;color:#bff4ff;white-space:nowrap}
#xoDeep .xd-dim i{width:8px;height:8px;border-radius:50%;background:#5ff0ff;box-shadow:0 0 0 0 rgba(95,240,255,.7);animation:xdPing 1.6s ease-out infinite}
@keyframes xdPing{0%{box-shadow:0 0 0 0 rgba(95,240,255,.7)}100%{box-shadow:0 0 0 10px rgba(95,240,255,0)}}
#xoDeep .xd-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(160,240,255,.35);background:rgba(6,40,74,.45);color:#dffaff;font-size:16px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s}
#xoDeep .xd-x:hover{background:rgba(30,110,160,.6);transform:rotate(90deg)}

/* centre stage: Deek in a diving bubble */
#xoDeep .xd-stage{position:absolute;left:50%;top:38%;width:min(40vh,72vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
#xoDeep .xd-orbit{position:absolute;inset:0}
#xoDeep .xd-orbit i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(130,235,255,.32)}
#xoDeep .xd-orbit i:nth-child(1){inset:-6%;border-style:dashed;border-color:rgba(130,235,255,.22);animation:xdSpin 40s linear infinite}
#xoDeep .xd-orbit i:nth-child(2){inset:4%;border-color:transparent;border-top-color:rgba(120,240,255,.85);border-right-color:rgba(120,240,255,.25);filter:drop-shadow(0 0 6px rgba(80,220,255,.8));animation:xdSpin 5s linear infinite}
#xoDeep .xd-orbit i:nth-child(3){inset:13%;border-color:transparent;border-bottom-color:rgba(255,135,166,.85);border-left-color:rgba(255,135,166,.2);filter:drop-shadow(0 0 6px rgba(255,120,160,.7));animation:xdSpin 7s linear infinite reverse}
@keyframes xdSpin{to{rotate:360deg}}
#xoDeep .xd-deek{position:absolute;inset:16%}
#xoDeep .xd-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(120,220,255,.28),rgba(20,90,150,.22) 60%,rgba(140,235,255,.35) 100%);box-shadow:inset 0 0 0 2px rgba(200,250,255,.55),inset 0 -18px 40px rgba(0,30,70,.45),inset 0 14px 30px rgba(220,255,255,.25),0 0 60px rgba(60,200,255,.35),0 30px 60px rgba(0,10,30,.45);animation:xdBob 3.6s ease-in-out infinite}
#xoDeep .xd-orb img{position:absolute;left:50%;top:9%;height:96%;transform:translateX(-50%) rotate(-6deg);transform-origin:50% 60%;filter:drop-shadow(0 8px 14px rgba(0,20,50,.45));animation:xdPaddle 1.8s ease-in-out infinite}
#xoDeep .xd-shine{position:absolute;left:16%;top:9%;width:34%;height:20%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);transform:rotate(-28deg);filter:blur(1px)}
#xoDeep .xd-shine::after{content:"";position:absolute;right:-70%;top:250%;width:22%;height:40%;border-radius:50%;background:rgba(255,255,255,.55)}
@keyframes xdBob{0%,100%{transform:translateY(-3%) rotate(-3deg)}50%{transform:translateY(4%) rotate(3deg)}}
@keyframes xdPaddle{0%,100%{transform:translateX(-50%) rotate(-7deg) translateY(0)}50%{transform:translateX(-50%) rotate(4deg) translateY(-3%)}}
#xoDeep .xd-trail{position:absolute;left:50%;top:-6%;width:30%;height:30%;pointer-events:none}
#xoDeep .xd-trail i{position:absolute;bottom:0;left:50%;width:14px;height:14px;border-radius:50%;border:2px solid rgba(200,250,255,.75);background:rgba(200,250,255,.08);animation:xdTrail 2.4s ease-in infinite}
#xoDeep .xd-trail i:nth-child(2){animation-delay:.6s;width:9px;height:9px;margin-left:12px}#xoDeep .xd-trail i:nth-child(3){animation-delay:1.2s;width:11px;height:11px;margin-left:-14px}#xoDeep .xd-trail i:nth-child(4){animation-delay:1.8s;width:7px;height:7px;margin-left:6px}
@keyframes xdTrail{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-140%) translateX(10px) scale(1.1);opacity:0}}

/* title */
#xoDeep .xd-title{position:absolute;left:0;right:0;top:calc(38% + min(20vh,36vw) + 16px);text-align:center;z-index:4;padding:0 18px;perspective:600px}
#xoDeep .xd-eyebrow{font:800 11px/1 Figtree,sans-serif;letter-spacing:.28em;color:#8ee9ff;margin-bottom:10px}
#xoDeep h1{font:900 clamp(26px,4.6vw,54px)/1.04 Rubik,Figtree,sans-serif;letter-spacing:-.01em;color:#fff;text-shadow:0 4px 30px rgba(0,40,90,.6)}
#xoDeep .xd-w{display:inline-block;transform-origin:50% 100%}
#xoDeep .xd-hl{background:linear-gradient(100deg,#9ff6ff 0%,#4fd6ff 40%,#ff9fbb 75%,#9ff6ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xdSheen 5s linear infinite;text-shadow:none;filter:drop-shadow(0 4px 22px rgba(60,200,255,.45))}
@keyframes xdSheen{to{background-position:-220% 0}}
#xoDeep .xd-dots{color:#7fe9ff;margin-left:2px}
#xoDeep .xd-dots i{font-style:normal;display:inline-block;animation:xdDot 1.4s ease-in-out infinite}
#xoDeep .xd-dots i:nth-child(2){animation-delay:.2s}#xoDeep .xd-dots i:nth-child(3){animation-delay:.4s}
@keyframes xdDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}

/* footer: tip + progress */
#xoDeep .xd-foot{position:absolute;left:50%;bottom:max(64px,calc(env(safe-area-inset-bottom) + 58px));transform:translateX(-50%);width:min(620px,calc(100% - 36px));z-index:5;text-align:center}
#xoDeep .xd-tip{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-bottom:14px;font:700 clamp(14px,1.6vw,16.5px)/1.35 Figtree,sans-serif;color:#d9f8ff}
#xoDeep .xd-tipic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(80,210,255,.14);border:1px solid rgba(140,235,255,.3)}
#xoDeep .xd-tipic svg{width:15px;height:15px;fill:#7ff0ff;stroke:#7ff0ff;stroke-width:0}
#xoDeep.soon .xd-tipic svg{fill:none;stroke:#ffb3c8;stroke-width:2.2;stroke-linecap:round}
#xoDeep .xd-barhd{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 8px;font:800 11px/1 Figtree,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8ee9ff}
#xoDeep .xd-barhd .xd-pct{font:900 15px/1 Rubik,sans-serif;letter-spacing:.02em;color:#fff;font-style:normal;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(80,220,255,.6)}
#xoDeep .xd-tiptx{display:inline-block;max-width:520px;text-align:left}
#xoDeep .xd-bar{position:relative;height:14px;border-radius:999px;background:rgba(2,20,45,.6);border:1px solid rgba(140,235,255,.35);box-shadow:inset 0 2px 8px rgba(0,0,0,.45),0 0 24px rgba(40,180,255,.18);overflow:hidden}
#xoDeep .xd-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#1386d6,#2fd1ff 70%,#9ff7ff);box-shadow:0 0 18px rgba(60,220,255,.75);overflow:hidden;transition:width .12s linear}
#xoDeep .xd-wave{position:absolute;inset:0 -40px;background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 12px,rgba(255,255,255,.22) 12px 20px);animation:xdStripe 1.1s linear infinite}
@keyframes xdStripe{to{transform:translateX(40px)}}
#xoDeep .xd-glint{position:absolute;top:2px;left:6px;right:6px;height:3px;border-radius:4px;background:rgba(255,255,255,.55)}
#xoDeep .xd-hint{margin-top:12px;font:700 12px/1 Figtree,sans-serif;color:rgba(200,240,255,.6)}
#xoDeep kbd{display:inline-block;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;font:800 11px/1 Figtree,sans-serif;color:#fff;margin-right:4px}

/* coming soon */
#xoDeep .xd-soon{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:8;padding:20px;background:radial-gradient(60% 60% at 50% 50%,rgba(2,15,35,.25),rgba(2,10,25,.6))}
#xoDeep.soon .xd-soon{display:flex}
#xoDeep.soon .xd-foot .xd-hint{visibility:hidden}
#xoDeep.soon .xd-fill{background:linear-gradient(90deg,#1386d6,#2fd1ff 70%,#ffb3c8)}
#xoDeep.soon .xd-stage,#xoDeep.soon .xd-title{filter:blur(3px);opacity:.55;transition:filter .6s,opacity .6s}
#xoDeep .xd-card{position:relative;width:min(440px,100%);padding:30px 28px 26px;border-radius:26px;text-align:center;background:linear-gradient(160deg,rgba(18,86,140,.72),rgba(6,32,66,.82));border:1px solid rgba(150,240,255,.38);box-shadow:0 30px 80px rgba(0,8,25,.6),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#xoDeep .xd-lock{width:62px;height:62px;margin:-62px auto 14px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#2fd1ff,#1268b8);box-shadow:0 10px 30px rgba(40,180,255,.55),inset 0 2px 0 rgba(255,255,255,.4);border:3px solid #062a4f}
#xoDeep .xd-lock svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
#xoDeep .xd-card .xd-eyebrow{color:#ffb3c8}
#xoDeep .xd-card h2{font:900 clamp(24px,2.8vw,30px)/1.08 Rubik,sans-serif;text-wrap:balance;color:#fff;margin-bottom:10px}
#xoDeep .xd-card p{font:700 15px/1.5 Figtree,sans-serif;color:#cdeefa;margin-bottom:22px}
#xoDeep .xd-back{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:#FF87A6;color:#1f1d2b;font:900 16px/1 Figtree,sans-serif;box-shadow:0 6px 0 #c9587a,0 14px 30px rgba(255,120,160,.35);transition:transform .15s,box-shadow .15s}
#xoDeep .xd-back:hover,#xoDeep .xd-back:focus-visible{transform:translateY(-2px);box-shadow:0 8px 0 #c9587a,0 18px 36px rgba(255,120,160,.45);outline:none}
#xoDeep .xd-back:active{transform:translateY(4px);box-shadow:0 2px 0 #c9587a}
#xoDeep .xd-back kbd{background:rgba(31,29,43,.12);border-color:rgba(31,29,43,.25);color:#1f1d2b;margin:0}

/* waves along the bottom */
#xoDeep .xd-waves{position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;z-index:2;overflow:hidden}
#xoDeep .xd-waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
#xoDeep .xd-waves .w1{fill:rgba(3,20,45,.55);animation:xdWave 14s linear infinite}
#xoDeep .xd-waves .w2{fill:rgba(2,12,30,.8);animation:xdWave 9s linear infinite reverse;height:75%}
@keyframes xdWave{to{transform:translateX(-50%)}}

#xoDeep .xd-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,6,20,.6) 100%);z-index:6}
#xoDeep .xd-grain{position:absolute;inset:-50%;pointer-events:none;z-index:7;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:xdGrain .6s steps(4) infinite}
@keyframes xdGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
#xoDeep .xd-flash{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;pointer-events:none;z-index:9;opacity:0;background:radial-gradient(circle,rgba(230,255,255,1) 0%,rgba(120,230,255,.75) 25%,rgba(30,140,220,0) 60%)}

/* small screens */
#xoDeep .xd-tc{display:none}
@media (pointer:coarse){ #xoDeep .xd-kb{display:none} #xoDeep .xd-tc{display:inline} #xoDeep .xd-back kbd{display:none} }
@media (max-height:640px) and (min-width:601px){ #xoDeep .xd-stage{top:35%;width:34vh} #xoDeep .xd-title{top:calc(35% + 17vh + 12px)} #xoDeep h1{font-size:clamp(24px,3.6vw,40px)} #xoDeep .xd-foot{bottom:44px} }
@media (max-width:600px){
  #xoDeep .xd-logo{height:22px}
  #xoDeep .xd-dim{font-size:9.5px;letter-spacing:.14em;padding:7px 10px}
  #xoDeep .xd-dim i{width:6px;height:6px}
  #xoDeep .xd-x{width:36px;height:36px}
  #xoDeep .xd-stage{top:36%;width:min(64vw,38vh)}
  #xoDeep .xd-title{top:calc(36% + min(32vw,19vh) + 12px)}
  #xoDeep .xd-eyebrow{font-size:10px}
  #xoDeep .xd-kelp{height:28vh;opacity:.8}
  #xoDeep .xd-tip{align-items:flex-start;font-size:14px}
  #xoDeep .xd-card{padding:28px 20px 22px}
  #xoDeep .xd-card p{font-size:14px}
}
@media (max-width:420px){ #xoDeep .xd-dim{display:none} }
@media (prefers-reduced-motion:reduce){ #xoDeep *{animation-duration:0s!important} }