/* ============================================================
   PRELOADER SYSTEM — CSS
   Usage: Add class="preloader" to your Elementor container
          Add class="enter-btn" to your button (optional)
   ============================================================ */

/* ─── FORCE PRELOADER TO COVER FULL SCREEN ──────────────────── */
.preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  overflow: hidden !important;

  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prevent page scroll while preloader is visible */
body.preloader-active {
  overflow: hidden !important;
}

/* ─── ENTER BUTTON — keep pointer events working ────────────── */
.enter-btn {
  cursor: pointer;
  pointer-events: all !important;
  position: relative;
  z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   EXIT ANIMATION EFFECTS
   The JS adds .is-hiding + the chosen effect class to trigger exit
   ══════════════════════════════════════════════════════════════ */

/* ── 1. blur-scale ──────────────────────────────────────────── */
.preloader.effect-blur-scale.is-hiding {
  animation: exit-blur-scale 0.85s cubic-bezier(0.77,0,0.18,1) forwards;
}
@keyframes exit-blur-scale {
  0%   { opacity: 1; filter: blur(0px);  transform: scale(1); }
  60%  { opacity: 0.6; filter: blur(8px); transform: scale(1.08); }
  100% { opacity: 0; filter: blur(20px); transform: scale(1.18); }
}

/* ── 2. slide-up ─────────────────────────────────────────────── */
.preloader.effect-slide-up.is-hiding {
  animation: exit-slide-up 0.85s cubic-bezier(0.77,0,0.18,1) forwards;
}
@keyframes exit-slide-up {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-102%); opacity: 0.8; }
}

/* ── 3. zoom-out ─────────────────────────────────────────────── */
.preloader.effect-zoom-out.is-hiding {
  animation: exit-zoom-out 0.85s cubic-bezier(0.77,0,0.18,1) forwards;
}
@keyframes exit-zoom-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ── 4. rotate-fade ──────────────────────────────────────────── */
.preloader.effect-rotate-fade.is-hiding {
  animation: exit-rotate-fade 0.85s cubic-bezier(0.77,0,0.18,1) forwards;
}
@keyframes exit-rotate-fade {
  0%   { transform: rotate(0) scale(1); opacity: 1; }
  100% { transform: rotate(-8deg) scale(0.9); opacity: 0; }
}

/* ── 5. glitch ───────────────────────────────────────────────── */
.preloader.effect-glitch.is-hiding {
  animation: exit-glitch 0.7s forwards;
}
@keyframes exit-glitch {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
  15%  { clip-path: inset(30% 0 40% 0); transform: translateX(-8px); filter: hue-rotate(90deg); }
  30%  { clip-path: inset(60% 0 5% 0);  transform: translateX(8px);  filter: hue-rotate(180deg); }
  50%  { clip-path: inset(0 0 0 0);     transform: translateX(0); opacity: 0.7; }
  70%  { clip-path: inset(80% 0 0 0);   transform: translateX(-10px); }
  85%  { clip-path: inset(40% 0 40% 0); opacity: 0.3; }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; transform: scaleY(0); }
}

/* ── 6. cinematic-blur ───────────────────────────────────────── */
.preloader.effect-cinematic-blur.is-hiding {
  animation: exit-cinematic-blur 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes exit-cinematic-blur {
  0%   { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
  30%  { filter: blur(0) brightness(1.6); }
  100% { opacity: 0; filter: blur(30px) brightness(3); transform: scale(1.06); }
}

/* ── 7. cyberpunk ────────────────────────────────────────────── */
.preloader.effect-cyberpunk.is-hiding {
  animation: exit-cyberpunk 0.9s steps(12) forwards;
}
@keyframes exit-cyberpunk {
  0%   { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
  20%  { clip-path: polygon(0 0,100% 0,100% 70%,0 80%); filter: hue-rotate(45deg); }
  40%  { clip-path: polygon(0 10%,100% 5%,100% 50%,0 60%); filter: hue-rotate(90deg); }
  60%  { clip-path: polygon(0 30%,100% 20%,100% 35%,0 45%); filter: hue-rotate(180deg); }
  80%  { clip-path: polygon(0 45%,100% 45%,100% 50%,0 50%); opacity: 0.4; }
  100% { clip-path: polygon(0 50%,100% 50%,100% 50%,0 50%); opacity: 0; }
}

/* ── 8. shutter ──────────────────────────────────────────────── */
.preloader.effect-shutter.is-hiding {
  animation: exit-shutter 0.8s cubic-bezier(0.77,0,0.18,1) forwards;
}
@keyframes exit-shutter {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; }
  40%  { filter: brightness(1.8); }
  60%  { clip-path: inset(0 50% 0 0); }
  80%  { clip-path: inset(0 75% 0 25%); }
  100% { clip-path: inset(0 100% 0 100%); opacity: 0; }
}

/* ── 9. dissolve ─────────────────────────────────────────────── */
.preloader.effect-dissolve.is-hiding {
  animation: exit-dissolve 1s steps(20) forwards;
}
@keyframes exit-dissolve {
  0%   { opacity: 1; filter: blur(0px); }
  50%  { opacity: 0.5; filter: blur(3px); }
  100% { opacity: 0; filter: blur(20px); }
}

/* ── 10. split-reveal ────────────────────────────────────────── */
.preloader.effect-split-reveal.is-hiding::before,
.preloader.effect-split-reveal.is-hiding::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: inherit;
  z-index: 999999;
  animation: split-out 0.9s cubic-bezier(0.77,0,0.18,1) forwards;
  background-color: inherit;
}
.preloader.effect-split-reveal.is-hiding::before {
  top: 0;
  animation-name: split-top;
}
.preloader.effect-split-reveal.is-hiding::after {
  bottom: 0;
  animation-name: split-bottom;
}
.preloader.effect-split-reveal.is-hiding {
  animation: split-fade-inner 0.3s ease 0.25s forwards;
}
@keyframes split-top    { to { transform: translateY(-100%); } }
@keyframes split-bottom { to { transform: translateY(100%); } }
@keyframes split-fade-inner { to { opacity: 0; } }

/* ── 11. vortex ──────────────────────────────────────────────── */
.preloader.effect-vortex.is-hiding {
  animation: exit-vortex 0.9s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes exit-vortex {
  0%   { transform: rotate(0) scale(1); opacity: 1; filter: blur(0); }
  50%  { transform: rotate(180deg) scale(0.55); opacity: 0.6; filter: blur(4px); }
  100% { transform: rotate(360deg) scale(0); opacity: 0; filter: blur(12px); }
}

/* ── 12. fade ────────────────────────────────────────────────── */
.preloader.effect-fade.is-hiding {
  animation: exit-fade 0.8s ease forwards;
}
@keyframes exit-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 13. strips ─────────────────────────────────────────────── */
/* JS-driven: 10 horizontal strips alternate sliding left / right */
@keyframes prld-strip-left  { to { transform: translateX(-102%); } }
@keyframes prld-strip-right { to { transform: translateX(102%);  } }

/* ── 14. blinds ──────────────────────────────────────────────── */
/* JS-driven: strips collapse height to 0 from centre (venetian) */
@keyframes prld-blinds-close { to { transform: scaleY(0); } }

/* ─── FULLY HIDDEN ───────────────────────────────────────────── */
.preloader.is-hidden {
  display: none !important;
  pointer-events: none !important;
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .preloader.is-hiding { animation-duration: 0.001ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   DIRECTIONAL SLIDE EXIT (v4.1)
══════════════════════════════════════════════════════════════ */
.preloader.effect-slide.dir-up.is-hiding    { animation: exit-slide-up    var(--prld-dur,0.85s) cubic-bezier(0.77,0,0.18,1) forwards; }
.preloader.effect-slide.dir-down.is-hiding  { animation: exit-slide-down  var(--prld-dur,0.85s) cubic-bezier(0.77,0,0.18,1) forwards; }
.preloader.effect-slide.dir-left.is-hiding  { animation: exit-slide-left  var(--prld-dur,0.85s) cubic-bezier(0.77,0,0.18,1) forwards; }
.preloader.effect-slide.dir-right.is-hiding { animation: exit-slide-right var(--prld-dur,0.85s) cubic-bezier(0.77,0,0.18,1) forwards; }

@keyframes exit-slide-up    { 0%{transform:translateY(0);opacity:1}   100%{transform:translateY(-102%);opacity:.8} }
@keyframes exit-slide-down  { 0%{transform:translateY(0);opacity:1}   100%{transform:translateY(102%);opacity:.8} }
@keyframes exit-slide-left  { 0%{transform:translateX(0);opacity:1}   100%{transform:translateX(-102%);opacity:.8} }
@keyframes exit-slide-right { 0%{transform:translateX(0);opacity:1}   100%{transform:translateX(102%);opacity:.8} }

/* ── DIRECTIONAL FADE EXIT ─────────────────────────────────── */
.preloader.effect-fade.dir-up.is-hiding    { animation: exit-fade-up    var(--prld-dur,0.8s) ease forwards; }
.preloader.effect-fade.dir-down.is-hiding  { animation: exit-fade-down  var(--prld-dur,0.8s) ease forwards; }
.preloader.effect-fade.dir-left.is-hiding  { animation: exit-fade-left  var(--prld-dur,0.8s) ease forwards; }
.preloader.effect-fade.dir-right.is-hiding { animation: exit-fade-right var(--prld-dur,0.8s) ease forwards; }

@keyframes exit-fade-up    { 0%{opacity:1;transform:translateY(0)}   100%{opacity:0;transform:translateY(-40px)} }
@keyframes exit-fade-down  { 0%{opacity:1;transform:translateY(0)}   100%{opacity:0;transform:translateY(40px)} }
@keyframes exit-fade-left  { 0%{opacity:1;transform:translateX(0)}   100%{opacity:0;transform:translateX(-40px)} }
@keyframes exit-fade-right { 0%{opacity:1;transform:translateX(0)}   100%{opacity:0;transform:translateX(40px)} }

/* ── ENTER BUTTON TIMER ────────────────────────────────────── */
.enter-btn--hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.enter-btn--visible {
  animation: prld-btn-appear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes prld-btn-appear {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}