/* ═══════════════════════════════════════════════════════════════════ OWLMARK STUDIO — LOADING CURTAIN Linked in so it paints before anything else. Matches the Certificate Studio boot curtain, so all three pages open the same way. ═══════════════════════════════════════════════════════════════════ */ #okSplash{ position:fixed; inset:0; z-index:99999; background:radial-gradient(1100px 700px at 50% 42%, #17233D 0%, #101A2D 55%, #080D18 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; font-family:'Manrope','Nunito',system-ui,-apple-system,sans-serif; transition:opacity .75s cubic-bezier(.4,0,.2,1), visibility .75s; } #okSplash.done{opacity:0;visibility:hidden;pointer-events:none} /* a slow gold sweep, like light passing over foil */ #okSplash::before{ content:""; position:absolute; inset:-40%; background:linear-gradient(105deg, transparent 42%, rgba(232,201,120,.10) 50%, transparent 58%); animation:okSweep 3.6s ease-in-out infinite; } @keyframes okSweep{0%{transform:translateX(-38%)}50%{transform:translateX(38%)}100%{transform:translateX(-38%)}} #okSplash .oks-mote{ position:absolute; border-radius:50%; background:rgba(232,201,120,.55); animation:okDrift var(--d) linear var(--dl) infinite; opacity:0; } @keyframes okDrift{ 0%{transform:translateY(0) scale(.6);opacity:0} 15%{opacity:.8} 85%{opacity:.5} 100%{transform:translateY(-190px) scale(1.15);opacity:0} } #okSplash .oks-crest{ position:relative; width:190px; height:190px; display:grid; place-items:center; animation:okCrest 1.5s cubic-bezier(.16,1,.3,1) both; } @keyframes okCrest{ 0%{opacity:0;transform:scale(.62) translateY(26px);filter:blur(9px)} 60%{filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)} } #okSplash .oks-crest img{ width:150px;height:150px;position:relative;z-index:2; filter:drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #okSplash .oks-crest::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(232,201,120,.30), transparent 62%); animation:okHalo 2.6s ease-in-out .5s infinite; } @keyframes okHalo{0%,100%{transform:scale(.86);opacity:.45}50%{transform:scale(1.1);opacity:.85}} #okSplash .oks-ring{position:absolute;inset:0;z-index:3;animation:okSpin 14s linear infinite} #okSplash .oks-ring circle{fill:none;stroke:rgba(232,201,120,.75);stroke-width:1.4;stroke-dasharray:1 5;stroke-linecap:round} @keyframes okSpin{to{transform:rotate(360deg)}} #okSplash .oks-word{margin-top:22px;text-align:center;animation:okRise .9s cubic-bezier(.16,1,.3,1) .55s both} #okSplash .oks-word b{display:block;font-size:32px;font-weight:800;letter-spacing:.5px;color:#F4ECD8;text-shadow:0 3px 22px rgba(0,0,0,.55)} #okSplash .oks-word i{display:block;margin-top:7px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:4.5px;text-transform:uppercase;color:rgba(232,201,120,.72)} @keyframes okRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} #okSplash .oks-rule{ width:0;height:1px;margin:20px 0 18px; background:linear-gradient(90deg,transparent,rgba(232,201,120,.75),transparent); animation:okRule 1s cubic-bezier(.16,1,.3,1) .95s forwards; } @keyframes okRule{to{width:250px}} #okSplash .oks-bar{ width:230px;height:3px;border-radius:99px;overflow:hidden; background:rgba(232,201,120,.14); animation:okRise .6s ease 1.05s both; } #okSplash .oks-bar span{ display:block;height:100%;width:8%;border-radius:99px; background:linear-gradient(90deg,#C99A3D,#E8C978); transition:width .5s cubic-bezier(.4,0,.2,1); } #okSplash .oks-status{ margin-top:14px;font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase; color:rgba(250,247,239,.5); animation:okRise .6s ease 1.15s both; } html[dir="rtl"] #okSplash .oks-word i, html[dir="rtl"] #okSplash .oks-status{letter-spacing:.5px} @media (prefers-reduced-motion: reduce){ #okSplash::before,#okSplash .oks-ring,#okSplash .oks-crest::after,#okSplash .oks-mote{animation:none!important} #okSplash .oks-crest,#okSplash .oks-word,#okSplash .oks-rule,#okSplash .oks-bar,#okSplash .oks-status{animation:none!important;opacity:1;transform:none} #okSplash .oks-rule{width:250px} } @media print{#okSplash{display:none!important}}