/* ═══════════════════════════════════════════════════════════
   Divi Glide Transitions – v1.6.4 
   State machine powered by data-wipe and data-state attributes.
   Formerly ApeFlow. Standardized to DiviGlide.
 ═══════════════════════════════════════════════════════════ */
:root {
    --diviglide-cubic-bezier: cubic-bezier(0.165, 0.84, 0.44, 1);
    --diviglide-easing: var(--diviglide-cubic-bezier);
    --origin-x: var(--click-x, 50%);
    --origin-y: var(--click-y, 50%);
}

html.is-changing {
    cursor: wait !important;
}

/* ── Base Transition Properties ── 
   CRITICAL: Only apply these when a transition is active. 
   Otherwise, 'will-change' and 'transform' create new containing blocks 
   that break 'position: fixed' elements in the theme. */
html.diviglide-active .diviglide-content-target,
html.is-changing .diviglide-content-target,
html.is-rendering .diviglide-content-target,
html.divi-first-load .diviglide-content-target,
html.diviglide-is-entering .diviglide-content-target {
    transition-property: transform, opacity, filter, clip-path, mask-position, -webkit-mask-position !important;
    transition-timing-function: var(--diviglide-easing) !important;
    transition-duration: var(--time-duration, 800ms) !important;
    transform-origin: center center !important;
}

/* Restrict will-change strictly to content-animating transitions (zoom / blur / fade)
   to prevent allocating massive 100MB+ composited layers on #et-main-area on low-end devices. */
html.anim-content-zoom-in .diviglide-content-target,
html.anim-content-zoom-out .diviglide-content-target,
html.anim-content-fade .diviglide-content-target,
html.anim-content-blur .diviglide-content-target {
    will-change: transform, opacity;
}

/* Use separate duration for entering phase if provided */
html.diviglide-is-entering .diviglide-content-target {
    transition-duration: var(--time-in, 800ms) !important;
}



/* Also target the preview container for the admin panel */
#divi-preview-main .preview-page,
#divi-preview-main.is-changing .preview-page,
#divi-preview-main.is-rendering .preview-page {
    transition-property: transform, opacity, filter, clip-path, mask-position, -webkit-mask-position !important;
    transition-timing-function: var(--diviglide-easing) !important;
    transition-duration: var(--time-duration, 800ms) !important;
}

#divi-preview-main.is-rendering .preview-page {
    transition-duration: var(--time-in, 800ms) !important;
}

/* iOS WebKit Touch & Delegation support */
a, button, [role="button"], input[type="submit"], input[type="button"], .et_pb_button, .et_pb_menu a, .et_mobile_menu a {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ── Entrance Animation ── 
   .diviglide-content-target is always placed on #et-main-area (never on
   #page-container) by init.js, so the fixed header is never inside
   the animated container. */
html.divi-first-load .diviglide-content-target {
    animation: diviFirstLoad var(--time-duration, 800ms) var(--diviglide-easing) both;
}

@keyframes diviFirstLoad {
    from {
        opacity: 0.85;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTENT ANIMATIONS (Applied directly to HTML tag)
 ═══════════════════════════════════════════════════════════ */
html.anim-content-blur .diviglide-content-target,
#divi-preview-main.anim-content-blur .preview-page {
    filter: blur(16px) saturate(0.3) !important;
}

html.anim-content-zoom-in .diviglide-content-target,
#divi-preview-main.anim-content-zoom-in .preview-page {
    opacity: 0 !important;
    transform: scale(0.88) !important;
    transform-origin: center center;
}

html.anim-content-zoom-out .diviglide-content-target,
#divi-preview-main.anim-content-zoom-out .preview-page {
    opacity: 0 !important;
    transform: scale(1.12) !important;
    transform-origin: center center;
}

/* ──────────────────────────────────────────────
   Reveal / Gradient transitions (NO body bg bleed)
   We clip/mask the overlay element, not the page content.
────────────────────────────────────────────── */
#diviglide-overlay [data-wipe="reveal-circle"],
#diviglide-overlay [data-wipe="reveal-square"],
#diviglide-overlay [data-wipe="reveal-gradient"],
#diviglide-overlay [data-wipe="gradient-1"],
#diviglide-overlay [data-wipe="gradient-2"],
#diviglide-overlay [data-wipe="gradient-3"],
#diviglide-overlay [data-wipe="gradient-4"] {
    width: 100%;
    height: 100%;
    background-color: var(--color-option, #fff);
    transition-timing-function: var(--diviglide-easing);
    transition-duration: var(--time-duration, 800ms);
    will-change: clip-path, mask-position, -webkit-mask-position;
}

/* Reveal Circle */
#diviglide-overlay [data-wipe="reveal-circle"] {
    transition-property: clip-path;
}

#diviglide-overlay [data-wipe="reveal-circle"][data-state=""] {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
}

#diviglide-overlay [data-wipe="reveal-circle"][data-state="in"] {
    clip-path: circle(120% at var(--click-x, 50%) var(--click-y, 50%));
}

#diviglide-overlay [data-wipe="reveal-circle"][data-state="out"] {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
}

/* Reveal Square */
#diviglide-overlay [data-wipe="reveal-square"] {
    transition-property: clip-path;
}

#diviglide-overlay [data-wipe="reveal-square"][data-state=""] {
    clip-path: polygon(var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%));
}

#diviglide-overlay [data-wipe="reveal-square"][data-state="in"] {
    clip-path: polygon(calc(var(--click-x, 50%) - 120%) calc(var(--click-y, 50%) - 120%),
            calc(var(--click-x, 50%) + 120%) calc(var(--click-y, 50%) - 120%),
            calc(var(--click-x, 50%) + 120%) calc(var(--click-y, 50%) + 120%),
            calc(var(--click-x, 50%) - 120%) calc(var(--click-y, 50%) + 120%));
}

#diviglide-overlay [data-wipe="reveal-square"][data-state="out"] {
    clip-path: polygon(var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%),
            var(--click-x, 50%) var(--click-y, 50%));
}

/* Reveal Gradient (Legacy) and Gradient Style 1 */
#diviglide-overlay [data-wipe="reveal-gradient"],
#diviglide-overlay [data-wipe="gradient-1"] {
    -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 60%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 40%, transparent 60%, transparent 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition-property: -webkit-mask-position, mask-position;
}

#diviglide-overlay [data-wipe="reveal-gradient"][data-state=""],
#diviglide-overlay [data-wipe="gradient-1"][data-state=""] {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
}

#diviglide-overlay [data-wipe="reveal-gradient"][data-state="in"],
#diviglide-overlay [data-wipe="gradient-1"][data-state="in"] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

#diviglide-overlay [data-wipe="reveal-gradient"][data-state="out"],
#diviglide-overlay [data-wipe="gradient-1"][data-state="out"] {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
}

/* Gradient Style 2 (numeric mask-position to prevent pop) */
#diviglide-overlay [data-wipe="gradient-2"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition-property: -webkit-mask-position, mask-position;
}

#diviglide-overlay [data-wipe="gradient-2"][data-state=""] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

#diviglide-overlay [data-wipe="gradient-2"][data-state="in"] {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
}

#diviglide-overlay [data-wipe="gradient-2"][data-state="out"] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

/* Gradient Style 3 (numeric mask-position to prevent pop) */
#diviglide-overlay [data-wipe="gradient-3"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 60%, black 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition-property: -webkit-mask-position, mask-position;
}

#diviglide-overlay [data-wipe="gradient-3"][data-state=""] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

#diviglide-overlay [data-wipe="gradient-3"][data-state="in"] {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
}

#diviglide-overlay [data-wipe="gradient-3"][data-state="out"] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

/* Gradient Style 4 */
#diviglide-overlay [data-wipe="gradient-4"] {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 60%, transparent 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition-property: -webkit-mask-position, mask-position;
}

#diviglide-overlay [data-wipe="gradient-4"][data-state=""] {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
}

#diviglide-overlay [data-wipe="gradient-4"][data-state="in"] {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

#diviglide-overlay [data-wipe="gradient-4"][data-state="out"] {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY ENGINE
 ═══════════════════════════════════════════════════════════ */
#diviglide-overlay {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
}

#divi-preview-main #diviglide-overlay {
    position: absolute;
    pointer-events: none !important;
}

#diviglide-overlay.is-active,
#diviglide-overlay.is-placeholder,
html.diviglide-navigating #diviglide-overlay {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

/* ── DATA-WIPE DECLARATIONS ── */
.fade-overlay,
.slide-elem {
    width: 100%;
    height: 100%;
    background-color: var(--color-option, #fff);
}

[data-wipe="fade-overlay"] {
    transition: opacity var(--time-duration, 600ms) linear !important;
}

[data-wipe="fade-overlay"][data-state=""] {
    opacity: 0;
}

[data-wipe="fade-overlay"][data-state="in"] {
    opacity: 1;
}

[data-wipe="fade-overlay"][data-state="out"] {
    opacity: 0;
}

[data-wipe^="slide-"] {
    transition: transform var(--time-duration, 800ms) var(--diviglide-cubic-bezier, ease-in-out) !important;
}

[data-wipe="slide-top"][data-state=""] {
    transform: translateY(100%);
}

[data-wipe="slide-top"][data-state="in"] {
    transform: translateY(0%);
}

[data-wipe="slide-top"][data-state="out"] {
    transform: translateY(-100%);
}

[data-wipe="slide-bot"][data-state=""] {
    transform: translateY(-100%);
}

[data-wipe="slide-bot"][data-state="in"] {
    transform: translateY(0);
}

[data-wipe="slide-bot"][data-state="out"] {
    transform: translateY(100%);
}

[data-wipe="slide-left"][data-state=""] {
    transform: translateX(100%);
}

[data-wipe="slide-left"][data-state="in"] {
    transform: translateX(0);
}

[data-wipe="slide-left"][data-state="out"] {
    transform: translateX(-100%);
}

[data-wipe="slide-right"][data-state=""] {
    transform: translateX(-100%);
}

[data-wipe="slide-right"][data-state="in"] {
    transform: translateX(0);
}

[data-wipe="slide-right"][data-state="out"] {
    transform: translateX(100%);
}

[data-wipe="slide-top-2"][data-state=""] {
    transform: translateY(100%);
}

[data-wipe="slide-top-2"][data-state="in"] {
    transform: translateY(0%);
}

[data-wipe="slide-top-2"][data-state="out"] {
    transform: translateY(100%);
}

[data-wipe="slide-bot-2"][data-state=""] {
    transform: translateY(-100%);
}

[data-wipe="slide-bot-2"][data-state="in"] {
    transform: translateY(0);
}

[data-wipe="slide-bot-2"][data-state="out"] {
    transform: translateY(-100%);
}

[data-wipe="slide-left-2"][data-state=""] {
    transform: translateX(100%);
}

[data-wipe="slide-left-2"][data-state="in"] {
    transform: translateX(0);
}

[data-wipe="slide-left-2"][data-state="out"] {
    transform: translateX(100%);
}

[data-wipe="slide-right-2"][data-state=""] {
    transform: translateX(-100%);
}

[data-wipe="slide-right-2"][data-state="in"] {
    transform: translateX(0);
}

[data-wipe="slide-right-2"][data-state="out"] {
    transform: translateX(-100%);
}

/* ═══════════════════════════════════════════════════════════
   MORPHING OVERLAYS (Liquid SVG Transitions)
 ═══════════════════════════════════════════════════════════ */
.morph-elem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.morph-elem svg {
    width: 100%;
    height: 100%;
    fill: var(--color-option, #fff);
}

[data-wipe^="morph-"] .morph-path {
    animation-timing-function: var(--diviglide-easing, ease-in-out) !important;
    animation-fill-mode: forwards !important;
}

[data-wipe^="morph-"][data-state="in"] .morph-path {
    animation-duration: var(--time-out, 800ms) !important;
}

[data-wipe^="morph-"][data-state="out"] .morph-path {
    animation-duration: var(--time-in, 800ms) !important;
}

/* ── 1. The Wave ── */
[data-wipe="morph-wave-top"][data-state="in"] .morph-path {
    animation-name: waveInTop;
}

[data-wipe="morph-wave-top"][data-state="out"] .morph-path {
    animation-name: waveOutTop;
}

[data-wipe="morph-wave-bot"][data-state="in"] .morph-path {
    animation-name: waveInBot;
}

[data-wipe="morph-wave-bot"][data-state="out"] .morph-path {
    animation-name: waveOutBot;
}

[data-wipe="morph-wave-left"][data-state="in"] .morph-path {
    animation-name: waveInLeft;
}

[data-wipe="morph-wave-left"][data-state="out"] .morph-path {
    animation-name: waveOutLeft;
}

[data-wipe="morph-wave-right"][data-state="in"] .morph-path {
    animation-name: waveInRight;
}

[data-wipe="morph-wave-right"][data-state="out"] .morph-path {
    animation-name: waveOutRight;
}

@keyframes waveInTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 0 C 66 0, 33 0, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 60 C 70 120, 30 0, 0 60 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 100 C 66 100, 33 100, 0 100 Z");
    }
}

@keyframes waveOutTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 100 C 66 100, 33 100, 0 100 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 60 C 70 0, 30 120, 0 60 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 0 C 66 0, 33 0, 0 0 Z");
    }
}

@keyframes waveInBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 100 C 66 100, 33 100, 0 100 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 40 C 70 -20, 30 100, 0 40 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 0 C 66 0, 33 0, 0 0 Z");
    }
}

@keyframes waveOutBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 0 C 66 0, 33 0, 0 0 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 40 C 70 100, 30 -20, 0 40 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 100 C 66 100, 33 100, 0 100 Z");
    }
}

@keyframes waveInLeft {
    0% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 66, 0 33, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 60 100 C 120 70, 0 30, 60 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 66, 100 33, 100 0 Z");
    }
}

@keyframes waveOutLeft {
    0% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 66, 100 33, 100 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 60 100 C 0 70, 120 30, 60 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 66, 0 33, 0 0 Z");
    }
}

@keyframes waveInRight {
    0% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 66, 100 33, 100 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 40 100 C -20 70, 100 30, 40 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 66, 0 33, 0 0 Z");
    }
}

@keyframes waveOutRight {
    0% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 66, 0 33, 0 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 40 100 C 100 70, -20 30, 40 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 66, 100 33, 100 0 Z");
    }
}

/* ── 2. The Arch ── */
[data-wipe="morph-arch-top"][data-state="in"] .morph-path {
    animation-name: archInTop;
}

[data-wipe="morph-arch-top"][data-state="out"] .morph-path {
    animation-name: archOutTop;
}

[data-wipe="morph-arch-bot"][data-state="in"] .morph-path {
    animation-name: archInBot;
}

[data-wipe="morph-arch-bot"][data-state="out"] .morph-path {
    animation-name: archOutBot;
}

[data-wipe="morph-arch-left"][data-state="in"] .morph-path {
    animation-name: archInLeft;
}

[data-wipe="morph-arch-left"][data-state="out"] .morph-path {
    animation-name: archOutLeft;
}

[data-wipe="morph-arch-right"][data-state="in"] .morph-path {
    animation-name: archInRight;
}

[data-wipe="morph-arch-right"][data-state="out"] .morph-path {
    animation-name: archOutRight;
}

@keyframes archInTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 0 C 75 0, 25 0, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 20 C 75 120, 25 120, 0 20 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 100 C 75 100, 25 100, 0 100 Z");
    }
}

@keyframes archOutTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 100 C 75 100, 25 100, 0 100 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 80 C 75 -20, 25 -20, 0 80 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 0 C 75 0, 25 0, 0 0 Z");
    }
}

@keyframes archInBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 100 C 75 100, 25 100, 0 100 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 80 C 75 -20, 25 -20, 0 80 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 0 C 75 0, 25 0, 0 0 Z");
    }
}

@keyframes archOutBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 0 C 75 0, 25 0, 0 0 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 20 C 75 120, 25 120, 0 20 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 100 C 75 100, 25 100, 0 100 Z");
    }
}

@keyframes archInLeft {
    0% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 75, 0 25, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 20 100 C 120 75, 120 25, 20 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 75, 100 25, 100 0 Z");
    }
}

@keyframes archOutLeft {
    0% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 75, 100 25, 100 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 80 100 C -20 75, -20 25, 80 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 75, 0 25, 0 0 Z");
    }
}

@keyframes archInRight {
    0% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 75, 100 25, 100 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 80 100 C -20 75, -20 25, 80 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 75, 0 25, 0 0 Z");
    }
}

@keyframes archOutRight {
    0% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 75, 0 25, 0 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 20 100 C 120 75, 120 25, 20 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 75, 100 25, 100 0 Z");
    }
}

/* ── 3. The Swoop ── */
[data-wipe="morph-swoop-top"][data-state="in"] .morph-path {
    animation-name: swoopInTop;
}

[data-wipe="morph-swoop-top"][data-state="out"] .morph-path {
    animation-name: swoopOutTop;
}

[data-wipe="morph-swoop-bot"][data-state="in"] .morph-path {
    animation-name: swoopInBot;
}

[data-wipe="morph-swoop-bot"][data-state="out"] .morph-path {
    animation-name: swoopOutBot;
}

[data-wipe="morph-swoop-left"][data-state="in"] .morph-path {
    animation-name: swoopInLeft;
}

[data-wipe="morph-swoop-left"][data-state="out"] .morph-path {
    animation-name: swoopOutLeft;
}

[data-wipe="morph-swoop-right"][data-state="in"] .morph-path {
    animation-name: swoopInRight;
}

[data-wipe="morph-swoop-right"][data-state="out"] .morph-path {
    animation-name: swoopOutRight;
}

@keyframes swoopInTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 0 C 50 0, 50 0, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 80 C 50 80, 50 10, 0 10 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 100 C 50 100, 50 100, 0 100 Z");
    }
}

@keyframes swoopOutTop {
    0% {
        d: path("M 0 0 L 100 0 L 100 100 C 50 100, 50 100, 0 100 Z");
    }

    50% {
        d: path("M 0 0 L 100 0 L 100 20 C 50 20, 50 90, 0 90 Z");
    }

    100% {
        d: path("M 0 0 L 100 0 L 100 0 C 50 0, 50 0, 0 0 Z");
    }
}

@keyframes swoopInBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 100 C 50 100, 50 100, 0 100 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 20 C 50 20, 50 90, 0 90 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 0 C 50 0, 50 0, 0 0 Z");
    }
}

@keyframes swoopOutBot {
    0% {
        d: path("M 0 100 L 100 100 L 100 0 C 50 0, 50 0, 0 0 Z");
    }

    50% {
        d: path("M 0 100 L 100 100 L 100 80 C 50 80, 50 10, 0 10 Z");
    }

    100% {
        d: path("M 0 100 L 100 100 L 100 100 C 50 100, 50 100, 0 100 Z");
    }
}

@keyframes swoopInLeft {
    0% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 50, 0 50, 0 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 80 100 C 80 50, 10 50, 10 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 50, 100 50, 100 0 Z");
    }
}

@keyframes swoopOutLeft {
    0% {
        d: path("M 0 0 L 0 100 L 100 100 C 100 50, 100 50, 100 0 Z");
    }

    50% {
        d: path("M 0 0 L 0 100 L 20 100 C 20 50, 90 50, 90 0 Z");
    }

    100% {
        d: path("M 0 0 L 0 100 L 0 100 C 0 50, 0 50, 0 0 Z");
    }
}

@keyframes swoopInRight {
    0% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 50, 100 50, 100 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 20 100 C 20 50, 90 50, 90 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 50, 0 50, 0 0 Z");
    }
}

@keyframes swoopOutRight {
    0% {
        d: path("M 100 0 L 100 100 L 0 100 C 0 50, 0 50, 0 0 Z");
    }

    50% {
        d: path("M 100 0 L 100 100 L 80 100 C 80 50, 10 50, 10 0 Z");
    }

    100% {
        d: path("M 100 0 L 100 100 L 100 100 C 100 50, 100 50, 100 0 Z");
    }
}

/* ── 4. Spilling ── */
[data-wipe="morph-spill-bl"][data-state="in"] .morph-path {
    animation-name: spillInBL;
}

[data-wipe="morph-spill-bl"][data-state="out"] .morph-path {
    animation-name: spillOutBL;
}

[data-wipe="morph-spill-tl"][data-state="in"] .morph-path {
    animation-name: spillInTL;
}

[data-wipe="morph-spill-tl"][data-state="out"] .morph-path {
    animation-name: spillOutTL;
}

[data-wipe="morph-spill-tr"][data-state="in"] .morph-path {
    animation-name: spillInTR;
}

[data-wipe="morph-spill-tr"][data-state="out"] .morph-path {
    animation-name: spillOutTR;
}

[data-wipe="morph-spill-br"][data-state="in"] .morph-path {
    animation-name: spillInBR;
}

[data-wipe="morph-spill-br"][data-state="out"] .morph-path {
    animation-name: spillOutBR;
}

@keyframes spillInBL {
    0% {
        d: path("M 0,0 c 0,0 -16.5,43.5 0,60 16.5,16.5 80,0 80,0 L 0,60 Z");
    }

    100% {
        d: path("M 0,0 c 0,0 63.5,-16.5 80,0 16.5,16.5 0,60 0,60 L 0,60 Z");
    }
}

@keyframes spillOutBL {
    0% {
        d: path("M 0,0 c 0,0 63.5,-16.5 80,0 16.5,16.5 0,60 0,60 L 0,60 Z");
    }

    100% {
        d: path("M 0,0 c 0,0 -16.5,43.5 0,60 16.5,16.5 80,0 80,0 L 0,60 Z");
    }
}

@keyframes spillInTL {
    0% {
        d: path("M 0,60 c 0,0 -16.5,-43.5 0,-60 16.5,-16.5 80,0 80,0 L 0,0 Z");
    }

    100% {
        d: path("M 0,60 c 0,0 63.5,16.5 80,0 16.5,-16.5 0,-60 0,-60 L 0,0 Z");
    }
}

@keyframes spillOutTL {
    0% {
        d: path("M 0,60 c 0,0 63.5,16.5 80,0 16.5,-16.5 0,-60 0,-60 L 0,0 Z");
    }

    100% {
        d: path("M 0,60 c 0,0 -16.5,-43.5 0,-60 16.5,-16.5 80,0 80,0 L 0,0 Z");
    }
}

@keyframes spillInTR {
    0% {
        d: path("M 80,60 c 0,0 16.5,-43.5 0,-60 -16.5,-16.5 -80,0 -80,0 L 80,0 Z");
    }

    100% {
        d: path("M 80,60 c 0,0 -63.5,16.5 -80,0 -16.5,-16.5 0,-60 0,-60 L 80,0 Z");
    }
}

@keyframes spillOutTR {
    0% {
        d: path("M 80,60 c 0,0 -63.5,16.5 -80,0 -16.5,-16.5 0,-60 0,-60 L 80,0 Z");
    }

    100% {
        d: path("M 80,60 c 0,0 16.5,-43.5 0,-60 -16.5,-16.5 -80,0 -80,0 L 80,0 Z");
    }
}

@keyframes spillInBR {
    0% {
        d: path("M 80,0 c 0,0 16.5,43.5 0,60 -16.5,16.5 -80,0 -80,0 L 80,60 Z");
    }

    100% {
        d: path("M 80,0 c 0,0 -63.5,-16.5 -80,0 -16.5,16.5 0,60 0,60 L 80,60 Z");
    }
}

@keyframes spillOutBR {
    0% {
        d: path("M 80,0 c 0,0 -63.5,-16.5 -80,0 -16.5,16.5 0,60 0,60 L 80,60 Z");
    }

    100% {
        d: path("M 80,0 c 0,0 16.5,43.5 0,60 -16.5,16.5 -80,0 -80,0 L 80,60 Z");
    }
}

/* ── 5. Framing ── */
[data-wipe="morph-frame"] .morph-path {
    fill-rule: evenodd;
}

[data-wipe="morph-frame"][data-state="in"] .morph-path {
    animation-name: framingIn;
}

[data-wipe="morph-frame"][data-state="out"] .morph-path {
    animation-name: framingOut;
}

@keyframes framingIn {
    0% {
        d: path("M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z");
    }

    100% {
        d: path("M 0,0 0,60 80,60 80,0 Z M 40,30 40,30 40,30 40,30 Z");
    }
}

@keyframes framingOut {
    0% {
        d: path("M 0,0 0,60 80,60 80,0 Z M 40,30 40,30 40,30 40,30 Z");
    }

    100% {
        d: path("M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z");
    }
}

/* ── 6. Windscreen Wiper (Folding Fan) ── */
[data-wipe="morph-wiper"][data-state="in"] .morph-path {
    animation-name: wiperIn;
}

[data-wipe="morph-wiper"][data-state="out"] .morph-path {
    animation-name: wiperOut;
}

@keyframes wiperIn {
    0% {
        d: path("M -20 30 L 120 -400 L 120 -400 Z");
    }

    100% {
        d: path("M -20 30 L 120 -400 L 120 460 Z");
    }
}

@keyframes wiperOut {
    0% {
        d: path("M -20 30 L 120 -400 L 120 460 Z");
    }

    100% {
        d: path("M -20 30 L 120 460 L 120 460 Z");
    }
}

[data-wipe="morph-wiper-right"][data-state="in"] .morph-path {
    animation-name: wiperRightIn;
}

[data-wipe="morph-wiper-right"][data-state="out"] .morph-path {
    animation-name: wiperRightOut;
}

@keyframes wiperRightIn {
    0% {
        d: path("M 100 30 L -40 460 L -40 460 Z");
    }

    100% {
        d: path("M 100 30 L -40 460 L -40 -400 Z");
    }
}

@keyframes wiperRightOut {
    0% {
        d: path("M 100 30 L -40 460 L -40 -400 Z");
    }

    100% {
        d: path("M 100 30 L -40 -400 L -40 -400 Z");
    }
}

[data-wipe="morph-wiper-top"][data-state="in"] .morph-path {
    animation-name: wiperTopIn;
}

[data-wipe="morph-wiper-top"][data-state="out"] .morph-path {
    animation-name: wiperTopOut;
}

@keyframes wiperTopIn {
    0% {
        d: path("M 40 80 L -400 -20 L -400 -20 Z");
    }

    100% {
        d: path("M 40 80 L -400 -20 L 480 -20 Z");
    }
}

@keyframes wiperTopOut {
    0% {
        d: path("M 40 80 L -400 -20 L 480 -20 Z");
    }

    100% {
        d: path("M 40 80 L 480 -20 L 480 -20 Z");
    }
}

[data-wipe="morph-wiper-bot"][data-state="in"] .morph-path {
    animation-name: wiperBotIn;
}

[data-wipe="morph-wiper-bot"][data-state="out"] .morph-path {
    animation-name: wiperBotOut;
}

@keyframes wiperBotIn {
    0% {
        d: path("M 40 -20 L 480 80 L 480 80 Z");
    }

    100% {
        d: path("M 40 -20 L 480 80 L -400 80 Z");
    }
}

@keyframes wiperBotOut {
    0% {
        d: path("M 40 -20 L 480 80 L -400 80 Z");
    }

    100% {
        d: path("M 40 -20 L -400 80 L -400 80 Z");
    }
}


/* ── 7. Folding ── */
[data-wipe="morph-origami"] .morph-path {
    fill-rule: evenodd;
}

[data-wipe="morph-origami"][data-state="in"] .morph-path {
    animation-name: foldingIn;
}

[data-wipe="morph-origami"][data-state="out"] .morph-path {
    animation-name: foldingOut;
}

@keyframes foldingIn {
    0% {
        d: path("M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 120 30 L 40 100 L -40 30 Z");
    }

    100% {
        d: path("M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 40 30 L 40 100 L 40 30 Z");
    }
}

@keyframes foldingOut {
    0% {
        d: path("M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 40 30 L 40 100 L 40 30 Z");
    }

    100% {
        d: path("M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 120 30 L 40 100 L -40 30 Z");
    }
}


/* ── Prevent Flash on Page Enter ── */
#diviglide-overlay.is-placeholder [data-wipe^="morph-"] .morph-path {
    animation: none !important;
}

/* ── TILES & GRIDS ── */
.tiles-h,
.tiles-v,
.slides-h,
.slides-v,
.curtain-flip {
    display: flex;
    height: 100%;
    width: 100%;
}

.tiles-h {
    flex-direction: column;
}

.tiles-v,
.curtain-flip {
    flex-direction: row;
}

.slides-h,
.slides-v {
    position: relative;
}

/* Tile H */
[data-wipe="tile-item"] {
    flex: 1;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size var(--time-duration) var(--diviglide-easing);
    margin-bottom: -1px;
}

[data-wipe="tile-item"]:nth-child(even) {
    background-position: right center;
}

[data-wipe="tile-item"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="tile-item"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-item"][data-state="out"] {
    background-size: 0% 100%;
}

/* Tile V */
[data-wipe="tile-v-item"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to bottom, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: center top;
    transition: background-size var(--time-duration) var(--diviglide-easing);
}

[data-wipe="tile-v-item"]:nth-child(even) {
    background-position: center bottom;
}

[data-wipe="tile-v-item"][data-state=""] {
    background-size: 100% 0%;
}

[data-wipe="tile-v-item"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-v-item"][data-state="out"] {
    background-size: 100% 0%;
}

/* Curtain Flip */
[data-wipe="curtain-item"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size var(--time-duration) var(--diviglide-easing), background-position 0s;
}

[data-wipe="curtain-item"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="curtain-item"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="curtain-item"][data-state="out"] {
    background-position: right center;
    background-size: 0% 100%;
}

/* Curtain Flip 2 */
[data-wipe="curtain-item-2"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size var(--time-duration) var(--diviglide-easing), background-position 0s;
}

[data-wipe="curtain-item-2"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="curtain-item-2"][data-state="in"] {
    background-position: right center;
    background-size: 100% 100%;
}

[data-wipe="curtain-item-2"][data-state="out"] {
    background-size: 0% 100%;
}

/* Curtain Flip 3 */
[data-wipe="curtain-item-3"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size var(--time-duration) var(--diviglide-easing), background-position 0s;
}

[data-wipe="curtain-item-3"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="curtain-item-3"][data-state="in"] {
    background-position: left center;
    background-size: 100% 100%;
}

[data-wipe="curtain-item-3"][data-state="out"] {
    background-size: 0% 100%;
}

/* Curtain Flip 4 */
[data-wipe="curtain-item-4"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: right center;
    transition: background-size var(--time-duration) var(--diviglide-easing), background-position 0s;
}

[data-wipe="curtain-item-4"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="curtain-item-4"][data-state="in"] {
    background-position: right center;
    background-size: 100% 100%;
}

[data-wipe="curtain-item-4"][data-state="out"] {
    background-size: 0% 100%;
}

/* Slides Layer H */
[data-wipe="slide-h-layer"] {
    position: absolute;
    inset: 0;
    background-color: var(--color-option, #fff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--time-duration) var(--diviglide-easing) !important;
    filter: brightness(40%);
    z-index: 1;
}

[data-wipe="slide-h-layer"]:nth-child(2) {
    filter: brightness(70%);
    z-index: 2;
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-h-layer"]:nth-child(3) {
    filter: brightness(100%);
    z-index: 3;
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-h-layer"][data-state="out"]:nth-child(1) {
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-h-layer"][data-state="out"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-h-layer"][data-state="out"]:nth-child(3) {
    transition-delay: 0s;
}

[data-wipe="slide-h-layer"][data-state=""] {
    transform: scaleX(0);
}

[data-wipe="slide-h-layer"][data-state="in"] {
    transform: scaleX(1);
}

[data-wipe="slide-h-layer"][data-state="out"] {
    transform: scaleX(0);
    transform-origin: right;
}

/* Slides Layer V */
[data-wipe="slide-v-layer"] {
    position: absolute;
    inset: 0;
    background-color: var(--color-option, #fff);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--time-duration) var(--diviglide-easing) !important;
    filter: brightness(40%);
    z-index: 1;
}

[data-wipe="slide-v-layer"]:nth-child(2) {
    filter: brightness(70%);
    z-index: 2;
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-v-layer"]:nth-child(3) {
    filter: brightness(100%);
    z-index: 3;
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-v-layer"][data-state="out"]:nth-child(1) {
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-v-layer"][data-state="out"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-v-layer"][data-state="out"]:nth-child(3) {
    transition-delay: 0s;
}

[data-wipe="slide-v-layer"][data-state=""] {
    transform: scaleY(0);
}

[data-wipe="slide-v-layer"][data-state="in"] {
    transform: scaleY(1);
}

[data-wipe="slide-v-layer"][data-state="out"] {
    transform: scaleY(0);
    transform-origin: bottom;
}

/* Square Grid */
.square-grid {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0;
}

[data-wipe="grid-item"] {
    background-color: var(--color-option, #fff);
    opacity: 0;
    transition: opacity calc(var(--time-duration) / 3) var(--diviglide-easing);
    transform: scale(1.005);
    will-change: opacity;
}

[data-wipe="grid-item"][data-state=""] {
    opacity: 0;
}

[data-wipe="grid-item"][data-state="in"] {
    opacity: 1;
}

[data-wipe="grid-item"][data-state="out"] {
    opacity: 0;
}

/* Delays Setup */
[data-wipe="tile-item"]:nth-child(2),
[data-wipe="tile-v-item"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="tile-item"]:nth-child(3),
[data-wipe="tile-v-item"]:nth-child(3) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="tile-item"]:nth-child(4),
[data-wipe="tile-v-item"]:nth-child(4) {
    transition-delay: calc(var(--time-duration) * 0.18);
}

[data-wipe="tile-item"]:nth-child(5),
[data-wipe="tile-v-item"]:nth-child(5) {
    transition-delay: calc(var(--time-duration) * 0.24);
}

[data-wipe="tile-item"]:nth-child(6),
[data-wipe="tile-v-item"]:nth-child(6) {
    transition-delay: calc(var(--time-duration) * 0.30);
}

[data-wipe="tile-item"]:nth-child(7),
[data-wipe="tile-v-item"]:nth-child(7) {
    transition-delay: calc(var(--time-duration) * 0.36);
}

[data-wipe="tile-item"]:nth-child(8),
[data-wipe="tile-v-item"]:nth-child(8) {
    transition-delay: calc(var(--time-duration) * 0.42);
}

[data-wipe="grid-item"]:nth-child(6n+2) {
    transition-delay: calc(var(--time-duration) * 0.03);
}

[data-wipe="grid-item"]:nth-child(6n+3) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="grid-item"]:nth-child(6n+4) {
    transition-delay: calc(var(--time-duration) * 0.09);
}

[data-wipe="grid-item"]:nth-child(6n+5) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="grid-item"]:nth-child(6n) {
    transition-delay: calc(var(--time-duration) * 0.15);
}

[data-wipe="grid-item-2"]:nth-child(6n+1) {
    transition-delay: calc(var(--time-duration) * 0.15);
}

[data-wipe="grid-item-2"]:nth-child(6n+2) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="grid-item-2"]:nth-child(6n+3) {
    transition-delay: calc(var(--time-duration) * 0.09);
}

[data-wipe="grid-item-2"]:nth-child(6n+4) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="grid-item-2"]:nth-child(6n+5) {
    transition-delay: calc(var(--time-duration) * 0.03);
}

[data-wipe="grid-item-2"]:nth-child(6n) {
    transition-delay: 0s;
}

[data-wipe="grid-item-3"]:nth-child(n+1):nth-child(-n+6) {
    transition-delay: 0s;
}

[data-wipe="grid-item-3"]:nth-child(n+7):nth-child(-n+12) {
    transition-delay: calc(var(--time-duration) * 0.03);
}

[data-wipe="grid-item-3"]:nth-child(n+13):nth-child(-n+18) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="grid-item-3"]:nth-child(n+19):nth-child(-n+24) {
    transition-delay: calc(var(--time-duration) * 0.09);
}

[data-wipe="grid-item-3"]:nth-child(n+25):nth-child(-n+30) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="grid-item-3"]:nth-child(n+31):nth-child(-n+36) {
    transition-delay: calc(var(--time-duration) * 0.15);
}

[data-wipe="grid-item-4"]:nth-child(n+31):nth-child(-n+36) {
    transition-delay: 0s;
}

[data-wipe="grid-item-4"]:nth-child(n+25):nth-child(-n+30) {
    transition-delay: calc(var(--time-duration) * 0.03);
}

[data-wipe="grid-item-4"]:nth-child(n+19):nth-child(-n+24) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="grid-item-4"]:nth-child(n+13):nth-child(-n+18) {
    transition-delay: calc(var(--time-duration) * 0.09);
}

[data-wipe="grid-item-4"]:nth-child(n+7):nth-child(-n+12) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="grid-item-4"]:nth-child(n+1):nth-child(-n+6) {
    transition-delay: calc(var(--time-duration) * 0.15);
}

/* Square Grid 2 */
[data-wipe="grid-item-2"] {
    background-color: var(--color-option, #fff);
    opacity: 0;
    transition: opacity calc(var(--time-duration) / 3) var(--diviglide-easing);
    transform: scale(1.005);
    will-change: opacity;
}

[data-wipe="grid-item-2"][data-state=""] {
    opacity: 0;
}

[data-wipe="grid-item-2"][data-state="in"] {
    opacity: 1;
}

[data-wipe="grid-item-2"][data-state="out"] {
    opacity: 0;
}

/* Square Grid 3 */
[data-wipe="grid-item-3"] {
    background-color: var(--color-option, #fff);
    opacity: 0;
    transition: opacity calc(var(--time-duration) / 3) var(--diviglide-easing);
    transform: scale(1.005);
    will-change: opacity;
}

[data-wipe="grid-item-3"][data-state=""] {
    opacity: 0;
}

[data-wipe="grid-item-3"][data-state="in"] {
    opacity: 1;
}

[data-wipe="grid-item-3"][data-state="out"] {
    opacity: 0;
}

/* Square Grid 4 */
[data-wipe="grid-item-4"] {
    background-color: var(--color-option, #fff);
    opacity: 0;
    transition: opacity calc(var(--time-duration) / 3) var(--diviglide-easing);
    transform: scale(1.005);
    will-change: opacity;
}

[data-wipe="grid-item-4"][data-state=""] {
    opacity: 0;
}

[data-wipe="grid-item-4"][data-state="in"] {
    opacity: 1;
}

[data-wipe="grid-item-4"][data-state="out"] {
    opacity: 0;
}

/* Tile H 2 */
[data-wipe="tile-item-2"] {
    flex: 1;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size var(--time-duration) var(--diviglide-easing);
    margin-bottom: -1px;
}

[data-wipe="tile-item-2"]:nth-child(odd) {
    background-position: left center;
}

[data-wipe="tile-item-2"]:nth-child(odd)[data-state="out"] {
    background-position: right center;
}

[data-wipe="tile-item-2"]:nth-child(even) {
    background-position: right center;
}

[data-wipe="tile-item-2"]:nth-child(even)[data-state="out"] {
    background-position: left center;
}

[data-wipe="tile-item-2"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="tile-item-2"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-item-2"][data-state="out"] {
    background-size: 0% 100%;
}

/* Tile H 3 */
[data-wipe="tile-item-3"] {
    flex: 1;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: right center;
    transition: background-size var(--time-duration) var(--diviglide-easing);
    margin-bottom: -1px;
}

[data-wipe="tile-item-3"]:nth-child(even) {
    background-position: right center;
}

[data-wipe="tile-item-3"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="tile-item-3"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-item-3"][data-state="out"] {
    background-size: 0% 100%;
}

/* Tile H 4 */
[data-wipe="tile-item-4"] {
    flex: 1;
    background-image: linear-gradient(to right, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size var(--time-duration) var(--diviglide-easing);
    margin-bottom: -1px;
}

[data-wipe="tile-item-4"]:nth-child(even) {
    background-position: left center;
}

[data-wipe="tile-item-4"][data-state=""] {
    background-size: 0% 100%;
}

[data-wipe="tile-item-4"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-item-4"][data-state="out"] {
    background-size: 0% 100%;
}

/* Tile V 2 */
[data-wipe="tile-v-item-2"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to bottom, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 100% 0%;
    background-repeat: no-repeat;
    transition: background-size var(--time-duration) var(--diviglide-easing);
}

[data-wipe="tile-v-item-2"]:nth-child(odd) {
    background-position: center top;
}

[data-wipe="tile-v-item-2"]:nth-child(odd)[data-state="out"] {
    background-position: center bottom;
}

[data-wipe="tile-v-item-2"]:nth-child(even) {
    background-position: center bottom;
}

[data-wipe="tile-v-item-2"]:nth-child(even)[data-state="out"] {
    background-position: center top;
}

[data-wipe="tile-v-item-2"][data-state=""] {
    background-size: 100% 0%;
}

[data-wipe="tile-v-item-2"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-v-item-2"][data-state="out"] {
    background-size: 100% 0%;
}

/* Tile V 3 */
[data-wipe="tile-v-item-3"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to bottom, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: center top;
    transition: background-size var(--time-duration) var(--diviglide-easing);
}

[data-wipe="tile-v-item-3"]:nth-child(even) {
    background-position: center top;
}

[data-wipe="tile-v-item-3"][data-state=""] {
    background-size: 100% 0%;
}

[data-wipe="tile-v-item-3"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-v-item-3"][data-state="out"] {
    background-size: 100% 0%;
}

/* Tile V 4 */
[data-wipe="tile-v-item-4"] {
    flex: 1;
    margin-right: -1px;
    background-image: linear-gradient(to bottom, var(--color-option, #fff), var(--color-option, #fff));
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size var(--time-duration) var(--diviglide-easing);
}

[data-wipe="tile-v-item-4"]:nth-child(even) {
    background-position: center bottom;
}

[data-wipe="tile-v-item-4"][data-state=""] {
    background-size: 100% 0%;
}

[data-wipe="tile-v-item-4"][data-state="in"] {
    background-size: 100% 100%;
}

[data-wipe="tile-v-item-4"][data-state="out"] {
    background-size: 100% 0%;
}

/* Slides Layer H 2 */
[data-wipe="slide-h-layer-2"] {
    position: absolute;
    inset: 0;
    background-color: var(--color-option, #fff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--time-duration) var(--diviglide-easing) !important;
    filter: brightness(40%);
    z-index: 1;
}

[data-wipe="slide-h-layer-2"]:nth-child(2) {
    filter: brightness(70%);
    z-index: 2;
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-h-layer-2"]:nth-child(3) {
    filter: brightness(100%);
    z-index: 3;
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-h-layer-2"][data-state="out"]:nth-child(1) {
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-h-layer-2"][data-state="out"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-h-layer-2"][data-state="out"]:nth-child(3) {
    transition-delay: 0s;
}

[data-wipe="slide-h-layer-2"][data-state=""] {
    transform: scaleX(0);
}

[data-wipe="slide-h-layer-2"][data-state="in"] {
    transform: scaleX(1);
    transform-origin: right;
}

[data-wipe="slide-h-layer-2"][data-state="out"] {
    transform: scaleX(0);
    transform-origin: left;
}

/* Slides Layer V 2 */
[data-wipe="slide-v-layer-2"] {
    position: absolute;
    inset: 0;
    background-color: var(--color-option, #fff);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--time-duration) var(--diviglide-easing) !important;
    filter: brightness(40%);
    z-index: 1;
}

[data-wipe="slide-v-layer-2"]:nth-child(2) {
    filter: brightness(70%);
    z-index: 2;
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-v-layer-2"]:nth-child(3) {
    filter: brightness(100%);
    z-index: 3;
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-v-layer-2"][data-state="out"]:nth-child(1) {
    transition-delay: calc(var(--time-duration) * 0.20) !important;
}

[data-wipe="slide-v-layer-2"][data-state="out"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.10) !important;
}

[data-wipe="slide-v-layer-2"][data-state="out"]:nth-child(3) {
    transition-delay: 0s;
}

[data-wipe="slide-v-layer-2"][data-state=""] {
    transform: scaleY(0);
}

[data-wipe="slide-v-layer-2"][data-state="in"] {
    transform: scaleY(1);
    transform-origin: bottom;
}

[data-wipe="slide-v-layer-2"][data-state="out"] {
    transform: scaleY(0);
    transform-origin: top;
}

/* New Setup Delays */
[data-wipe="tile-item-2"]:nth-child(2),
[data-wipe="tile-item-3"]:nth-child(2),
[data-wipe="tile-item-4"]:nth-child(2),
[data-wipe="tile-v-item-2"]:nth-child(2),
[data-wipe="tile-v-item-3"]:nth-child(2),
[data-wipe="tile-v-item-4"]:nth-child(2) {
    transition-delay: calc(var(--time-duration) * 0.06);
}

[data-wipe="tile-item-2"]:nth-child(3),
[data-wipe="tile-item-3"]:nth-child(3),
[data-wipe="tile-item-4"]:nth-child(3),
[data-wipe="tile-v-item-2"]:nth-child(3),
[data-wipe="tile-v-item-3"]:nth-child(3),
[data-wipe="tile-v-item-4"]:nth-child(3) {
    transition-delay: calc(var(--time-duration) * 0.12);
}

[data-wipe="tile-item-2"]:nth-child(4),
[data-wipe="tile-item-3"]:nth-child(4),
[data-wipe="tile-item-4"]:nth-child(4),
[data-wipe="tile-v-item-2"]:nth-child(4),
[data-wipe="tile-v-item-3"]:nth-child(4),
[data-wipe="tile-v-item-4"]:nth-child(4) {
    transition-delay: calc(var(--time-duration) * 0.18);
}

[data-wipe="tile-item-2"]:nth-child(5),
[data-wipe="tile-item-3"]:nth-child(5),
[data-wipe="tile-item-4"]:nth-child(5),
[data-wipe="tile-v-item-2"]:nth-child(5),
[data-wipe="tile-v-item-3"]:nth-child(5),
[data-wipe="tile-v-item-4"]:nth-child(5) {
    transition-delay: calc(var(--time-duration) * 0.24);
}

[data-wipe="tile-item-2"]:nth-child(6),
[data-wipe="tile-item-3"]:nth-child(6),
[data-wipe="tile-item-4"]:nth-child(6),
[data-wipe="tile-v-item-2"]:nth-child(6),
[data-wipe="tile-v-item-3"]:nth-child(6),
[data-wipe="tile-v-item-4"]:nth-child(6) {
    transition-delay: calc(var(--time-duration) * 0.30);
}

[data-wipe="tile-item-2"]:nth-child(7),
[data-wipe="tile-item-3"]:nth-child(7),
[data-wipe="tile-item-4"]:nth-child(7),
[data-wipe="tile-v-item-2"]:nth-child(7),
[data-wipe="tile-v-item-3"]:nth-child(7),
[data-wipe="tile-v-item-4"]:nth-child(7) {
    transition-delay: calc(var(--time-duration) * 0.36);
}

[data-wipe="tile-item-2"]:nth-child(8),
[data-wipe="tile-item-3"]:nth-child(8),
[data-wipe="tile-item-4"]:nth-child(8),
[data-wipe="tile-v-item-2"]:nth-child(8),
[data-wipe="tile-v-item-3"]:nth-child(8),
[data-wipe="tile-v-item-4"]:nth-child(8) {
    transition-delay: calc(var(--time-duration) * 0.42);
}