html:has(body.oko-active) { overflow: hidden; background: #0b0910; }
body.oko-active { overflow: hidden; }
.oko-source { visibility: hidden; }
.oko-scene { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: #eee; isolation: isolate; }
.oko-scene::backdrop { background: transparent; }
.oko-darkness { position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 50%,#090a1208 15%,#090a1299 65%,#07060bed 100%); opacity: 0; transition: opacity 1.5s; }
.oko-scene.is-ready .oko-darkness { opacity: .65; }
.oko-scene.is-revealed .oko-darkness { opacity: 1; background-color: #090813a0; }
.oko-stage { position: absolute; isolation: isolate; transform-origin: 60% 60%; }
.oko-card { position: absolute; inset: 0; z-index: 2; transform-origin: 85% 55%; transition: transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s; }
.oko-card > .login-wheel-slide { width: 100%; height: 100%; min-height: 0; margin: 0; box-sizing: border-box; opacity: 1; transform: none; translate: none; }
.oko-stage img { user-select: none; pointer-events: none; }
/* The mask stays in the card's coordinate system throughout the reveal and
   impact. The torso can never expose its straight lower crop below the card. */
.oko-body-mask { position: absolute; z-index: 1; inset: -60% -60% 0; overflow: hidden; mask-image: linear-gradient(to bottom,#000 calc(100% - 110px),rgba(0,0,0,.9) calc(100% - 85px),rgba(0,0,0,.5) calc(100% - 58px),transparent calc(100% - 28px)); }
.oko-body-anchor { position: absolute; left: 27.272727%; top: 37.5%; width: 45.454545%; height: 62.5%; }
.oko-character { position: absolute; z-index: 1; width: 57%; max-width: none; height: 113%; object-fit: contain; object-position: bottom; right: 0; bottom: 0; opacity: 0; transform: translate(-16%,10%) rotate(-9deg); transform-origin: 55% 85%; transition: transform 1.25s cubic-bezier(.15,.8,.23,1),opacity .3s,filter .4s; filter: brightness(.7) drop-shadow(0 0 24px #0008); }
.oko-grip { position: absolute; z-index: 3; right: -11%; top: 41%; width: 27%; opacity: 0; transform: translate(16%,22%) rotate(14deg) scale(.8); transform-origin: 78% 65%; transition: transform .8s cubic-bezier(.12,.85,.2,1),opacity .3s; filter: brightness(.82) drop-shadow(-2px 5px 17px #00000026); }
.is-gripping .oko-grip { opacity: 1; transform: none; }
.is-gripping .oko-card { transform: translateX(-1%) rotate(-.6deg); }
.is-revealed .oko-card { transform: translateX(-13%) rotate(-2deg); filter: brightness(.72) saturate(.65); }
.is-revealed .oko-character { opacity: 1; transform: translate(24%,-4%) rotate(2deg); }
.is-revealed .oko-grip { transform: translate(-43%,0) rotate(-3deg); }
.oko-reach { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(.08); transform-origin: 50% 50%; }
.oko-reach img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(108vw,165vh); max-width: none; height: auto; filter: brightness(1.3) drop-shadow(-8px 0 18px #63233655) drop-shadow(8px 0 22px #294c6355); }
.is-impact .oko-reach { animation: oko-lunge .85s cubic-bezier(.12,.8,.16,1) both; }
.is-impact .oko-darkness { background: radial-gradient(ellipse at center,#191319e6 0%,#09070bf5 55%,#020203 100%); transition: background .16s; }
.is-impact .oko-stage { opacity: 0; transition: opacity .28s .12s; }
.is-impact .oko-stage { animation: oko-break .85s cubic-bezier(.2,.7,.2,1) both; }
body.oko-impact #network-main,body.oko-impact .network-topbar { animation: oko-shake .42s linear 2; }
.oko-scene.is-impact .oko-reach { animation: oko-lunge .85s cubic-bezier(.12,.8,.16,1) both,oko-shake .42s linear 2; }
.oko-close { position: absolute; z-index: 10; right: max(20px,env(safe-area-inset-right)); top: max(20px,env(safe-area-inset-top)); width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: #16131ece; border: 1px solid #ffffff45; border-radius: 50%; cursor: pointer; }
.oko-close:hover { background: #40323e; }
.oko-close:focus-visible { outline: 2px solid #e0bcc9; outline-offset: 4px; }
.oko-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.oko-whisper { position: absolute; z-index: 7; bottom: max(32px,env(safe-area-inset-bottom)); left: 16px; right: 16px; text-align: center; margin: 0; font-size: clamp(14px,2vw,21px); letter-spacing: .3em; text-transform: uppercase; color: #f2d8d8; opacity: 0; transform: translateY(12px); transition: opacity 1s,transform 1s; text-shadow: 0 2px 12px #000; }
.is-finished .oko-whisper { opacity: 1; transform: none; }
.oko-scene.is-finished .oko-reach { opacity: 1; animation: none; transform: scale(1.04); transition: transform 1.8s ease-out; }
.is-finished .oko-reach img { animation: oko-breathe 5s ease-in-out infinite; }
.is-finished .oko-stage { animation: none; transform: scale(1.04); transition: transform .7s; }
@keyframes oko-lunge { 0%{opacity:0;transform:scale(.08) rotate(-8deg);clip-path:ellipse(50% 4% at 50% 50%)} 12%{opacity:1;clip-path:ellipse(50% 18% at 50% 50%)} 48%{transform:scale(1.22) rotate(2deg);clip-path:ellipse(80% 80% at 50% 50%)} 72%{transform:scale(1.04) rotate(-1deg)} 100%{opacity:1;transform:scale(1.1);clip-path:ellipse(80% 80% at 50% 50%)} }
@keyframes oko-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes oko-break { 0%{transform:scale(1)} 25%{transform:translate(-22px,12px) rotate(-3deg) scale(1.13);filter:drop-shadow(9px 0 0 #9f294477)} 60%,100%{transform:translate(10px,-5px) rotate(2deg) scale(1.25);filter:drop-shadow(-5px 0 0 #29659f55)} }
@keyframes oko-shake { 0%,100%{translate:0 0} 12%{translate:-22px 12px} 26%{translate:19px -14px} 42%{translate:-9px -3px} 58%{translate:20px 13px} 74%{translate:-7px 5px} 88%{translate:5px -6px} }
@media(max-width:680px) {
  .oko-character { width: 100%; height: 110%; right: -4%; bottom: 3%; }
  .is-revealed .oko-card { transform: translateX(-31%) rotate(-4deg); }
  .is-revealed .oko-character { transform: translate(8%,-22%) rotate(3deg); }
  .oko-grip { width: 42%; right: -12%; top: 40%; }
  .is-revealed .oko-grip { transform: translate(-76%,0) rotate(-5deg); }
  .oko-whisper { bottom: 24px; }
}
.oko-scene.is-reduced *, .oko-scene.is-reduced { animation: none !important; transition: none !important; }
@media(prefers-reduced-motion:reduce) { .oko-scene *, .oko-scene,body.oko-impact #network-main,body.oko-impact .network-topbar { animation: none !important; transition: none !important; } }

/* The eyelid shuts before the page underneath inherits the interference. */
.oko-scene.is-closing .oko-reach { clip-path: ellipse(55% 0% at 50% 50%); opacity: 0; transition: clip-path .7s cubic-bezier(.55,.02,.85,.4),opacity .2s .65s; }
.oko-scene.is-closing .oko-whisper { opacity: 0; transition: opacity .4s; }
.oko-scene.is-closing .oko-darkness { opacity: 0; transition: opacity .35s .65s; }
.oko-scene.is-finished .oko-reach { clip-path: ellipse(80% 80% at 50% 50%); }
.oko-scene.is-finished.is-closing .oko-reach { clip-path: ellipse(55% 0% at 50% 50%); }

/* Nothing changes until the pointer disturbs an element. */
.oko-corrupted .login-slide-art img { pointer-events: auto; }
.oko-warp-word { display: inline-block; white-space: nowrap; }
.oko-warp-letter { display: inline-block; transform: translateY(var(--letter-y,0px)) rotate(var(--letter-turn,0deg)) skewX(var(--letter-skew,0deg)) scaleX(var(--letter-scale,1)); transition: transform .24s cubic-bezier(.2,.8,.25,1); }
.oko-dodging { translate: var(--dodge-x,0px) var(--dodge-y,0px); transition: translate .2s cubic-bezier(.12,.82,.2,1); }
.oko-fallen { transform-origin: 50% 80%; animation: oko-fall .95s both; }
@keyframes oko-fall {
  0% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(.55,0,1,.65); }
  62% { translate: 0 var(--fall-y); rotate: var(--fall-turn); animation-timing-function: ease-out; }
  79% { translate: 0 calc(var(--fall-y) * .78); rotate: calc(var(--fall-turn) * .7); animation-timing-function: ease-in; }
  100% { translate: 0 var(--fall-y); rotate: var(--fall-turn); }
}
@media(prefers-reduced-motion:reduce) {
  .oko-warp-letter,.oko-dodging,.oko-scene.is-closing * { transition: none !important; }
  .oko-fallen { animation: none; rotate: var(--fall-turn); }
}