/* Preloader — hyena mark only. Shown once per session (class set in ). */ #preloader { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: #010107; transition: opacity .7s cubic-bezier(.2,.7,.2,1), visibility .7s; } .th-preload #preloader { display: flex; } .th-preload body { overflow: hidden; } #preloader.done { opacity: 0; visibility: hidden; } #preloader::before { content: ''; position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(195,144,75,.14), transparent 68%); animation: pl-breathe 2.4s ease-in-out infinite; } .pl-stage { position: relative; width: min(220px, 46vw); } .pl-mark { display: block; width: 100%; height: auto; clip-path: inset(100% 0 0 0); animation: pl-reveal 1.8s cubic-bezier(.2,.7,.2,1) .2s forwards, pl-growl 1.8s ease-in-out 2s infinite; transform-origin: 70% 60%; } .pl-ghost { position: absolute; inset: 0; opacity: .0; filter: blur(14px) brightness(1.6); mix-blend-mode: screen; animation: pl-flash 1.8s ease-in-out 2s infinite; } .pl-ring { position: absolute; left: 91%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); opacity: 0; animation: pl-wave 1.8s ease-out 2.05s infinite; } .pl-ring:nth-of-type(2) { animation-delay: 2.3s; } .pl-ring:nth-of-type(3) { animation-delay: 2.55s; } .pl-bar { position: absolute; left: 50%; bottom: -34px; width: 90px; height: 2px; margin-left: -45px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; } .pl-bar::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #f1ca7c, transparent); animation: pl-slide 1.1s ease-in-out infinite; } @keyframes pl-reveal { to { clip-path: inset(0 0 0 0); } } @keyframes pl-growl { 0%,100% { transform: scale(1) rotate(0); } 12% { transform: scale(1.05) rotate(-1.4deg); } 22% { transform: scale(1.07) rotate(1.2deg); } 32% { transform: scale(1.05) rotate(-1deg); } 44% { transform: scale(1.03) rotate(.6deg); } 60% { transform: scale(1) rotate(0); } } @keyframes pl-flash { 0%,100% { opacity: 0; } 20%,34% { opacity: .35; } } @keyframes pl-wave { 0% { opacity: .7; transform: scale(.3); } 100% { opacity: 0; transform: scale(4.2); } } @keyframes pl-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @keyframes pl-breathe { 0%,100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }