/* ═══════════════════════════════════════════════════════════
   Divi Glide Transitions – v1.5.1 
   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;
    will-change: transform, opacity, filter, clip-path, mask-position, -webkit-mask-position !important;
}

/* 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;
}

/* ── 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; transform: translateY(8px); }
    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; }

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; }

/* ──────────────────────────────────────────────
   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; inset: 0; 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 { 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); }