/* OraKnight Welcome Loader 1.1 — GPU-only transforms, square design */
.okl{--okl-navy:#041a2e;--okl-gold:var(--okl-accent,#d9a441);--okl-w:min(540px,80vw);--okl-h:calc(var(--okl-w)*.7696);--okl-ps:.46;--okl-py:-118px;
direction:ltr;position:fixed;inset:0;z-index:2147483647;overflow:hidden;color:var(--okl-navy);font-family:"Segoe UI",Tahoma,"Helvetica Neue",Arial,sans-serif;line-height:1.3;
background:var(--okl-bg,#fbf8f1);transition:transform .7s cubic-bezier(.76,0,.24,1);will-change:transform}
.okl,.okl *,.okl *::before,.okl *::after{box-sizing:border-box;border-radius:0!important}
.okl img{max-width:none!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;background:none!important}
.okl.is-closing{transform:translate3d(0,-101%,0);pointer-events:none;box-shadow:0 4px 0 var(--okl-gold)}

/* background */
.okl-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.okl-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#fff 0%,rgba(255,255,255,0) 55%),radial-gradient(ellipse at 50% 120%,rgba(217,164,65,.22),transparent 60%),linear-gradient(180deg,transparent 60%,rgba(4,26,46,.05))}
.okl-dots{position:absolute;inset:0;background-image:linear-gradient(rgba(4,26,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(4,26,46,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 72%)}
.okl-spark{position:absolute;width:5px;height:5px;background:var(--okl-gold);opacity:0;transform:translate3d(0,0,0) rotate(45deg);animation:okl-spark 7s ease-in-out infinite}
.okl-spark.s1{left:12%;top:78%;animation-delay:.2s}.okl-spark.s2{left:24%;top:88%;animation-delay:1.6s;width:3px;height:3px}.okl-spark.s3{left:38%;top:82%;animation-delay:3s}
.okl-spark.s4{left:52%;top:92%;animation-delay:.9s;width:3px;height:3px}.okl-spark.s5{left:66%;top:84%;animation-delay:2.4s}.okl-spark.s6{left:78%;top:90%;animation-delay:4s;width:3px;height:3px}
.okl-spark.s7{left:88%;top:80%;animation-delay:1.2s}.okl-spark.s8{left:6%;top:92%;animation-delay:3.6s;width:3px;height:3px}
@keyframes okl-spark{0%{opacity:0;transform:translate3d(0,0,0) rotate(45deg)}15%{opacity:.9}70%{opacity:.5}100%{opacity:0;transform:translate3d(18px,-62vh,0) rotate(225deg)}}

/* stage: fixed size, centered; only transform changes */
.okl-stage{position:absolute;left:50%;top:50%;width:var(--okl-w);height:var(--okl-h);transform:translate3d(-50%,-50%,0) scale(1);transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.65,0,.2,1);will-change:transform;backface-visibility:hidden}
.okl.is-picking .okl-stage{transform:translate3d(-50%,calc(-50% + var(--okl-py)),0) scale(var(--okl-ps))}
.okl-glow{position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;margin:0;transform:translate3d(-50%,-50%,0);background:radial-gradient(circle,rgba(217,164,65,.30),rgba(217,164,65,0) 62%);opacity:0;animation:okl-fade 2.2s ease .4s forwards}
.okl-logo{position:absolute;inset:0}
.okl .okl-layer{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* corner frame draws in */
.okl-frame{position:absolute;inset:-9% -7%;pointer-events:none}
.okl-frame i{position:absolute;width:9%;aspect-ratio:1;border:0 solid var(--okl-gold);opacity:0;animation:okl-fade .6s ease 2.7s forwards}
.okl-frame .tl{left:0;top:0;border-width:3px 0 0 3px;transform-origin:0 0}.okl-frame .tr{right:0;top:0;border-width:3px 3px 0 0;transform-origin:100% 0}
.okl-frame .bl{left:0;bottom:0;border-width:0 0 3px 3px;transform-origin:0 100%}.okl-frame .br{right:0;bottom:0;border-width:0 3px 3px 0;transform-origin:100% 100%}
.okl-frame i{animation:okl-bracket .8s cubic-bezier(.22,.8,.2,1) 2.7s both}
@keyframes okl-bracket{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* logo animation (each layer same size = perfect alignment) */
@keyframes okl-fade{to{opacity:1}}
@keyframes okl-rise{from{clip-path:inset(100% 0 0 0);opacity:0;transform:translate3d(0,26px,0) scale(.94)}35%{opacity:1}to{clip-path:inset(0 0 0 0);opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes okl-gold{from{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:0}8%{opacity:1}to{clip-path:polygon(0 0,230% 0,130% 100%,0 100%);opacity:1}}
@keyframes okl-wipe{from{clip-path:inset(0 100% 0 0);opacity:0;transform:translate3d(-22px,0,0)}20%{opacity:1}to{clip-path:inset(0 0 0 0);opacity:1;transform:translate3d(0,0,0)}}
@keyframes okl-expand{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
.l-icon-navy{animation:okl-rise 1.2s cubic-bezier(.22,.8,.2,1) .3s both}
.l-icon-gold{animation:okl-gold 1.25s cubic-bezier(.5,.05,.25,1) 1s both}
.l-word-navy,.l-word-gold{animation:okl-wipe 1s cubic-bezier(.22,.8,.2,1) 1.8s both}
.l-dental{animation:okl-expand .9s cubic-bezier(.22,.8,.2,1) 2.55s both}

/* shine: gradient strip moves via transform, masked by the logo */
.okl-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(logo-full.png) 0 0/100% 100% no-repeat;mask:url(logo-full.png) 0 0/100% 100% no-repeat}
.okl-shine i{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:translate3d(-140%,0,0) skewX(-18deg);animation:okl-shine 1.3s ease-in-out 3.25s 1 both,okl-shine 1.3s ease-in-out 9s infinite}
@keyframes okl-shine{from{transform:translate3d(-140%,0,0) skewX(-18deg)}to{transform:translate3d(420%,0,0) skewX(-18deg)}}

/* progress */
.okl-progress{position:absolute;left:50%;top:calc(50% + var(--okl-h)/2 + 64px);width:min(260px,58vw);height:2px;margin-left:calc(min(260px,58vw)/-2);background:rgba(4,26,46,.12);overflow:hidden;opacity:0;animation:okl-fade .6s ease 1s forwards;transition:opacity .5s ease}
.okl-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--okl-gold),#f3cf85,var(--okl-gold));background-size:200% 100%;animation:okl-bar 1.3s linear infinite}
.okl.is-picking .okl-progress{opacity:0!important;animation:none}
@keyframes okl-bar{to{background-position:-200% 0}}

/* picker */
.okl-picker{position:absolute;left:50%;top:calc(50% + 26px);width:min(640px,92vw);transform:translate3d(-50%,30px,0);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease .5s,transform .8s cubic-bezier(.22,.8,.2,1) .5s,visibility 0s linear .9s}
.okl.is-picking .okl-picker{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(-50%,0,0);transition:opacity .8s ease .6s,transform .9s cubic-bezier(.22,.8,.2,1) .6s,visibility 0s}
.okl-rule{width:0;height:2px;margin:0 auto 16px;background:var(--okl-gold);transition:width .9s cubic-bezier(.22,.8,.2,1) .8s}
.okl.is-picking .okl-rule{width:64px}
.okl .okl-title{margin:0 0 20px;padding:0;font-size:14px;font-weight:600;letter-spacing:.04em;line-height:1.9;text-transform:none;color:rgba(4,26,46,.8)}
.okl-title b{color:var(--okl-gold);margin:0 10px;font-weight:400}
.okl-title span{display:inline-block}
.okl-langs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.okl .okl-lang{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:112px;margin:0;padding:26px 10px 16px;border:1px solid rgba(4,26,46,.2);background:rgba(255,255,255,.6);color:var(--okl-navy);font:inherit;text-transform:none;letter-spacing:normal;text-shadow:none;box-shadow:none;cursor:pointer;overflow:hidden;opacity:0;transform:translate3d(0,16px,0);transition:transform .35s cubic-bezier(.22,.8,.2,1),border-color .3s,background .3s,color .3s,box-shadow .35s}
.okl.is-picking .okl-lang{animation:okl-card .7s cubic-bezier(.22,.8,.2,1) both}
.okl.is-picking .okl-lang:nth-child(1){animation-delay:1s}.okl.is-picking .okl-lang:nth-child(2){animation-delay:1.14s}.okl.is-picking .okl-lang:nth-child(3){animation-delay:1.28s}
@keyframes okl-card{to{opacity:1;transform:translate3d(0,0,0)}}
.okl-lang::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--okl-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,.8,.2,1)}
.okl-lang:hover::before,.okl-lang:focus-visible::before,.okl-lang.is-suggested::before{transform:scaleX(1)}
.okl .okl-lang:hover,.okl .okl-lang:focus-visible{transform:translate3d(0,-5px,0);border-color:var(--okl-navy);background:#fff;box-shadow:0 18px 30px -16px rgba(4,26,46,.4);outline:none;color:var(--okl-navy)}
.okl .okl-lang.is-chosen{background:var(--okl-navy);border-color:var(--okl-navy);color:#fff;transform:translate3d(0,-3px,0)}
.okl-lang.is-chosen .okl-sub,.okl-lang.is-chosen .okl-idx{color:rgba(255,255,255,.7)}
.okl.is-leaving .okl-lang:not(.is-chosen){opacity:.35!important;transition:opacity .4s}
.okl-idx{position:absolute;left:10px;top:9px;font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(4,26,46,.4)}
.okl-name{font-size:22px;font-weight:700;line-height:1.3}
.okl-sub{font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(4,26,46,.55)}

.okl .okl-close{display:none;position:absolute;top:16px;right:18px;z-index:3;width:42px;height:42px;padding:0;border:1px solid rgba(4,26,46,.25);background:transparent;color:var(--okl-navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:none}
.okl.is-static .okl-close{display:block}

/* static: reopen / translation veil */
.okl.is-static .okl-layer,.okl.is-static .okl-glow,.okl.is-static .okl-frame i{animation:none!important;clip-path:none!important;opacity:1;transform:none}
.okl.is-static .okl-glow{transform:translate3d(-50%,-50%,0)}
.okl.is-static .okl-shine i{animation:none}
.okl.is-static .okl-progress{opacity:1;animation:none}
.okl.is-veil .okl-picker,.okl.is-veil .okl-close{display:none}
.okl.is-veil .okl-progress i{width:100%!important}
.okl.is-veil .okl-stage{transform:translate3d(-50%,-50%,0) scale(.7)}
.okl.is-veil .okl-progress{top:calc(50% + var(--okl-h)*.35 + 40px)}

.okl-switcher a{margin:0 .4em;text-decoration:none;font-weight:600}

@media (max-width:560px){.okl{--okl-ps:.56;--okl-py:-105px}.okl-title b{display:none}.okl-title span{display:block}.okl-langs{gap:8px}.okl .okl-lang{min-height:96px;padding:24px 4px 12px}.okl-name{font-size:18px}.okl-idx{left:7px;top:7px}}
@media (max-height:600px){.okl{--okl-ps:.34;--okl-py:-26vh}.okl-title{margin-bottom:10px!important}.okl .okl-lang{min-height:78px;padding-top:20px}.okl-picker{top:calc(50% - 4px)}}
