/**
 * Pixel Pattern canvas styles, shared by the frontend and Visual Builder.
 */
.pixel_pattern_module {
    position: relative;
    isolation: isolate;
}

.pixel_pattern_module .pixel-pattern-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--pp-height, 320px);
    isolation: isolate;
    overflow: visible;
    background-color: var(--pp-base, #120f26);
}

/* Clip pattern artwork without clipping native Divi Row shadows,
   transforms, sticky elements or positioned child content. */
.pixel_pattern_module .pixel-pattern-visual-layers {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    pointer-events: none;
}

.pixel_pattern_module .pixel-pattern-surface,
.pixel_pattern_module .pixel-pattern-overlay,
.pixel_pattern_module .pixel-pattern-motion-glow {
    position: absolute;
    pointer-events: none;
}

.pixel_pattern_module .pixel-pattern-surface {
    z-index: 0;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pixel_pattern_module .pixel-pattern-overlay {
    z-index: 1;
    inset: -70%;
    background-position: center;
    background-repeat: repeat;
    transform: rotate(var(--pp-rotation, 0deg));
    will-change: auto;
}

.pixel_pattern_module .pixel-pattern-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    text-align: initial;
    pointer-events: auto;
}

/* Retain the original spacing for pages saved with the legacy text fields. */
.pixel_pattern_module .pixel-pattern-has-legacy-content .pixel-pattern-content {
    max-width: 960px;
    margin-inline: auto;
    padding: clamp(24px, 5vw, 72px);
    text-align: center;
}

.pixel_pattern_module .pixel_pattern_title {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.13;
}

.pixel_pattern_module .pixel_pattern_body {
    color: rgba(255, 255, 255, 0.87);
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.6;
}

.pixel_pattern_module .pixel-pattern-theme-light .pixel_pattern_title {
    color: #1a2637;
}

.pixel_pattern_module .pixel-pattern-theme-light .pixel_pattern_body {
    color: #344254;
}

.pixel_pattern_module .pixel-pattern-motion-drift .pixel-pattern-overlay {
    animation: pixel-pattern-drift var(--pp-duration, 24s) linear infinite;
}

.pixel_pattern_module .pixel-pattern-motion-pulse .pixel-pattern-surface {
    animation: pixel-pattern-pulse var(--pp-duration, 24s) ease-in-out infinite;
}

.pixel_pattern_module .pixel-pattern-motion-float .pixel-pattern-surface {
    animation: pixel-pattern-surface-float var(--pp-duration, 24s) ease-in-out infinite;
}

@keyframes pixel-pattern-drift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 240px 160px;
    }
}

@keyframes pixel-pattern-surface-float {
    0%, 100% { transform: translate3d(-3%, 2%, 0) scale(1.11); }
    50% { transform: translate3d(3%, -3%, 0) scale(1.11); }
}

@keyframes pixel-pattern-pulse {
    0%, 100% { filter: saturate(0.78) brightness(0.77); }
    50% { filter: saturate(1.22) brightness(1.26); }
}

@media (prefers-reduced-motion: reduce) {
    .pixel_pattern_module .pixel-pattern-overlay,
    .pixel_pattern_module .pixel-pattern-surface {
        animation: none !important;
    }
}

/* Native Divi children are edited in the Pixel Pattern content canvas. */
/* Row-style defaults apply to the real Divi nested-content element,
   not just the builder's empty placeholder. The deliberately low-specificity
   fallback allows the native Divi Sizing controls to override width/max-width
   without !important, including responsive and hover states. */
:where(.pixel_pattern_module) :where(.pixel-pattern-nested-content),
.pixel_pattern_module .pixel-pattern-row-custom .pixel-pattern-nested-content {
    position: relative;
    box-sizing: border-box;
    width: var(--pp-row-width-desktop, 80%);
    max-width: var(--pp-row-max-width-desktop, 1080px);
    min-width: 0;
    min-height: var(--pp-row-min-height-desktop, 0px);
    height: var(--pp-row-height-desktop, auto);
    max-height: var(--pp-row-max-height-desktop, none);
    padding: var(--pp-row-padding-desktop, 0px);
    margin-left: var(--pp-row-margin-left-desktop, auto);
    margin-right: var(--pp-row-margin-right-desktop, auto);
    margin-top: var(--pp-row-margin-top-desktop, 0px);
    margin-bottom: var(--pp-row-margin-bottom-desktop, 0px);
    background-color: var(--pp-row-background-desktop, transparent);
    border: var(--pp-row-border-width-desktop, 0px) solid var(--pp-row-border-color-desktop, transparent);
    border-radius: var(--pp-row-border-radius-desktop, 0px);
    box-shadow: var(--pp-row-shadow-desktop, none);
    text-align: initial;
}

/* Tablet and phone values inherit the last explicitly saved breakpoint. */
@media (max-width: 980px) {
    :where(.pixel_pattern_module) :where(.pixel-pattern-nested-content),
.pixel_pattern_module .pixel-pattern-row-custom .pixel-pattern-nested-content {
        width: var(--pp-row-width-tablet, var(--pp-row-width-desktop, 80%));
        max-width: var(--pp-row-max-width-tablet, var(--pp-row-max-width-desktop, 1080px));
        min-height: var(--pp-row-min-height-tablet, var(--pp-row-min-height-desktop, 0px));
        height: var(--pp-row-height-tablet, var(--pp-row-height-desktop, auto));
        max-height: var(--pp-row-max-height-tablet, var(--pp-row-max-height-desktop, none));
        padding: var(--pp-row-padding-tablet, var(--pp-row-padding-desktop, 0px));
        margin-left: var(--pp-row-margin-left-tablet, var(--pp-row-margin-left-desktop, auto));
        margin-right: var(--pp-row-margin-right-tablet, var(--pp-row-margin-right-desktop, auto));
        margin-top: var(--pp-row-margin-top-tablet, var(--pp-row-margin-top-desktop, 0px));
        margin-bottom: var(--pp-row-margin-bottom-tablet, var(--pp-row-margin-bottom-desktop, 0px));
        background-color: var(--pp-row-background-tablet, var(--pp-row-background-desktop, transparent));
        border-width: var(--pp-row-border-width-tablet, var(--pp-row-border-width-desktop, 0px));
        border-color: var(--pp-row-border-color-tablet, var(--pp-row-border-color-desktop, transparent));
        border-radius: var(--pp-row-border-radius-tablet, var(--pp-row-border-radius-desktop, 0px));
        box-shadow: var(--pp-row-shadow-tablet, var(--pp-row-shadow-desktop, none));
    }
}
@media (max-width: 767px) {
    :where(.pixel_pattern_module) :where(.pixel-pattern-nested-content),
.pixel_pattern_module .pixel-pattern-row-custom .pixel-pattern-nested-content {
        width: var(--pp-row-width-phone, var(--pp-row-width-tablet, var(--pp-row-width-desktop, 80%)));
        max-width: var(--pp-row-max-width-phone, var(--pp-row-max-width-tablet, var(--pp-row-max-width-desktop, 1080px)));
        min-height: var(--pp-row-min-height-phone, var(--pp-row-min-height-tablet, var(--pp-row-min-height-desktop, 0px)));
        height: var(--pp-row-height-phone, var(--pp-row-height-tablet, var(--pp-row-height-desktop, auto)));
        max-height: var(--pp-row-max-height-phone, var(--pp-row-max-height-tablet, var(--pp-row-max-height-desktop, none)));
        padding: var(--pp-row-padding-phone, var(--pp-row-padding-tablet, var(--pp-row-padding-desktop, 0px)));
        margin-left: var(--pp-row-margin-left-phone, var(--pp-row-margin-left-tablet, var(--pp-row-margin-left-desktop, auto)));
        margin-right: var(--pp-row-margin-right-phone, var(--pp-row-margin-right-tablet, var(--pp-row-margin-right-desktop, auto)));
        margin-top: var(--pp-row-margin-top-phone, var(--pp-row-margin-top-tablet, var(--pp-row-margin-top-desktop, 0px)));
        margin-bottom: var(--pp-row-margin-bottom-phone, var(--pp-row-margin-bottom-tablet, var(--pp-row-margin-bottom-desktop, 0px)));
        background-color: var(--pp-row-background-phone, var(--pp-row-background-tablet, var(--pp-row-background-desktop, transparent)));
        border-width: var(--pp-row-border-width-phone, var(--pp-row-border-width-tablet, var(--pp-row-border-width-desktop, 0px)));
        border-color: var(--pp-row-border-color-phone, var(--pp-row-border-color-tablet, var(--pp-row-border-color-desktop, transparent)));
        border-radius: var(--pp-row-border-radius-phone, var(--pp-row-border-radius-tablet, var(--pp-row-border-radius-desktop, 0px)));
        box-shadow: var(--pp-row-shadow-phone, var(--pp-row-shadow-tablet, var(--pp-row-shadow-desktop, none)));
    }
}

/* v1.0.11: A native Row must own its width, height and alignment.
   Release only the wrapper's default 80%/1080px limit. Do not apply
   !important: the actual nested-content Divi settings must remain editable.
   Scope this to direct Row children to avoid altering unrelated layouts. */
.pixel_pattern_module .pixel-pattern-nested-content:has(> .et_pb_row) {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* Divi deliberately sets nested Row Max Width to "none" by default.
   Offer Pixel Pattern a standard 1080px visual fallback, without changing
   Divi's global Row defaults or modifying saved attributes. Using :where()
   keeps the rule at normal Row-class specificity, so later Divi-generated
   styles for explicit values (e.g. 1440px, 80%, or none) win. */
:where(.pixel_pattern_module .pixel-pattern-nested-content) > .et_pb_row {
    max-width: 1080px;
}

/* Let Divi apply each native child's Sizing/Spacing/Max Width controls.
   Do not override the max-width of rows or other inserted containers. */
.pixel_pattern_module .pixel-pattern-nested-content > * {
    min-width: 0;
}

/* Canvas-only empty state. The button invokes Divi's onAddElement API. */
/* The empty state fills the 80%-width native design wrapper; nesting two
   80% widths would shrink the first-insert target to 64% of the canvas. */
.pixel_pattern_module .pixel-pattern-empty-design {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 68px;
    margin: 0 auto;
    border: 1px solid #00c6b1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.pixel_pattern_module .pixel-pattern-add-design {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #00bfa6;
    color: #fff;
    font: 700 19px/1 sans-serif;
    cursor: pointer;
}

.pixel_pattern_module .pixel-pattern-add-design:hover,
.pixel_pattern_module .pixel-pattern-add-design:focus-visible {
    background: #008f84;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Motion is independent of the selected preset's grid/overlay artwork.
   Gradient-only presets have no grid layer to animate, so we give them the
   same subtle lighting surface. This layer is inert for None/Slow Drift. */
.pixel_pattern_module .pixel-pattern-motion-glow {
    z-index: 1;
    inset: -12%;
    background: radial-gradient(ellipse 36% 45% at 32% 45%, var(--pp-primary), transparent 92%),
                radial-gradient(ellipse 36% 46% at 72% 62%, var(--pp-secondary), transparent 92%);
    background-repeat: no-repeat;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: auto;
}

.pixel_pattern_module .pixel-pattern-motion-pulse .pixel-pattern-motion-glow {
    animation: pixel-pattern-breathing var(--pp-duration, 24s) ease-in-out infinite;
    will-change: transform, opacity;
}

.pixel_pattern_module .pixel-pattern-motion-float .pixel-pattern-motion-glow {
    animation: pixel-pattern-gentle-float var(--pp-duration, 24s) ease-in-out infinite;
    will-change: transform, opacity;
}

/* Two distinct peaks per duration make feedback visible in the builder even
   when the user keeps the original 24-second duration setting. */
@keyframes pixel-pattern-breathing {
    0%, 50%, 100% { opacity: 0.10; transform: scale(0.79); }
    25%, 75% { opacity: 0.96; transform: scale(1.23); }
}

@keyframes pixel-pattern-gentle-float {
    0%, 100% { opacity: 0.80; transform: translate3d(-13%, 9%, 0) scale(1.13); }
    25% { opacity: 0.97; transform: translate3d(11%, -7%, 0) scale(1.15); }
    50% { opacity: 0.82; transform: translate3d(15%, 8%, 0) scale(1.09); }
    75% { opacity: 0.98; transform: translate3d(-10%, -8%, 0) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    .pixel_pattern_module .pixel-pattern-motion-glow {
        animation: none !important;
        opacity: 0 !important;
    }
    .pixel_pattern_module .pixel-pattern-surface {
        animation: none !important;
    }
}

/* 1.0.7: Extend the v1.0.6 motion engine without touching its three
   existing animations. Native Divi children remain fully editable. */
.pixel_pattern_module .pixel-pattern-motion-spin .pixel-pattern-overlay {
    animation: pixel-pattern-spin var(--pp-duration, 24s) linear infinite;
    transform-origin: 50% 50%;
}
.pixel_pattern_module .pixel-pattern-motion-spin .pixel-pattern-surface {
    animation: pixel-pattern-slow-hue var(--pp-duration, 24s) linear infinite;
}
.pixel_pattern_module .pixel-pattern-motion-pulse-content .pixel-pattern-content {
    animation: pixel-pattern-content-pulse var(--pp-duration, 24s) ease-in-out infinite;
}
.pixel_pattern_module .pixel-pattern-motion-fade-up .pixel-pattern-content {
    animation: pixel-pattern-fade-up var(--pp-quick, .75s) ease-out both;
}
.pixel_pattern_module .pixel-pattern-motion-scale-in .pixel-pattern-content {
    animation: pixel-pattern-scale-in var(--pp-quick, .75s) ease-out both;
}
.pixel_pattern_module .pixel-pattern-motion-slide-over .pixel-pattern-content {
    animation: pixel-pattern-slide-over var(--pp-quick, .75s) ease-out both;
}
.pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > * {
    animation: pixel-pattern-fade-up var(--pp-quick, .75s) ease-out both;
}
.pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > :nth-child(2) { animation-delay: .12s; }
.pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > :nth-child(3) { animation-delay: .24s; }
.pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > :nth-child(4) { animation-delay: .36s; }
.pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > :nth-child(n+5) { animation-delay: .48s; }
.pixel_pattern_module .pixel-pattern-motion-pop-bounce:hover .pixel-pattern-content,
.pixel_pattern_module .pixel-pattern-motion-pop-bounce:focus-within .pixel-pattern-content {
    animation: pixel-pattern-pop var(--pp-quick, .75s) cubic-bezier(.18, .9, .32, 1.4) both;
}
.pixel_pattern_module .pixel-pattern-motion-fill .pixel-pattern-motion-glow {
    background: radial-gradient(circle closest-side at var(--pp-pointer-x, 50%) var(--pp-pointer-y, 50%), var(--pp-primary), transparent);
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transform: scale(.1);
    transition: transform var(--pp-quick, .75s) ease-out, opacity var(--pp-quick, .75s) ease-out;
}
.pixel_pattern_module .pixel-pattern-motion-fill:hover .pixel-pattern-motion-glow,
.pixel_pattern_module .pixel-pattern-motion-fill:focus-within .pixel-pattern-motion-glow {
    opacity: .78;
    transform: scale(4);
}
.pixel_pattern_module .pixel-pattern-motion-magnetic .pixel-pattern-content {
    transform: translate3d(var(--pp-magnetic-x, 0px), var(--pp-magnetic-y, 0px), 0);
    transition: transform .22s ease-out;
}
.pixel_pattern_module .pixel-pattern-motion-morph {
    border-radius: 0;
    transition: border-radius var(--pp-quick, .75s) ease-in-out;
}
.pixel_pattern_module .pixel-pattern-motion-morph:hover,
.pixel_pattern_module .pixel-pattern-motion-morph:focus-within {
    border-radius: 12% 4% 12% 4%;
}
.pixel_pattern_module .pixel-pattern-motion-shimmer .pixel-pattern-visual-layers::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.28) 50%, transparent 72%);
    background-size: 250% 100%;
    animation: pixel-pattern-shimmer var(--pp-duration, 24s) linear infinite;
}
/* Single-track marquee: native child markup is never duplicated, so Divi
   editing, IDs, and keyboard controls remain attached to the original child. */
.pixel_pattern_module .pixel-pattern-motion-marquee .pixel-pattern-nested-content {
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
    animation: pixel-pattern-marquee var(--pp-duration, 24s) linear infinite;
}
.pixel_pattern_module .pixel-pattern-motion-marquee:hover .pixel-pattern-nested-content,
.pixel_pattern_module .pixel-pattern-motion-marquee:focus-within .pixel-pattern-nested-content {
    animation-play-state: paused;
}
.pixel_pattern_module .pixel-pattern-motion-blink .pixel-pattern-visual-layers::before {
    content: '';
    position: absolute;
    z-index: 3;
    right: 20px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    background: var(--pp-line);
    box-shadow: 0 0 18px var(--pp-line);
    animation: pixel-pattern-blink var(--pp-quick, .75s) ease-in-out infinite alternate;
}
.pixel_pattern_module .pixel-pattern-motion-liquid-wave .pixel-pattern-visual-layers::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -50%;
    pointer-events: none;
    border-radius: 38% 62% 49% 51%;
    background: radial-gradient(ellipse at 40% 55%, var(--pp-primary), transparent 55%),
                radial-gradient(ellipse at 65% 45%, var(--pp-secondary), transparent 62%);
    opacity: .55;
    animation: pixel-pattern-liquid var(--pp-duration, 24s) ease-in-out infinite alternate;
}
@keyframes pixel-pattern-spin {
    from { transform: rotate(var(--pp-rotation, 0deg)); }
    to { transform: rotate(calc(var(--pp-rotation, 0deg) + 360deg)); }
}
@keyframes pixel-pattern-slow-hue { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }
@keyframes pixel-pattern-content-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes pixel-pattern-fade-up { from { opacity: 0; transform: translate3d(0, 25px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes pixel-pattern-scale-in { from { opacity: .1; transform: scale(.89); } to { opacity: 1; transform: scale(1); } }
@keyframes pixel-pattern-slide-over { from { opacity: .2; transform: translate3d(-50px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes pixel-pattern-pop { 0% { transform: scale(1); } 48% { transform: scale(1.09); } 75% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes pixel-pattern-shimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }
@keyframes pixel-pattern-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes pixel-pattern-blink { from { opacity: .18; transform: scale(.8); } to { opacity: 1; transform: scale(1.16); } }
@keyframes pixel-pattern-liquid {
    from { transform: translate3d(-6%, 2%, 0) rotate(-6deg) scale(1); border-radius: 38% 62% 49% 51%; }
    to { transform: translate3d(6%, -4%, 0) rotate(12deg) scale(1.1); border-radius: 63% 37% 58% 42%; }
}
/* Reduced motion disables Pixel Pattern's own motion only. Do not clear
   native Divi Row transforms, transitions or explicit design settings. */
@media (prefers-reduced-motion: reduce) {
    .pixel_pattern_module .pixel-pattern-visual-layers::before,
    .pixel_pattern_module .pixel-pattern-overlay,
    .pixel_pattern_module .pixel-pattern-motion-marquee .pixel-pattern-nested-content,
    .pixel_pattern_module .pixel-pattern-motion-stagger .pixel-pattern-nested-content > *,
    .pixel_pattern_module .pixel-pattern-motion-pulse-content .pixel-pattern-content,
    .pixel_pattern_module .pixel-pattern-motion-fade-up .pixel-pattern-content,
    .pixel_pattern_module .pixel-pattern-motion-scale-in .pixel-pattern-content,
    .pixel_pattern_module .pixel-pattern-motion-slide-over .pixel-pattern-content,
    .pixel_pattern_module .pixel-pattern-motion-pop-bounce .pixel-pattern-content {
        animation: none !important;
    }
    .pixel_pattern_module .pixel-pattern-motion-magnetic .pixel-pattern-content {
        transform: none !important;
        transition: none !important;
    }
}