/* ── HM Preloader Pro – Frontend ── */
#hm-preloader-pro {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--hm-dur, 500ms) ease, visibility var(--hm-dur, 500ms) ease;
}

#hm-preloader-pro.hm-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hm-pre-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

#hm-pre-logo {
    display: block;
    height: auto;
}

/* ── Logo entry animations ── */
.hm-anim-fade-scale     { animation: hmFadeScale    .7s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-fade-slide-up  { animation: hmFadeSlideUp  .7s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-fade-slide-down{ animation: hmFadeSlideDown .7s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-zoom-in        { animation: hmZoomIn       .7s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-flip           { animation: hmFlip         .8s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-bounce         { animation: hmBounce       .9s cubic-bezier(.36,.07,.19,.97) both; }
.hm-anim-rotate-in      { animation: hmRotateIn     .8s cubic-bezier(.22,1,.36,1) both; }
.hm-anim-glitch         { animation: hmGlitch       .8s steps(1) both; }

@keyframes hmFadeScale    { from{opacity:0;transform:scale(.6)}  to{opacity:1;transform:scale(1)} }
@keyframes hmFadeSlideUp  { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes hmFadeSlideDown{ from{opacity:0;transform:translateY(-50px)} to{opacity:1;transform:translateY(0)} }
@keyframes hmZoomIn       { from{opacity:0;transform:scale(1.5)} to{opacity:1;transform:scale(1)} }
@keyframes hmFlip         { from{opacity:0;transform:perspective(600px) rotateY(90deg)} to{opacity:1;transform:perspective(600px) rotateY(0)} }
@keyframes hmBounce       { 0%{opacity:0;transform:scale(.3)} 50%{transform:scale(1.12)} 70%{transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
@keyframes hmRotateIn     { from{opacity:0;transform:rotate(-200deg) scale(.5)} to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes hmGlitch       {
    0%  {opacity:0;clip-path:inset(40% 0 60% 0);transform:skewX(-15deg)}
    15% {opacity:1;clip-path:inset(5%  0 85% 0);transform:skewX(10deg)}
    30% {clip-path:inset(70% 0 5%  0);transform:skewX(-5deg)}
    45% {clip-path:inset(25% 0 50% 0);transform:skewX(3deg)}
    60% {clip-path:inset(0);transform:skewX(0)}
    100%{opacity:1;clip-path:inset(0);transform:none}
}

/* ── Spinners ── */

/* Dots */
.hm-s-dots { display:flex; gap:10px; }
.hm-s-dots span { width:10px; height:10px; border-radius:50%; display:block; animation:hmDotBounce 1.3s ease-in-out infinite; }
.hm-s-dots span:nth-child(2){animation-delay:.22s}
.hm-s-dots span:nth-child(3){animation-delay:.44s}
@keyframes hmDotBounce { 0%,80%,100%{transform:translateY(0);opacity:.35} 40%{transform:translateY(-13px);opacity:1} }

/* Ring */
.hm-s-ring { width:36px; height:36px; border-radius:50%; border:4px solid; animation:hmRingSpin 1s linear infinite; }
@keyframes hmRingSpin { to{transform:rotate(360deg)} }

/* Bar */
.hm-s-bar { width:200px; height:4px; background:rgba(0,0,0,.12); border-radius:4px; overflow:hidden; }
.hm-s-bar-inner { height:100%; width:45%; border-radius:4px; animation:hmBarSlide 1.3s ease-in-out infinite; }
@keyframes hmBarSlide { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }

/* Pulse */
.hm-s-pulse { width:30px; height:30px; border-radius:50%; animation:hmPulse 1.3s ease-in-out infinite; }
@keyframes hmPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.3} }