/* Inoforest Page Loading — Clip-path Transition Effects */

.inoforest-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    visibility: hidden;
}

.inoforest-loader-overlay.active {
    pointer-events: all;
    visibility: visible;
}

/* Shape layer */
.inoforest-loader-shape {
    position: absolute;
    inset: 0;
    background: var(--cpl-overlay, #13161f);
    will-change: clip-path;
    transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Spinner */
.inoforest-loader-spinner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.inoforest-loader-overlay.loading .inoforest-loader-spinner-wrap {
    opacity: 1;
}

.inoforest-loader-spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--cpl-spinner, #7c6fff);
    border-radius: 50%;
    animation: cplSpin 0.7s linear infinite;
}

@keyframes cplSpin {
    to { transform: rotate(360deg); }
}

/* ── Circle Expand ── */
.inoforest-loader-shape.cpl-e-circle-expand { clip-path: circle(0% at 50% 50%); }
.inoforest-loader-shape.cpl-e-circle-expand.opening { clip-path: circle(100% at 50% 50%); }
.inoforest-loader-shape.cpl-e-circle-expand.closing { clip-path: circle(0% at 50% 50%); }

/* ── Diagonal Swipe ── */
.inoforest-loader-shape.cpl-e-diagonal-swipe { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); }
.inoforest-loader-shape.cpl-e-diagonal-swipe.opening { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
.inoforest-loader-shape.cpl-e-diagonal-swipe.closing { clip-path: polygon(120% 0, 120% 0, 100% 100%, 100% 100%); }

/* ── Diamond ── */
.inoforest-loader-shape.cpl-e-diamond { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.inoforest-loader-shape.cpl-e-diamond.opening { clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%); }
.inoforest-loader-shape.cpl-e-diamond.closing { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }

/* ── Curtain ── */
.inoforest-loader-shape.cpl-e-curtain-left { clip-path: inset(0 100% 0 0); }
.inoforest-loader-shape.cpl-e-curtain-left.opening { clip-path: inset(0 0 0 0); }
.inoforest-loader-shape.cpl-e-curtain-left.closing { clip-path: inset(0 0 0 100%); }

/* ── Iris ── */
.inoforest-loader-shape.cpl-e-iris { clip-path: inset(50% round 50%); }
.inoforest-loader-shape.cpl-e-iris.opening { clip-path: inset(0% round 0%); }
.inoforest-loader-shape.cpl-e-iris.closing { clip-path: inset(50% round 50%); }

/* ── Wipe Down ── */
.inoforest-loader-shape.cpl-e-wipe-down { clip-path: inset(0 0 100% 0); }
.inoforest-loader-shape.cpl-e-wipe-down.opening { clip-path: inset(0 0 0 0); }
.inoforest-loader-shape.cpl-e-wipe-down.closing { clip-path: inset(100% 0 0 0); }

/* ── Wedge ── */
.inoforest-loader-shape.cpl-e-wedge { clip-path: polygon(50% 0, 50% 0, 50% 0); }
.inoforest-loader-shape.cpl-e-wedge.opening { clip-path: polygon(50% -50%, 150% 150%, -50% 150%); }
.inoforest-loader-shape.cpl-e-wedge.closing { clip-path: polygon(50% 150%, 150% 150%, -50% 150%); }

/* ── Split Horizontal ── */
.inoforest-loader-shape.cpl-e-split-h { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }
.inoforest-loader-shape.cpl-e-split-h.opening { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.inoforest-loader-shape.cpl-e-split-h.closing { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }

/* ── Split Vertical ── */
.inoforest-loader-shape.cpl-e-split-v { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
.inoforest-loader-shape.cpl-e-split-v.opening { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.inoforest-loader-shape.cpl-e-split-v.closing { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }

/* ── Skew Reveal ── */
.inoforest-loader-shape.cpl-e-skew-reveal { clip-path: polygon(100% 0, 100% 0, 120% 100%, 120% 100%); }
.inoforest-loader-shape.cpl-e-skew-reveal.opening { clip-path: polygon(-20% 0, 100% 0, 120% 100%, 0 100%); }
.inoforest-loader-shape.cpl-e-skew-reveal.closing { clip-path: polygon(-20% 0, -20% 0, 0 100%, 0 100%); }

/* ── Wave ── */
.inoforest-loader-shape.cpl-e-wave {
    clip-path: polygon(0 100%, 15% 100%, 35% 100%, 50% 100%, 65% 100%, 85% 100%, 100% 100%, 100% 100%, 0 100%);
}
.inoforest-loader-shape.cpl-e-wave.opening {
    clip-path: polygon(0 100%, 15% 70%, 35% 85%, 50% 55%, 65% 75%, 85% 50%, 100% 65%, 100% 0, 0 0);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.inoforest-loader-shape.cpl-e-wave.full {
    clip-path: polygon(0 0, 15% 0, 35% 0, 50% 0, 65% 0, 85% 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inoforest-loader-shape.cpl-e-wave.closing {
    clip-path: polygon(0 0, 15% 0, 35% 0, 50% 0, 65% 0, 85% 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.01s;
}
.inoforest-loader-shape.cpl-e-wave.closing-out {
    clip-path: polygon(0 100%, 15% 70%, 35% 85%, 50% 55%, 65% 75%, 85% 50%, 100% 65%, 100% 100%, 0 100%);
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inoforest-loader-shape.cpl-e-wave.closing-done {
    clip-path: polygon(0 100%, 15% 100%, 35% 100%, 50% 100%, 65% 100%, 85% 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Zigzag ── */
.inoforest-loader-shape.cpl-e-zigzag {
    clip-path: polygon(0 0, 25% 0, 50% 0, 75% 0, 100% 0, 100% 0, 75% 0, 50% 0, 25% 0, 0 0);
}
.inoforest-loader-shape.cpl-e-zigzag.opening {
    clip-path: polygon(0 0, 25% 0, 50% 0, 75% 0, 100% 0, 100% 100%, 75% 85%, 50% 100%, 25% 85%, 0 100%);
}
.inoforest-loader-shape.cpl-e-zigzag.closing {
    clip-path: polygon(0 100%, 25% 85%, 50% 100%, 75% 85%, 100% 100%, 100% 100%, 75% 100%, 50% 100%, 25% 100%, 0 100%);
}

/* ── Hexagon ── */
.inoforest-loader-shape.cpl-e-hexagon { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.inoforest-loader-shape.cpl-e-hexagon.opening { clip-path: polygon(25% -50%, 75% -50%, 150% 50%, 75% 150%, 25% 150%, -50% 50%); }
.inoforest-loader-shape.cpl-e-hexagon.closing { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }