/* DigiX Preloader - Advanced Transitions */
/* Specificity Fix: We must target #digix-preloader to override default ID styles */
/* Pattern: Class adds initial state & transition -> .active adds exit state */

/* Helper to apply to both frontend ID and admin preview class */
:root {
    --digix-transit-dur: 0.6s;
}

/* 1. Fade */
#digix-preloader.digix-transit-fade,
.digix-preview-box.digix-transit-fade {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#digix-preloader.digix-transit-fade.active,
.digix-preview-box.digix-transit-fade.active {
    opacity: 0 !important;
}

/* 2. Slide Up */
#digix-preloader.digix-transit-slide-up,
.digix-preview-box.digix-transit-slide-up {
    transform: translateY(0);
    transition: transform 0.6s ease-in-out;
}

#digix-preloader.digix-transit-slide-up.active,
.digix-preview-box.digix-transit-slide-up.active {
    transform: translateY(-100%) !important;
}

/* 3. Slide Down */
#digix-preloader.digix-transit-slide-down,
.digix-preview-box.digix-transit-slide-down {
    transform: translateY(0);
    transition: transform 0.6s ease-in-out;
}

#digix-preloader.digix-transit-slide-down.active,
.digix-preview-box.digix-transit-slide-down.active {
    transform: translateY(100%) !important;
}

/* 4. Slide Left */
#digix-preloader.digix-transit-slide-left,
.digix-preview-box.digix-transit-slide-left {
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

#digix-preloader.digix-transit-slide-left.active,
.digix-preview-box.digix-transit-slide-left.active {
    transform: translateX(-100%) !important;
}

/* 5. Slide Right */
#digix-preloader.digix-transit-slide-right,
.digix-preview-box.digix-transit-slide-right {
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

#digix-preloader.digix-transit-slide-right.active,
.digix-preview-box.digix-transit-slide-right.active {
    transform: translateX(100%) !important;
}

/* 6. Zoom Out */
#digix-preloader.digix-transit-zoom-out,
.digix-preview-box.digix-transit-zoom-out {
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s ease-in;
}

#digix-preloader.digix-transit-zoom-out.active,
.digix-preview-box.digix-transit-zoom-out.active {
    opacity: 0 !important;
    transform: scale(1.5) !important;
}

/* 7. Zoom In */
#digix-preloader.digix-transit-zoom-in,
.digix-preview-box.digix-transit-zoom-in {
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s ease-in;
}

#digix-preloader.digix-transit-zoom-in.active,
.digix-preview-box.digix-transit-zoom-in.active {
    opacity: 0 !important;
    transform: scale(0) !important;
}

/* 8. Curtain Horizontal (Split) */
#digix-preloader.digix-transit-curtain-h,
.digix-preview-box.digix-transit-curtain-h {
    overflow: hidden;
}

#digix-preloader.digix-transit-curtain-h::before,
#digix-preloader.digix-transit-curtain-h::after,
.digix-preview-box.digix-transit-curtain-h::before,
.digix-preview-box.digix-transit-curtain-h::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: inherit;
    z-index: 999;
    transition: transform 0.6s ease-in-out;
    transform: translateX(0);
    /* Initial state */
}

#digix-preloader.digix-transit-curtain-h::before,
.digix-preview-box.digix-transit-curtain-h::before {
    left: 0;
}

#digix-preloader.digix-transit-curtain-h::after,
.digix-preview-box.digix-transit-curtain-h::after {
    right: 0;
}

#digix-preloader.digix-transit-curtain-h.active::before,
.digix-preview-box.digix-transit-curtain-h.active::before {
    transform: translateX(-100%);
}

#digix-preloader.digix-transit-curtain-h.active::after,
.digix-preview-box.digix-transit-curtain-h.active::after {
    transform: translateX(100%);
}

/* 9. Curtain Vertical */
#digix-preloader.digix-transit-curtain-v,
.digix-preview-box.digix-transit-curtain-v {
    overflow: hidden;
}

#digix-preloader.digix-transit-curtain-v::before,
#digix-preloader.digix-transit-curtain-v::after,
.digix-preview-box.digix-transit-curtain-v::before,
.digix-preview-box.digix-transit-curtain-v::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: inherit;
    z-index: 999;
    transition: transform 0.6s ease-in-out;
    transform: translateY(0);
    /* Initial state */
}

#digix-preloader.digix-transit-curtain-v::before,
.digix-preview-box.digix-transit-curtain-v::before {
    top: 0;
}

#digix-preloader.digix-transit-curtain-v::after,
.digix-preview-box.digix-transit-curtain-v::after {
    bottom: 0;
}

#digix-preloader.digix-transit-curtain-v.active::before,
.digix-preview-box.digix-transit-curtain-v.active::before {
    transform: translateY(-100%);
}

#digix-preloader.digix-transit-curtain-v.active::after,
.digix-preview-box.digix-transit-curtain-v.active::after {
    transform: translateY(100%);
}

/* 10. Blur Fade */
#digix-preloader.digix-transit-blur,
.digix-preview-box.digix-transit-blur {
    opacity: 1;
    filter: blur(0);
    transition: all 0.6s ease;
}

#digix-preloader.digix-transit-blur.active,
.digix-preview-box.digix-transit-blur.active {
    opacity: 0 !important;
    filter: blur(20px);
}

/* 11. Grayscale */
#digix-preloader.digix-transit-grayscale,
.digix-preview-box.digix-transit-grayscale {
    opacity: 1;
    filter: grayscale(0);
    transition: all 0.6s ease;
}

#digix-preloader.digix-transit-grayscale.active,
.digix-preview-box.digix-transit-grayscale.active {
    opacity: 0 !important;
    filter: grayscale(100%);
}

/* 12. Wipe Left */
#digix-preloader.digix-transit-wipe-left,
.digix-preview-box.digix-transit-wipe-left {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s ease-in-out;
}

#digix-preloader.digix-transit-wipe-left.active,
.digix-preview-box.digix-transit-wipe-left.active {
    clip-path: inset(0 100% 0 0);
}

/* 13. Wipe Right */
#digix-preloader.digix-transit-wipe-right,
.digix-preview-box.digix-transit-wipe-right {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s ease-in-out;
}

#digix-preloader.digix-transit-wipe-right.active,
.digix-preview-box.digix-transit-wipe-right.active {
    clip-path: inset(0 0 0 100%);
}

/* 14. Wipe Up */
#digix-preloader.digix-transit-wipe-up,
.digix-preview-box.digix-transit-wipe-up {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s ease-in-out;
}

#digix-preloader.digix-transit-wipe-up.active,
.digix-preview-box.digix-transit-wipe-up.active {
    clip-path: inset(0 0 100% 0);
}

/* 15. Wipe Down */
#digix-preloader.digix-transit-wipe-down,
.digix-preview-box.digix-transit-wipe-down {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s ease-in-out;
}

#digix-preloader.digix-transit-wipe-down.active,
.digix-preview-box.digix-transit-wipe-down.active {
    clip-path: inset(100% 0 0 0);
}

/* 16. Circle Reveal */
#digix-preloader.digix-transit-circle-reveal,
.digix-preview-box.digix-transit-circle-reveal {
    clip-path: circle(100% at 50% 50%);
    transition: clip-path 0.7s ease-in-out;
}

#digix-preloader.digix-transit-circle-reveal.active,
.digix-preview-box.digix-transit-circle-reveal.active {
    clip-path: circle(0% at 50% 50%);
}

/* 17. Diamond Reveal */
#digix-preloader.digix-transit-diamond-reveal,
.digix-preview-box.digix-transit-diamond-reveal {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 0.7s ease-in-out;
}

#digix-preloader.digix-transit-diamond-reveal.active,
.digix-preview-box.digix-transit-diamond-reveal.active {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

/* 18. Rotate Out */
#digix-preloader.digix-transit-rotate,
.digix-preview-box.digix-transit-rotate {
    transform: rotate(0) scale(1);
    opacity: 1;
    transition: all 0.7s ease-in;
}

#digix-preloader.digix-transit-rotate.active,
.digix-preview-box.digix-transit-rotate.active {
    transform: rotate(180deg) scale(0) !important;
    opacity: 0 !important;
}

/* 19. Fold Up */
#digix-preloader.digix-transit-fold,
.digix-preview-box.digix-transit-fold {
    transform-origin: top;
    transform: scaleY(1);
    transition: transform 0.6s ease-in-out;
}

#digix-preloader.digix-transit-fold.active,
.digix-preview-box.digix-transit-fold.active {
    transform: scaleY(0) !important;
}

/* 20. Shrink */
#digix-preloader.digix-transit-shrink,
.digix-preview-box.digix-transit-shrink {
    transform: scale(1);
    opacity: 1;
    border-radius: 0;
    transition: all 0.6s ease-in-out;
}

#digix-preloader.digix-transit-shrink.active,
.digix-preview-box.digix-transit-shrink.active {
    transform: scale(0) !important;
    opacity: 0 !important;
    border-radius: 50%;
}