@font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-900.ttf') format('truetype');
        font-weight: 800;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-100.ttf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-regular.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-300.ttf') format('truetype');
        font-weight: 200;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-500.ttf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-700.ttf') format('truetype');
        font-weight: 600;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-200.ttf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-600.ttf') format('truetype');
        font-weight: 500;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('../resources/fonts/montserrat/montserrat-800.ttf') format('truetype');
        font-weight: 700;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-EDCFB6DA-8E13-40AA-9D76-3BA469AD3264';
        src: url('../resources/fonts/capsule/capsule-gxmr6.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-38964905-1AA7-4FA7-8B25-AA8628B0F45C';
        src: url('../resources/fonts/kasih/kasih.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-bold.otf') format('truetype');
        font-weight: 600;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-bold-italic.otf') format('truetype');
        font-weight: 600;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-medium-italic.otf') format('truetype');
        font-weight: 400;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-medium.otf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-regular-italic.otf') format('truetype');
        font-weight: 300;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-regular.otf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-thin-italic.otf') format('truetype');
        font-weight: 100;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-thin.otf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-black-italic.otf') format('truetype');
        font-weight: 800;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-light.otf') format('truetype');
        font-weight: 200;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-light-italic.otf') format('truetype');
        font-weight: 200;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('../resources/fonts/cera/cera-pro-black.otf') format('truetype');
        font-weight: 800;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-C16A83C6-AEE6-41CE-AF5B-AEBD6D0AA91A';
        src: url('../resources/fonts/ronda/rondaitcbybt-roman.otf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000;}[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder, textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type='checkbox'],[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type='checkbox']{border-radius:0px}[type='radio']{border-radius:100%}[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='checkbox']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='radio']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat;}@media (forced-colors: active) {[type='checkbox']:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }
    .pointer-events-none{pointer-events:none}
    .visible{visibility:visible}
    .static{position:static}
    .fixed{position:fixed}
    .absolute{position:absolute}
    .relative{position:relative}
    .inset-0{inset:0.0rem}
    .right-1{right:0.25rem}
    .z-0{z-index:0}
    .z-30{z-index:30}
    .z-\[0\]{z-index:0}
    .z-\[999999\]{z-index:999999}
    .z-\[99999\]{z-index:99999}
    .mb-0{margin-bottom:0.0rem}
    .mb-3{margin-bottom:0.75rem}
    .mb-auto{margin-bottom:auto}
    .ml-0{margin-left:0.0rem}
    .ml-8{margin-left:2.0rem}
    .ml-auto{margin-left:auto}
    .mr-0{margin-right:0.0rem}
    .mr-auto{margin-right:auto}
    .mt-0{margin-top:0.0rem}
    .mt-1{margin-top:0.25rem}
    .mt-2{margin-top:0.5rem}
    .mt-3{margin-top:0.75rem}
    .mt-auto{margin-top:auto}
    .block{display:block}
    .flex{display:flex}
    .grid{display:grid}
    .hidden{display:none}
    .h-0{height:0.0rem}
    .h-0\.5{height:0.125rem}
    .h-\[100\%\]{height:100%}
    .h-\[60px\]{height:60px}
    .h-\[85dvh\]{height:85dvh}
    .h-\[90dvh\]{height:90dvh}
    .h-\[90vh\]{height:90vh}
    .h-auto{height:auto}
    .h-full{height:100%}
    .h-screen{height:100vh}
    .max-h-\[100dvh\]{max-height:100dvh}
    .max-h-\[100svh\]{max-height:100svh}
    .max-h-\[85vh\]{max-height:85vh}
    .max-h-\[90vh\]{max-height:90vh}
    .max-h-\[95dvh\]{max-height:95dvh}
    .min-h-0{min-height:0.0rem}
    .min-h-\[100svh\]{min-height:100svh}
    .min-h-auto{min-height:auto}
    .w-14{width:3.5rem}
    .w-2{width:0.5rem}
    .w-2\.5{width:0.625rem}
    .w-20{width:5.0rem}
    .w-40{width:10.0rem}
    .w-\[100\%\]{width:100%}
    .w-\[100vw\]{width:100vw}
    .w-\[16px\]{width:16px}
    .w-\[25px\]{width:25px}
    .w-\[40px\]{width:40px}
    .w-\[50vw\]{width:50vw}
    .w-\[60px\]{width:60px}
    .w-\[65vw\]{width:65vw}
    .w-\[70vw\]{width:70vw}
    .w-\[75vw\]{width:75vw}
    .w-\[80vw\]{width:80vw}
    .w-\[85vw\]{width:85vw}
    .w-\[90vw\]{width:90vw}
    .w-\[93vw\]{width:93vw}
    .w-auto{width:auto}
    .w-full{width:100%}
    .w-screen{width:100vw}
    .min-w-0{min-width:0.0rem}
    .min-w-\[100\%\]{min-width:100%}
    .min-w-auto{min-width:auto}
    .max-w-\[100\%\]{max-width:100%}
    .max-w-auto{max-width:auto}
    .origin-center{transform-origin:center}
    .translate-x-\[0px\]{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .translate-y-\[0px\]{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .rotate-\[0deg\]{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .skew-x-\[0deg\]{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .skew-y-\[0deg\]{--tw-skew-y:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .scale-\[100\%\]{--tw-scale-x:100%;--tw-scale-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .scale-\[93\%\]{--tw-scale-x:93%;--tw-scale-y:93%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .transform-gpu{transform:translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    @keyframes spin{to{transform:rotate(360deg)}}
    .animate-spin{animation:spin 1s linear infinite}
    .list-outside{list-style-position:outside}
    .list-none{list-style-type:none}
    .grid-flow-col{grid-auto-flow:column}
    .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
    .flex-row{flex-direction:row}
    .flex-col{flex-direction:column}
    .flex-nowrap{flex-wrap:nowrap}
    .content-center{align-content:center}
    .items-center{align-items:center}
    .justify-center{justify-content:center}
    .justify-items-center{justify-items:center}
    .gap-0{gap:0.0rem}
    .gap-0\.5{gap:0.125rem}
    .gap-x-0{-moz-column-gap:0.0rem;column-gap:0.0rem}
    .gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}
    .gap-x-3{-moz-column-gap:0.75rem;column-gap:0.75rem}
    .gap-y-0{row-gap:0.0rem}
    .gap-y-0\.5{row-gap:0.125rem}
    .gap-y-1{row-gap:0.25rem}
    .gap-y-2{row-gap:0.5rem}
    .gap-y-2\.5{row-gap:0.625rem}
    .self-center{align-self:center}
    .justify-self-center{justify-self:center}
    .overflow-hidden{overflow:hidden}
    .overflow-visible{overflow:visible}
    .scroll-smooth{scroll-behavior:smooth}
    .whitespace-nowrap{white-space:nowrap}
    .rounded-3xl{border-radius:1.5rem}
    .rounded-full{border-radius:36.0rem}
    .border{border-width:0.12rem}
    .border-\[6px\]{border-width:6px}
    .border-violet-800\/20{border-color:rgb(91 33 182 / 0.2)}
    .border-white\/10{border-color:rgb(255 255 255 / 0.1)}
    .border-t-violet-800{--tw-border-opacity:1;border-top-color:rgb(91 33 182 / var(--tw-border-opacity))}
    .bg-black-50{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
    .bg-black-600{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
    .bg-ultragreen-200{--tw-bg-opacity:1;background-color:rgb(31 164 20 / var(--tw-bg-opacity))}
    .bg-violet-600{--tw-bg-opacity:1;background-color:rgb(124 58 237 / var(--tw-bg-opacity))}
    .bg-white-500{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
    .bg-opacity-\[100\%\]{--tw-bg-opacity:100%}
    .bg-opacity-\[50\%\]{--tw-bg-opacity:50%}
    .fill-ultragreen-200\/\[--svgOpacity\]{fill:rgb(31 164 20 / var(--svgOpacity))}
    .fill-ultragreen-600\/\[--svgOpacity\]{fill:rgb(31 89 22 / var(--svgOpacity))}
    .fill-violet-700\/\[--svgOpacity\]{fill:rgb(109 40 217 / var(--svgOpacity))}
    .fill-white-50\/\[--svgOpacity\]{fill:rgb(255 255 255 / var(--svgOpacity))}
    .fill-white-900\/\[--svgOpacity\]{fill:rgb(255 255 255 / var(--svgOpacity))}
    .fill-zinc-500\/\[--svgOpacity\]{fill:rgb(113 113 122 / var(--svgOpacity))}
    .stroke-black-50\/\[--strokeOpacity\]{stroke:rgb(0 0 0 / var(--strokeOpacity))}
    .stroke-\[2px\]{stroke-width:2px}
    .px-8{padding-left:2.0rem;padding-right:2.0rem}
    .py-6{padding-top:1.5rem;padding-bottom:1.5rem}
    .pb-0{padding-bottom:0.0rem}
    .pb-1{padding-bottom:0.25rem}
    .pb-1\.5{padding-bottom:0.375rem}
    .pl-0{padding-left:0.0rem}
    .pl-2{padding-left:0.5rem}
    .pl-auto{padding-left:auto}
    .pr-0{padding-right:0.0rem}
    .pr-2{padding-right:0.5rem}
    .pr-auto{padding-right:auto}
    .pt-0{padding-top:0.0rem}
    .pt-1{padding-top:0.25rem}
    .pt-1\.5{padding-top:0.375rem}
    .text-left{text-align:left}
    .text-center{text-align:center}
    .font-capsule{font-family:font-EDCFB6DA-8E13-40AA-9D76-3BA469AD3264}
    .font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}
    .text-2xl{font-size:1.50rem;line-height:2.00rem}
    .text-\[10px\]{font-size:10px}
    .text-base{font-size:1.00rem;line-height:1.50rem}
    .text-sm{font-size:0.88rem;line-height:1.25rem}
    .font-\[200\]{font-weight:200}
    .font-\[400\]{font-weight:400}
    .font-\[500\]{font-weight:500}
    .font-bold{font-weight:700}
    .uppercase{text-transform:uppercase}
    .normal-case{text-transform:none}
    .not-italic{font-style:normal}
    .leading-normal{line-height:1.5}
    .leading-tight{line-height:1.25}
    .tracking-\[0\.3em\]{letter-spacing:0.3em}
    .tracking-normal{letter-spacing:0em}
    .tracking-wide{letter-spacing:0.025em}
    .text-surface-900{--tw-text-opacity:1;color:rgb(48 60 77 / var(--tw-text-opacity))}
    .text-text-950{--tw-text-opacity:1;color:rgb(246 248 249 / var(--tw-text-opacity))}
    .text-ultragreen-200\/\[--svgOpacity\]{color:rgb(31 164 20 / var(--svgOpacity))}
    .text-ultragreen-600\/\[--svgOpacity\]{color:rgb(31 89 22 / var(--svgOpacity))}
    .text-ultragreen-900{--tw-text-opacity:1;color:rgb(20 38 15 / var(--tw-text-opacity))}
    .text-violet-700\/\[--svgOpacity\]{color:rgb(109 40 217 / var(--svgOpacity))}
    .text-white-50{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
    .text-white-50\/\[--svgOpacity\]{color:rgb(255 255 255 / var(--svgOpacity))}
    .text-white-500{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
    .text-white-600{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
    .text-white-900{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
    .text-white-900\/\[--svgOpacity\]{color:rgb(255 255 255 / var(--svgOpacity))}
    .text-zinc-500\/\[--svgOpacity\]{color:rgb(113 113 122 / var(--svgOpacity))}
    .text-opacity-\[100\%\]{--tw-text-opacity:100%}
    .opacity-60{opacity:0.6}
    .shadow-2xl{--tw-shadow:0px 12px 12px 0px rgba(26,41,82,0.20), 0px 30px 26px 0px rgba(26,41,82,0.20);--tw-shadow-colored:0px 12px 12px 0px var(--tw-shadow-color), 0px 30px 26px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
    .brightness-\[100\%\]{--tw-brightness:brightness(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .drop-shadow-none{--tw-drop-shadow:;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .saturate-\[100\%\]{--tw-saturate:saturate(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .backdrop-blur-\[10px\]{--tw-backdrop-blur:blur(10px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
    .transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .delay-\[0ms\]{transition-delay:0ms}
    .duration-500{transition-duration:500ms}
    .duration-\[600ms\]{transition-duration:600ms}
    .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
    .text-shadow-none{text-shadow:}
    .\[--strokeOpacity\:100\%\]{--strokeOpacity:100%}
    .\[--svgOpacity\:_100\%\]{--svgOpacity:100%}
    .\[filter\:drop-shadow\(0px_0px_2px_rgba\(0\2c 0\2c 0\2c 1\.00\)\)_drop-shadow\(0px_0px_2px_rgba\(0\2c 0\2c 0\2c 1\.00\)\)\]{filter:drop-shadow(0px 0px 2px rgba(0,0,0,1.00)) drop-shadow(0px 0px 2px rgba(0,0,0,1.00))}
    .marker\:text-\[13px\] *::marker{font-size:13px}
    .marker\:text-\[30px\] *::marker{font-size:30px}
    .marker\:text-violet-500 *::marker{color:rgb(139 92 246 )}
    .marker\:text-\[13px\]::marker{font-size:13px}
    .marker\:text-\[30px\]::marker{font-size:30px}
    .marker\:text-violet-500::marker{color:rgb(139 92 246 )}
    .hover\:translate-x-\[0px\]:hover{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:translate-y-\[-4px\]:hover{--tw-translate-y:-4px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:translate-y-\[0\]:hover{--tw-translate-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:translate-y-\[0px\]:hover{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:translate-y-\[4px\]:hover{--tw-translate-y:4px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:rotate-\[0deg\]:hover{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:skew-x-\[0deg\]:hover{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:skew-y-\[0deg\]:hover{--tw-skew-y:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:scale-\[100\%\]:hover{--tw-scale-x:100%;--tw-scale-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:scale-\[110\%\]:hover{--tw-scale-x:110%;--tw-scale-y:110%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:scale-\[120\%\]:hover{--tw-scale-x:120%;--tw-scale-y:120%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .hover\:fill-black-300\/\[--svgOpacity\]:hover{fill:rgb(0 0 0 / var(--svgOpacity))}
    .hover\:fill-black-950\/\[--svgOpacity\]:hover{fill:rgb(0 0 0 / var(--svgOpacity))}
    .hover\:fill-zinc-950\/\[--svgOpacity\]:hover{fill:rgb(9 9 11 / var(--svgOpacity))}
    .hover\:stroke-ultragreen-50\/\[--strokeOpacity\]:hover{stroke:rgb(0 226 0 / var(--strokeOpacity))}
    .hover\:stroke-\[2px\]:hover{stroke-width:2px}
    .hover\:text-black-300\/\[--svgOpacity\]:hover{color:rgb(0 0 0 / var(--svgOpacity))}
    .hover\:text-black-950\/\[--svgOpacity\]:hover{color:rgb(0 0 0 / var(--svgOpacity))}
    .hover\:text-zinc-950\/\[--svgOpacity\]:hover{color:rgb(9 9 11 / var(--svgOpacity))}
    .hover\:brightness-\[100\%\]:hover{--tw-brightness:brightness(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .hover\:saturate-\[100\%\]:hover{--tw-saturate:saturate(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .hover\:\[--strokeOpacity\:100\%\]:hover{--strokeOpacity:100%}
    .hover\:\[--svgOpacity\:100\%\]:hover{--svgOpacity:100%}
    .hover\:\[filter\:drop-shadow\(0px_0px_2px_rgba\(27\2c 222\2c 16\2c 1\.00\)\)_drop-shadow\(0px_0px_0px_rgba\(27\2c 222\2c 16\2c 1\.00\)\)\]:hover{filter:drop-shadow(0px 0px 2px rgba(27,222,16,1.00)) drop-shadow(0px 0px 0px rgba(27,222,16,1.00))}
    .hover\:\[filter\:drop-shadow\(0px_0px_3px_rgba\(111\2c 68\2c 206\2c 1\.00\)\)_drop-shadow\(0px_0px_2px_rgba\(111\2c 68\2c 206\2c 1\.00\)\)\]:hover{filter:drop-shadow(0px 0px 3px rgba(111,68,206,1.00)) drop-shadow(0px 0px 2px rgba(111,68,206,1.00))}
    .hover\:\[filter\:drop-shadow\(0px_0px_3px_rgba\(27\2c 222\2c 16\2c 1\.00\)\)_drop-shadow\(0px_0px_2px_rgba\(27\2c 222\2c 16\2c 1\.00\)\)\]:hover{filter:drop-shadow(0px 0px 3px rgba(27,222,16,1.00)) drop-shadow(0px 0px 2px rgba(27,222,16,1.00))}
    .hover\:\[filter\:drop-shadow\(0px_0px_4px_rgba\(111\2c 68\2c 206\2c 1\.00\)\)_drop-shadow\(0px_0px_3px_rgba\(111\2c 68\2c 206\2c 1\.00\)\)\]:hover{filter:drop-shadow(0px 0px 4px rgba(111,68,206,1.00)) drop-shadow(0px 0px 3px rgba(111,68,206,1.00))}
    :is(.dark .dark\:bg-opacity-\[100\%\]){--tw-bg-opacity:100%}
    :is(.dark .dark\:text-opacity-\[100\%\]){--tw-text-opacity:100%}
    @media (min-width: 640px){.sm\:right-3{right:0.75rem}.sm\:mb-0{margin-bottom:0.0rem}.sm\:mb-3{margin-bottom:0.75rem}.sm\:mb-auto{margin-bottom:auto}.sm\:ml-0{margin-left:0.0rem}.sm\:ml-auto{margin-left:auto}.sm\:mr-0{margin-right:0.0rem}.sm\:mr-auto{margin-right:auto}.sm\:mt-0{margin-top:0.0rem}.sm\:mt-2{margin-top:0.5rem}.sm\:mt-3{margin-top:0.75rem}.sm\:mt-auto{margin-top:auto}.sm\:hidden{display:none}.sm\:h-0{height:0.0rem}.sm\:h-0\.5{height:0.125rem}.sm\:h-\[100\]{height:100}.sm\:max-h-\[90vh\]{max-height:90vh}.sm\:w-14{width:3.5rem}.sm\:w-3{width:0.75rem}.sm\:w-\[16px\]{width:16px}.sm\:w-\[30px\]{width:30px}.sm\:w-\[35vw\]{width:35vw}.sm\:w-\[50px\]{width:50px}.sm\:w-\[65vw\]{width:65vw}.sm\:w-\[70vw\]{width:70vw}.sm\:w-\[90vw\]{width:90vw}.sm\:flex-row{flex-direction:row}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:gap-0{gap:0.0rem}.sm\:gap-0\.5{gap:0.125rem}.sm\:gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}.sm\:gap-y-0{row-gap:0.0rem}.sm\:text-center{text-align:center}.sm\:font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}.sm\:text-2xl{font-size:1.50rem;line-height:2.00rem}.sm\:text-3xl{font-size:1.88rem;line-height:2.25rem}.sm\:text-base{font-size:1.00rem;line-height:1.50rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:font-\[200\]{font-weight:200}.sm\:marker\:text-\[18px\] *::marker{font-size:18px}.sm\:marker\:text-\[18px\]::marker{font-size:18px}}
    @media (min-width: 768px){.md\:right-4{right:1.0rem}.md\:mb-0{margin-bottom:0.0rem}.md\:mb-3{margin-bottom:0.75rem}.md\:mb-auto{margin-bottom:auto}.md\:ml-0{margin-left:0.0rem}.md\:ml-auto{margin-left:auto}.md\:mr-0{margin-right:0.0rem}.md\:mr-auto{margin-right:auto}.md\:mt-0{margin-top:0.0rem}.md\:mt-2{margin-top:0.5rem}.md\:mt-3{margin-top:0.75rem}.md\:mt-auto{margin-top:auto}.md\:hidden{display:none}.md\:h-0{height:0.0rem}.md\:h-0\.5{height:0.125rem}.md\:max-h-\[85vh\]{max-height:85vh}.md\:w-16{width:4.0rem}.md\:w-3{width:0.75rem}.md\:w-\[16px\]{width:16px}.md\:w-\[30px\]{width:30px}.md\:w-\[40vw\]{width:40vw}.md\:w-\[50px\]{width:50px}.md\:w-\[65vw\]{width:65vw}.md\:w-\[70vw\]{width:70vw}.md\:w-\[75vw\]{width:75vw}.md\:w-\[90vw\]{width:90vw}.md\:flex-row{flex-direction:row}.md\:flex-nowrap{flex-wrap:nowrap}.md\:gap-1{gap:0.25rem}.md\:gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}.md\:gap-y-0{row-gap:0.0rem}.md\:text-center{text-align:center}.md\:font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}.md\:text-2xl{font-size:1.50rem;line-height:2.00rem}.md\:text-base{font-size:1.00rem;line-height:1.50rem}.md\:text-lg{font-size:1.12rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:font-\[200\]{font-weight:200}.md\:marker\:text-\[18px\] *::marker{font-size:18px}.md\:marker\:text-\[18px\]::marker{font-size:18px}}
    @media (min-width: 1024px){.lg\:right-6{right:1.5rem}.lg\:mb-0{margin-bottom:0.0rem}.lg\:mb-3{margin-bottom:0.75rem}.lg\:mb-auto{margin-bottom:auto}.lg\:ml-0{margin-left:0.0rem}.lg\:ml-auto{margin-left:auto}.lg\:mr-0{margin-right:0.0rem}.lg\:mr-auto{margin-right:auto}.lg\:mt-0{margin-top:0.0rem}.lg\:mt-3{margin-top:0.75rem}.lg\:mt-auto{margin-top:auto}.lg\:grid{display:grid}.lg\:h-0{height:0.0rem}.lg\:h-0\.5{height:0.125rem}.lg\:max-h-\[80vh\]{max-height:80vh}.lg\:w-20{width:5.0rem}.lg\:w-3{width:0.75rem}.lg\:w-\[16px\]{width:16px}.lg\:w-\[30px\]{width:30px}.lg\:w-\[30vw\]{width:30vw}.lg\:w-\[50px\]{width:50px}.lg\:w-\[50vw\]{width:50vw}.lg\:w-\[60vw\]{width:60vw}.lg\:w-\[70vw\]{width:70vw}.lg\:flex-row{flex-direction:row}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:gap-1{gap:0.25rem}.lg\:gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}.lg\:gap-y-0{row-gap:0.0rem}.lg\:text-center{text-align:center}.lg\:font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}.lg\:text-3xl{font-size:1.88rem;line-height:2.25rem}.lg\:text-lg{font-size:1.12rem;line-height:1.75rem}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.lg\:font-\[200\]{font-weight:200}.lg\:marker\:text-\[23px\] *::marker{font-size:23px}.lg\:marker\:text-\[23px\]::marker{font-size:23px}}
    @media (min-width: 1280px){.xl\:right-6{right:1.5rem}.xl\:mb-0{margin-bottom:0.0rem}.xl\:mb-3{margin-bottom:0.75rem}.xl\:mb-auto{margin-bottom:auto}.xl\:ml-0{margin-left:0.0rem}.xl\:ml-auto{margin-left:auto}.xl\:mr-0{margin-right:0.0rem}.xl\:mr-auto{margin-right:auto}.xl\:mt-0{margin-top:0.0rem}.xl\:mt-3{margin-top:0.75rem}.xl\:mt-auto{margin-top:auto}.xl\:grid{display:grid}.xl\:h-1{height:0.25rem}.xl\:max-h-\[80vh\]{max-height:80vh}.xl\:w-28{width:7.0rem}.xl\:w-4{width:1.0rem}.xl\:w-\[18px\]{width:18px}.xl\:w-\[20vw\]{width:20vw}.xl\:w-\[35px\]{width:35px}.xl\:w-\[55vw\]{width:55vw}.xl\:w-\[58px\]{width:58px}.xl\:w-\[60vw\]{width:60vw}.xl\:w-\[65vw\]{width:65vw}.xl\:flex-row{flex-direction:row}.xl\:flex-nowrap{flex-wrap:nowrap}.xl\:gap-1{gap:0.25rem}.xl\:gap-x-3{-moz-column-gap:0.75rem;column-gap:0.75rem}.xl\:gap-y-0{row-gap:0.0rem}.xl\:text-center{text-align:center}.xl\:font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}.xl\:text-2xl{font-size:1.50rem;line-height:2.00rem}.xl\:text-4xl{font-size:2.25rem;line-height:2.50rem}.xl\:text-lg{font-size:1.12rem;line-height:1.75rem}.xl\:text-xl{font-size:1.25rem;line-height:1.75rem}.xl\:font-\[200\]{font-weight:200}.xl\:marker\:text-\[30px\] *::marker{font-size:30px}.xl\:marker\:text-\[30px\]::marker{font-size:30px}}
    @media (min-width: 1536px){.\32xl\:right-6{right:1.5rem}.\32xl\:mb-0{margin-bottom:0.0rem}.\32xl\:mb-3{margin-bottom:0.75rem}.\32xl\:ml-0{margin-left:0.0rem}.\32xl\:ml-auto{margin-left:auto}.\32xl\:mr-0{margin-right:0.0rem}.\32xl\:mr-auto{margin-right:auto}.\32xl\:mt-0{margin-top:0.0rem}.\32xl\:mt-3{margin-top:0.75rem}.\32xl\:grid{display:grid}.\32xl\:h-1{height:0.25rem}.\32xl\:max-h-\[85vh\]{max-height:85vh}.\32xl\:w-28{width:7.0rem}.\32xl\:w-4{width:1.0rem}.\32xl\:w-\[20px\]{width:20px}.\32xl\:w-\[20vw\]{width:20vw}.\32xl\:w-\[35px\]{width:35px}.\32xl\:w-\[50vw\]{width:50vw}.\32xl\:w-\[58px\]{width:58px}.\32xl\:w-\[65vw\]{width:65vw}.\32xl\:flex-row{flex-direction:row}.\32xl\:flex-nowrap{flex-wrap:nowrap}.\32xl\:gap-1{gap:0.25rem}.\32xl\:gap-auto{gap:auto}.\32xl\:gap-x-3{-moz-column-gap:0.75rem;column-gap:0.75rem}.\32xl\:gap-y-0{row-gap:0.0rem}.\32xl\:text-center{text-align:center}.\32xl\:font-montserrat{font-family:font-C05572EE-56E1-409D-B16E-FC892E2EF126}.\32xl\:text-2xl{font-size:1.50rem;line-height:2.00rem}.\32xl\:text-4xl{font-size:2.25rem;line-height:2.50rem}.\32xl\:text-5xl{font-size:3.00rem;line-height:3.50rem}.\32xl\:text-xl{font-size:1.25rem;line-height:1.75rem}.\32xl\:font-\[200\]{font-weight:200}.\32xl\:marker\:text-\[30px\] *::marker{font-size:30px}.\32xl\:marker\:text-\[30px\]::marker{font-size:30px}}
    .\[\&\>\*\]\:col-start-1>*{grid-column-start:1}
    .\[\&\>\*\]\:row-start-1>*{grid-row-start:1}
    .\[\&\>\*\]\:min-w-0>*{min-width:0.0rem}
    .\[\&_a\:hover\]\:font-\[400\] a:hover{font-weight:400}
    .\[\&_a\:hover\]\:text-brand-800 a:hover{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:hover\]\:no-underline a:hover{text-decoration-line:none}
    .\[\&_a\:visited\]\:font-\[400\] a:visited{font-weight:400}
    .\[\&_a\:visited\]\:text-brand-800 a:visited{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:visited\]\:no-underline a:visited{text-decoration-line:none}
    .\[\&_a\]\:font-\[400\] a{font-weight:400}
    .\[\&_a\]\:text-brand-500 a{--tw-text-opacity:1;color:rgb(56 146 248 / var(--tw-text-opacity))}
    .\[\&_a\]\:no-underline a{text-decoration-line:none}
.container{max-width:100%;}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}
@media (min-width: 1280px){.container{max-width:1280px}}
@media (min-width: 1536px){.container{max-width:1536px}}/* ==========================================================
   CONTEXT PRELOADER
   ========================================================== */

.context-preloader {

    /* ======================================================
       SYMBOL APPEARANCE
       ====================================================== */

    --preloader-symbol-fill:
        rgba(35, 35, 35, 0);

    --preloader-symbol-stroke:
        rgb(109, 40, 217);

    --preloader-symbol-stroke-width:
        0.25px;


    /* ======================================================
       DASH ANIMATION
       EDIT THESE LIVE IN CSS
       ====================================================== */

    --preloader-dash-length:
        60;

    --preloader-dash-gap:
        12;

    --preloader-dash-speed:
        2200ms;

    /*
       For a perfectly seamless loop, this should normally
       equal dash length + dash gap, or a multiple of it.

       60 + 12 = 72
    */

    --preloader-dash-travel:
        -72;


    /* ======================================================
       TEXT
       ====================================================== */

    --preloader-text-opacity:
        0.70;


    /* ======================================================
       JS WRITES THE FADE DURATIONS INTO THESE
       ====================================================== */

    --preloader-symbol-in-duration:
        800ms;

    --preloader-text-in-duration:
        800ms;

    --preloader-symbol-out-duration:
        600ms;

    --preloader-text-out-duration:
        600ms;

    --preloader-background-out-duration:
        700ms;


    /* ======================================================
       EASING
       ====================================================== */

    --preloader-symbol-in-easing:
        ease;

    --preloader-text-in-easing:
        ease;

    --preloader-symbol-out-easing:
        ease;

    --preloader-text-out-easing:
        ease;

    --preloader-background-out-easing:
        ease;


    /* ======================================================
       MASTER SCREEN
       ====================================================== */

    position: absolute;
    inset: 0;

    z-index: 9999999;

    background: #000;

    opacity: 1;
    visibility: visible;

    pointer-events: all;

    transition:
        opacity
        var(--preloader-background-out-duration)
        var(--preloader-background-out-easing);
}


    /* ==========================================================
    PRELOADER — INPUT / SCROLL LOCK
    ========================================================== */

    html.context-preloading, html.context-preloading body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.context-preloading .context-preloader {
        touch-action: none;
        pointer-events: all;
    }


/* ==========================================================
   SYMBOL — INITIAL STATE
   ========================================================== */

.context-preloader-symbol {

    opacity: 0;

    transition:
        opacity
        var(--preloader-symbol-in-duration)
        var(--preloader-symbol-in-easing);

    overflow: visible !important;
}


.context-preloader-symbol svg {

    overflow: visible !important;
}



/* ==========================================================
   TEXT — INITIAL STATE
   ========================================================== */

.context-preloader-text {

    opacity: 0;

    transition:
        opacity
        var(--preloader-text-in-duration)
        var(--preloader-text-in-easing);
}



/* ==========================================================
   SYMBOL — FADE IN
   ========================================================== */

.context-preloader-symbol.is-visible {

    opacity: 1;
}



/* ==========================================================
   TEXT — FADE IN
   ========================================================== */

.context-preloader-text.is-visible {

    opacity:
        var(--preloader-text-opacity);
}



/* ==========================================================
   SYMBOL — FADE OUT
   ========================================================== */

.context-preloader-symbol.is-leaving {

    opacity: 0;

    transition-duration:
        var(--preloader-symbol-out-duration);

    transition-timing-function:
        var(--preloader-symbol-out-easing);
}



/* ==========================================================
   TEXT — FADE OUT
   ========================================================== */

.context-preloader-text.is-leaving {

    opacity: 0;

    transition-duration:
        var(--preloader-text-out-duration);

    transition-timing-function:
        var(--preloader-text-out-easing);
}



/* ==========================================================
   BACKGROUND — FADE OUT
   ========================================================== */

.context-preloader.is-leaving {

    opacity: 0;

    pointer-events: none;
}



/* ==========================================================
   CHAOS SYMBOL DASH
   ========================================================== */

.context-preloader-symbol
:is(
    path,
    circle,
    ellipse,
    polygon,
    polyline
) {

    fill:
        var(--preloader-symbol-fill);

    stroke:
        var(--preloader-symbol-stroke);

    stroke-width:
        var(--preloader-symbol-stroke-width);

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        var(--preloader-dash-length)
        var(--preloader-dash-gap);

    animation:
        context-preloader-dash
        var(--preloader-dash-speed)
        linear
        infinite;
}


@keyframes context-preloader-dash {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset:
            var(--preloader-dash-travel);
    }
}



/* ==========================================================
   PAGEFLOW STARTUP GATE

   PageFlow may initialize normally underneath.
   Its active Animator elements are held at frame zero
   until JavaScript removes context-preloading.
   ========================================================== */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper > * {

    opacity: 0 !important;

    transition: none !important;
}



/* ---------- FADE UP ---------- */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper[data-effect="fade-up"] > * {

    transform:
        translateY(50px) !important;
}



/* ---------- SLIDE RIGHT ---------- */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper[data-effect="slide-right"] > * {

    transform:
        translateX(50px) !important;
}



/* ---------- SLIDE LEFT ---------- */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper[data-effect="slide-left"] > * {

    transform:
        translateX(-50px) !important;
}



/* ---------- ZOOM IN ---------- */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper[data-effect="zoom-in"] > * {

    transform:
        scale(.9) !important;
}



/* ---------- SIMPLE FADE ---------- */

html.context-preloading
.pageflow-slide.pf-slide-active
.pf-animator-wrapper[data-effect="fade"] > * {

    transform:
        none !important;
}/* =========================================================
   SVG FIELD EFFECT — SHARED ENGINE

   EVERY SVG USES:

   .svg-stroke_1
   .svg-stroke_2
   .svg-stroke_3
   .svg-stroke_4
   .svg-stroke_5
   .svg-fill

   EVERY SVG WRAPPER USES:

   svg-field-effect
   +
   one graphic-specific class, e.g.

   context-svg
   beginning-svg_1
   reflections-svg_1
   etc.
   ========================================================= */


/* =========================================================
   1. UNIVERSAL / SHARED CONTROLS
   ========================================================= */

.svg-field-effect {

    /* ---------- COLORS ---------- */

    --field-stroke-color-start: rgb(40, 40, 40);
    --field-stroke-color-end: rgb(0, 0, 0);
    --field-stroke-width: 1px;


    /* ---------- FINAL FILL ---------- */

    --field-fill-duration: 3000ms;
    --field-fill-delay: 6000ms;
    --field-fill-easing: ease;


    /* ---------- ALL STROKES → BLACK ---------- */

    --field-stroke-darken-duration: 1800ms;
    --field-stroke-darken-delay: 7000ms;
    --field-stroke-darken-easing: linear;
}



/* =========================================================
   2. CONTEXT SVG
   ========================================================= */

.context-svg {

    --field-stroke-1-duration: 6000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 20000;

    --field-stroke-2-duration: 20000ms;
    --field-stroke-2-delay: 1000ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 90000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 400;

    --field-stroke-4-duration: 80000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 20000;

    --field-stroke-5-duration: 9000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   3. BEGINNING SVG 1
   ========================================================= */

.beginning-svg_1 {

    --field-stroke-1-duration: 6000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length:1000;

    --field-stroke-2-duration: 6000ms;
    --field-stroke-2-delay: 1000ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 1000;

    --field-stroke-3-duration: 6000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 1000;

    --field-stroke-4-duration: 6000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 8000;

    --field-stroke-5-duration: 10000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 7000;

}



/* =========================================================
   4. BEGINNING SVG 2
   ========================================================= */

.beginning-svg_2 {

    --field-stroke-1-duration: 40000ms;
    --field-stroke-1-delay: 1000ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 20000;

    --field-stroke-2-duration: 900000ms;
    --field-stroke-2-delay: 2200ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 400;

    --field-stroke-3-duration: 5000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 2000;

    --field-stroke-4-duration: 40000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 20000;

    --field-stroke-5-duration: 8000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 3000;

}



/* =========================================================
   5. REFLECTIONS SVG 1
   ========================================================= */

.reflections-svg_1 {

    --field-stroke-1-duration: 60000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 30000;

    --field-stroke-2-duration: 50000ms;
    --field-stroke-2-delay: 1000ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 20000;

    --field-stroke-3-duration: 40000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 15000;

    --field-stroke-4-duration: 50000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 20000;

    --field-stroke-5-duration: 40000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 15000;

}



/* =========================================================
   6. REFLECTIONS SVG 2
   ========================================================= */

.reflections-svg_2 {

    --field-stroke-1-duration: 15000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 5000;

    --field-stroke-2-duration: 9000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 4000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 3000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 500;

    --field-stroke-4-duration: 8000ms;
    --field-stroke-4-delay: 4500ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 300;

    --field-stroke-5-duration: 8000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 600;

}



/* =========================================================
   7. EARLY WORK SVG 1
   ========================================================= */

.early-work-svg_1 {

    --field-stroke-1-duration: 20000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 9000ms;
    --field-stroke-2-delay: 1000ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 7000;

    --field-stroke-3-duration: 23000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 13000;

    --field-stroke-4-duration: 35000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 9000;

    --field-stroke-5-duration: 23000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 9000;

}



/* =========================================================
   8. EARLY WORK SVG 2
   ========================================================= */

.early-work-svg_2 {

    --field-stroke-1-duration: 2500ms;
    --field-stroke-1-delay: 500ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 1000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1000ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 5000;

    --field-stroke-3-duration: 7000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 5000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 3000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 9000;

    --field-stroke-5-duration: 13000ms;
    --field-stroke-5-delay: 4000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 20000;

}



/* =========================================================
   9. KEYNOTE SVG 1
   ========================================================= */

.keynote-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   10. KEYNOTE SVG 2
   ========================================================= */

.keynote-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   11. KEYNOTE SVG 3
   ========================================================= */

.keynote-svg_3 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   12. RELATIONSHIPS SVG 1
   ========================================================= */

.relationships-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   13. RELATIONSHIPS SVG 2
   ========================================================= */

.relationships-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   14. CONNECTION SVG 1
   ========================================================= */

.connection-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   15. CONNECTION SVG 2
   ========================================================= */

.connection-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   16. PROBLEM SVG 1
   ========================================================= */

.problem-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   17. PROBLEM SVG 2
   ========================================================= */

.problem-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   18. EVERYTHING SVG 1
   ========================================================= */

.everything-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   19. EVERYTHING SVG 2
   ========================================================= */

.everything-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   20. REFINEMENT SVG 1
   ========================================================= */

.refinement-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   21. REFINEMENT SVG 2
   ========================================================= */

.refinement-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   22. SYSTEMS SVG 1
   ========================================================= */

.systems-svg_1 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   23. SYSTEMS SVG 2
   ========================================================= */

.systems-svg_2 {

    --field-stroke-1-duration: 2000ms;
    --field-stroke-1-delay: 0ms;
    --field-stroke-1-easing: linear;
    --field-stroke-1-length: 10000;

    --field-stroke-2-duration: 7000ms;
    --field-stroke-2-delay: 1500ms;
    --field-stroke-2-easing: linear;
    --field-stroke-2-length: 10000;

    --field-stroke-3-duration: 30000ms;
    --field-stroke-3-delay: 2000ms;
    --field-stroke-3-easing: linear;
    --field-stroke-3-length: 10000;

    --field-stroke-4-duration: 10000ms;
    --field-stroke-4-delay: 4000ms;
    --field-stroke-4-easing: linear;
    --field-stroke-4-length: 10000;

    --field-stroke-5-duration: 2000ms;
    --field-stroke-5-delay: 6000ms;
    --field-stroke-5-easing: linear;
    --field-stroke-5-length: 10000;

}



/* =========================================================
   24. SHARED STROKE RESTING STATE
   ========================================================= */

.svg-field-effect .svg-stroke_1,
.svg-field-effect .svg-stroke_2,
.svg-field-effect .svg-stroke_3,
.svg-field-effect .svg-stroke_4,
.svg-field-effect .svg-stroke_5 {

    fill: none;

    stroke: var(--field-stroke-color-start);
    stroke-width: var(--field-stroke-width);

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}



/* =========================================================
   25. INDIVIDUAL STROKE DASH LENGTHS
   ========================================================= */

.svg-field-effect .svg-stroke_1 {
    stroke-dasharray:
        var(--field-stroke-1-length)
        var(--field-stroke-1-length);

    stroke-dashoffset:
        var(--field-stroke-1-length);
}


.svg-field-effect .svg-stroke_2 {
    stroke-dasharray:
        var(--field-stroke-2-length)
        var(--field-stroke-2-length);

    stroke-dashoffset:
        var(--field-stroke-2-length);
}


.svg-field-effect .svg-stroke_3 {
    stroke-dasharray:
        var(--field-stroke-3-length)
        var(--field-stroke-3-length);

    stroke-dashoffset:
        var(--field-stroke-3-length);
}


.svg-field-effect .svg-stroke_4 {
    stroke-dasharray:
        var(--field-stroke-4-length)
        var(--field-stroke-4-length);

    stroke-dashoffset:
        var(--field-stroke-4-length);
}


.svg-field-effect .svg-stroke_5 {
    stroke-dasharray:
        var(--field-stroke-5-length)
        var(--field-stroke-5-length);

    stroke-dashoffset:
        var(--field-stroke-5-length);
}



/* =========================================================
   26. STROKE 1 — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-stroke_1 {

    stroke-dashoffset: 0;
    stroke: var(--field-stroke-color-end);

    transition:
        stroke-dashoffset
            var(--field-stroke-1-duration)
            var(--field-stroke-1-easing),

        stroke
            var(--field-stroke-darken-duration)
            var(--field-stroke-darken-easing);

    transition-delay:
        var(--field-stroke-1-delay),
        var(--field-stroke-darken-delay);
}



/* =========================================================
   27. STROKE 2 — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-stroke_2 {

    stroke-dashoffset: 0;
    stroke: var(--field-stroke-color-end);

    transition:
        stroke-dashoffset
            var(--field-stroke-2-duration)
            var(--field-stroke-2-easing),

        stroke
            var(--field-stroke-darken-duration)
            var(--field-stroke-darken-easing);

    transition-delay:
        var(--field-stroke-2-delay),
        var(--field-stroke-darken-delay);
}



/* =========================================================
   28. STROKE 3 — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-stroke_3 {

    stroke-dashoffset: 0;
    stroke: var(--field-stroke-color-end);

    transition:
        stroke-dashoffset
            var(--field-stroke-3-duration)
            var(--field-stroke-3-easing),

        stroke
            var(--field-stroke-darken-duration)
            var(--field-stroke-darken-easing);

    transition-delay:
        var(--field-stroke-3-delay),
        var(--field-stroke-darken-delay);
}



/* =========================================================
   29. STROKE 4 — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-stroke_4 {

    stroke-dashoffset: 0;
    stroke: var(--field-stroke-color-end);

    transition:
        stroke-dashoffset
            var(--field-stroke-4-duration)
            var(--field-stroke-4-easing),

        stroke
            var(--field-stroke-darken-duration)
            var(--field-stroke-darken-easing);

    transition-delay:
        var(--field-stroke-4-delay),
        var(--field-stroke-darken-delay);
}



/* =========================================================
   30. STROKE 5 — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-stroke_5 {

    stroke-dashoffset: 0;
    stroke: var(--field-stroke-color-end);

    transition:
        stroke-dashoffset
            var(--field-stroke-5-duration)
            var(--field-stroke-5-easing),

        stroke
            var(--field-stroke-darken-duration)
            var(--field-stroke-darken-easing);

    transition-delay:
        var(--field-stroke-5-delay),
        var(--field-stroke-darken-delay);
}



/* =========================================================
   FINAL ARTWORK — RESTING
   ========================================================= */

.svg-field-effect .svg-fill {

    opacity: 0;
}



/* =========================================================
   FINAL ARTWORK — ACTIVE
   ========================================================= */

.svg-field-effect.svg-field-active .svg-fill {

    opacity: 1;

    transition:
        opacity
            var(--field-fill-duration)
            var(--field-fill-easing);

    transition-delay:
        var(--field-fill-delay);
}



/* =========================================================
   31. RESET / OUT
   ========================================================= */

.svg-field-effect:not(.svg-field-active) .svg-stroke_1 {

    stroke-dashoffset:
        var(--field-stroke-1-length);
}

.svg-field-effect:not(.svg-field-active) .svg-stroke_2 {

    stroke-dashoffset:
        var(--field-stroke-2-length);
}

.svg-field-effect:not(.svg-field-active) .svg-stroke_3 {

    stroke-dashoffset:
        var(--field-stroke-3-length);
}

.svg-field-effect:not(.svg-field-active) .svg-stroke_4 {

    stroke-dashoffset:
        var(--field-stroke-4-length);
}

.svg-field-effect:not(.svg-field-active) .svg-stroke_5 {

    stroke-dashoffset:
        var(--field-stroke-5-length);
}


.svg-field-effect:not(.svg-field-active) .svg-stroke_1,
.svg-field-effect:not(.svg-field-active) .svg-stroke_2,
.svg-field-effect:not(.svg-field-active) .svg-stroke_3,
.svg-field-effect:not(.svg-field-active) .svg-stroke_4,
.svg-field-effect:not(.svg-field-active) .svg-stroke_5 {

    stroke:
        var(--field-stroke-color-start);

    transition:
        stroke-dashoffset 300ms ease,
        stroke 300ms ease;

    transition-delay:
        0ms,
        0ms;
}


.svg-field-effect:not(.svg-field-active) .svg-fill {

    opacity: 0;

    transition:
        opacity 300ms ease;

    transition-delay: 0ms;
}
/*** =========================================================
     PAGEFLOW INTERMEDIARY SVG SEQUENCE

     Divider:
     draw → fill → hold → unfill → undraw

     Arrow:
     fade in → two downward pulses → pause → repeat
     ========================================================= ***/


/* =========================================================
   1. DIVIDER MASTER CONTROLS
   ========================================================= */

.svg-effects {

    /* ---------- STROKE APPEARANCE ---------- */

    --svg-stroke-width: 2px;

    --svg-stroke-color-out: rgb(10, 215, 3);
    --svg-stroke-color-in: rgb(10, 215, 3);


    /* ---------- STROKE DRAW-IN ---------- */

    --svg-stroke-in-duration: 6000ms;
    --svg-stroke-in-delay: 3ms;
    --svg-stroke-in-easing: cubic-bezier(.4, 0, .2, 1);


    /* ---------- FILL-IN ---------- */

    --svg-fill-color-out: rgb(0, 0, 0);
    --svg-fill-color-in: rgb(79, 0, 158);

    --svg-fill-opacity-out: 0;
    --svg-fill-opacity-in: 1;

    --svg-fill-in-duration: 4000ms;
    --svg-fill-in-delay: 800ms;
    --svg-fill-in-easing: ease;


    /* =====================================================
       EXIT / "UNMAKE" TIMING

       These delays are measured from the moment
       the slide becomes active.

       So 10000ms means:
       begin undoing 10 seconds after slide activation.
       ===================================================== */

    --svg-fill-out-duration: 6000ms;
    --svg-fill-out-delay: 15000ms;
    --svg-fill-out-easing: ease;

    --svg-stroke-out-duration: 3800ms;
    --svg-stroke-out-delay: 14000ms;
    --svg-stroke-out-easing: ease;
}


/* =========================================================
   2. DIVIDER — RESTING STATE
   ========================================================= */

.svg-effects svg path,
.svg-effects svg line,
.svg-effects svg polyline,
.svg-effects svg polygon,
.svg-effects svg rect,
.svg-effects svg circle,
.svg-effects svg ellipse {

    stroke: var(--svg-stroke-color-out);
    stroke-width: var(--svg-stroke-width);

    stroke-dasharray: var(--svg-path-length);
    stroke-dashoffset: var(--svg-path-length);

    fill: var(--svg-fill-color-out);
    fill-opacity: var(--svg-fill-opacity-out);

    paint-order: fill stroke;
}


/* =========================================================
   3. DIVIDER — ACTIVE SEQUENCE

   Four animations:
   1. draw stroke
   2. fill shape
   3. remove fill later
   4. undraw stroke later
   ========================================================= */

.svg-sequence-active .svg-effects svg path,
.svg-sequence-active .svg-effects svg line,
.svg-sequence-active .svg-effects svg polyline,
.svg-sequence-active .svg-effects svg polygon,
.svg-sequence-active .svg-effects svg rect,
.svg-sequence-active .svg-effects svg circle,
.svg-sequence-active .svg-effects svg ellipse {

    animation-name:
        svg-stroke-draw,
        svg-fill-in,
        svg-fill-out,
        svg-stroke-undraw;

    animation-duration:
        var(--svg-stroke-in-duration),
        var(--svg-fill-in-duration),
        var(--svg-fill-out-duration),
        var(--svg-stroke-out-duration);

    animation-delay:
        var(--svg-stroke-in-delay),
        var(--svg-fill-in-delay),
        var(--svg-fill-out-delay),
        var(--svg-stroke-out-delay);

    animation-timing-function:
        var(--svg-stroke-in-easing),
        var(--svg-fill-in-easing),
        var(--svg-fill-out-easing),
        var(--svg-stroke-out-easing);

    animation-fill-mode:
        forwards,
        forwards,
        forwards,
        forwards;

    animation-iteration-count:
        1,
        1,
        1,
        1;
}


/* =========================================================
   4. DIVIDER KEYFRAMES
   ========================================================= */

@keyframes svg-stroke-draw {

    from {
        stroke-dashoffset: var(--svg-path-length);
        stroke: var(--svg-stroke-color-out);
    }

    to {
        stroke-dashoffset: 0;
        stroke: var(--svg-stroke-color-in);
    }
}


@keyframes svg-fill-in {

    from {
        fill: var(--svg-fill-color-out);
        fill-opacity: var(--svg-fill-opacity-out);
    }

    to {
        fill: var(--svg-fill-color-in);
        fill-opacity: var(--svg-fill-opacity-in);
    }
}


@keyframes svg-fill-out {

    from {
        fill: var(--svg-fill-color-in);
        fill-opacity: var(--svg-fill-opacity-in);
    }

    to {
        fill: var(--svg-fill-color-out);
        fill-opacity: var(--svg-fill-opacity-out);
    }
}


@keyframes svg-stroke-undraw {

    from {
        stroke-dashoffset: 0;
        stroke: var(--svg-stroke-color-in);
    }

    to {
        stroke-dashoffset: var(--svg-path-length);
        stroke: var(--svg-stroke-color-out);
    }
}

/* =========================================================
   5. DOWN ARROW MASTER CONTROLS
   ========================================================= */

/*
   Register the reveal position so the browser can animate
   the percentage smoothly.
*/
@property --arrow-reveal-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -10%;
}


.svg-arrow-cue {


    /* ---------- GRADIENT ---------- */

    --arrow-gradient-top: rgb(83, 0, 166);
    --arrow-gradient-mid: rgb(116, 1, 232);
    --arrow-gradient-bottom: rgb(82, 255, 2);

    --arrow-gradient-top-opacity: 1;
    --arrow-gradient-mid-opacity: 1;
    --arrow-gradient-bottom-opacity: 1;

    /* Position of the middle color */
    --arrow-gradient-midpoint: 35%;


    /* ---------- TOP-TO-BOTTOM REVEAL ---------- */

    /*
       Preserved timing:
       arrow begins at the exact same point as before.
    */

    --arrow-in-duration: 2000ms;
    --arrow-in-delay: 18500ms;
    --arrow-in-easing: ease;


    /*
       Controls softness of the moving reveal edge.

       Smaller = sharper.
       Larger = fuzzier / more atmospheric.

       Try:
       4%  = fairly crisp
       8%  = soft
       12% = noticeably feathered
       18% = very diffuse
    */

    --arrow-reveal-feather: 35%;


    /* ---------- BOUNCE ---------- */

    /*
       Delay from slide activation before bouncing begins.
    */

    --arrow-bounce-start-delay: 20500ms;


    /*
       Time occupied by the TWO downward pulses.
    */

    --arrow-bounce-duration: 1800ms;


    /*
       Separate dead-time after the two pulses
       before they repeat.
    */

    --arrow-bounce-pause: 2600ms;

    --arrow-bounce-distance-first: 12px;
    --arrow-bounce-distance-second: 7px;


    /* ---------- RESTING STATE ---------- */

    --arrow-reveal-position: -10%;

    opacity: 0;
    visibility: hidden;

    pointer-events: auto;


    /* ---------- SOFT REVEAL MASK ---------- */

    -webkit-mask-image:
        linear-gradient(
            to bottom,

            black 0%,

            black var(--arrow-reveal-position),

            transparent calc(
                var(--arrow-reveal-position)
                + var(--arrow-reveal-feather)
            ),

            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            black 0%,

            black var(--arrow-reveal-position),

            transparent calc(
                var(--arrow-reveal-position)
                + var(--arrow-reveal-feather)
            ),

            transparent 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* =========================================================
   6. ARROW APPEARANCE
   ========================================================= */

.svg-sequence-active .svg-arrow-cue {

    visibility: visible;

    animation:
        svg-arrow-appear
        var(--arrow-in-duration)
        var(--arrow-in-easing)
        var(--arrow-in-delay)
        forwards;
}


/* =========================================================
   7. TOP-TO-BOTTOM SOFT REVEAL
   ========================================================= */

@keyframes svg-arrow-appear {

    0% {
        --arrow-reveal-position: -10%;
        opacity: 0;
    }

    /*
       Opacity comes online quickly so the reveal itself,
       rather than a long fade, does most of the visual work.
    */

    8% {
        opacity: 1;
    }

    100% {
        --arrow-reveal-position: 100%;
        opacity: 1;
    }
}/* =========================================================
   CONTEXT MAP ANIMATION
   Complete standalone system

   Includes:
   - Main context-map construction
   - Ring-band construction
   - Chaos Field overlays
   - Text outline / fill / shadow
   - Navigation outro
   - Map dimming
   - Navigation instruction
   - Navigation arrow draw / gradient fade / bounce
   - Three-layer navigation-arrow inner shadow
   ========================================================= */


/* =========================================================
   1. MASTER CONTROLS
   ========================================================= */

.context-map-animation {

    /* =====================================================
       MASTER COLORS
       ===================================================== */

    --cm-green: #01c404;
    --cm-purple: #380079;
    --cm-black: #000000;



    /* =====================================================
       CHAOS FIELD OVERLAYS
       ===================================================== */

    /*
       Applied to:
       inner-circle-overlay
       ring-band-overlay
       outer-circle-overlay_1 → _10

       Overlay timing begins relative to the moment
       the corresponding PURPLE FILL begins.

       Example:
       purple fill begins
       + overlay delay
       = texture starts appearing
    */

    --cm-overlay-color: #000000;
    --cm-overlay-opacity: .30;

    --cm-overlay-delay: 250ms;
    --cm-overlay-duration: 1400ms;
    --cm-overlay-easing: ease;



    /* =====================================================
       TEXT
       ===================================================== */

    /* ---------- TEXT COLORS ---------- */

    --cm-text-stroke-color: #01c404;
    --cm-text-fill-color: #ffffff;


    /* ---------- TEXT STROKE WIDTH ---------- */

    --cm-text-stroke-width: .15px;


    /* ---------- TEXT DRAW ---------- */

    --cm-text-draw-duration: 2000ms;
    --cm-text-draw-easing: linear;


    /* ---------- TEXT COLOR FILL ---------- */

    --cm-text-fill-delay: 500ms;
    --cm-text-fill-duration: 3750ms;
    --cm-text-fill-easing: ease;


    /* ---------- TEXT OUTLINE → BLACK ---------- */

    --cm-text-darken-delay: 650ms;
    --cm-text-darken-duration: 600ms;
    --cm-text-darken-easing: ease;


    /* ---------- TEXT SHADOW ---------- */

    --cm-text-shadow-delay: 900ms;
    --cm-text-shadow-duration: 700ms;
    --cm-text-shadow-easing: ease;


    --cm-text-shadow-start:
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0 rgba(0, 0, 0, 0));


    --cm-text-shadow:
        drop-shadow(0 0 2px rgb(0, 0, 0))
        drop-shadow(0 0 3px rgb(0, 0, 0))
        drop-shadow(0 0 3px rgb(0, 0, 0))
        drop-shadow(0 0 5px rgb(0, 0, 0))
        drop-shadow(0 0 9px rgb(0, 0, 0));


    --cm-text-advance: 250ms;



    /* =====================================================
       INNER CIRCLE
       ===================================================== */

    --cm-inner-circle-draw-duration: 3300ms;
    --cm-inner-circle-draw-easing: linear;

    --cm-inner-circle-fill-delay: 950ms;
    --cm-inner-circle-fill-duration: 3000ms;
    --cm-inner-circle-fill-easing: ease;

    --cm-inner-circle-advance: 450ms;



    /* =====================================================
       CENTRAL SOLID RING
       ring_1
       ===================================================== */

    --cm-ring-draw-duration: 3300ms;
    --cm-ring-draw-easing: linear;

    --cm-ring-fill-delay: 950ms;
    --cm-ring-fill-duration: 3000ms;
    --cm-ring-fill-easing: ease;

    --cm-ring-advance: 450ms;



    /* =====================================================
       CENTRAL DOTTED RINGS
       ===================================================== */

    --cm-dotted-ring-draw-duration: 50000ms;
    --cm-dotted-ring-draw-easing: linear;

    --cm-dotted-ring-fill-delay: 900ms;
    --cm-dotted-ring-fill-duration: 2000ms;
    --cm-dotted-ring-fill-easing: ease;

    --cm-dotted-ring-advance: 450ms;



    /* =====================================================
       RING BAND
       ===================================================== */

    --cm-ring-band-draw-duration: 3300ms;
    --cm-ring-band-draw-easing: linear;

    --cm-ring-band-fill-delay: 900ms;
    --cm-ring-band-fill-duration: 3500ms;
    --cm-ring-band-fill-easing: ease;

    --cm-ring-band-advance: 450ms;



    /* =====================================================
       SPOKES
       ===================================================== */

    --cm-spoke-draw-duration: 2600ms;
    --cm-spoke-draw-easing: linear;

    --cm-spoke-fill-delay: 750ms;
    --cm-spoke-fill-duration: 1150ms;
    --cm-spoke-fill-easing: ease;

    --cm-spoke-advance: 400ms;



    /* =====================================================
       OUTER SOLID RINGS
       ===================================================== */

    --cm-outer-ring-draw-duration: 1300ms;
    --cm-outer-ring-draw-easing: linear;

    --cm-outer-ring-fill-delay: 1100ms;
    --cm-outer-ring-fill-duration: 900ms;
    --cm-outer-ring-fill-easing: ease;

    --cm-outer-ring-advance: 25ms;



    /* =====================================================
       OUTER DOTTED RINGS
       ===================================================== */

    --cm-outer-dotted-ring-draw-duration: 50000ms;
    --cm-outer-dotted-ring-draw-easing: linear;

    --cm-outer-dotted-ring-fill-delay: 1150ms;
    --cm-outer-dotted-ring-fill-duration: 950ms;
    --cm-outer-dotted-ring-fill-easing: ease;

    --cm-outer-dotted-ring-advance: 25ms;



    /* =====================================================
       OUTER CIRCLES
       ===================================================== */

    --cm-outer-circle-draw-duration: 1300ms;
    --cm-outer-circle-draw-easing: linear;

    --cm-outer-circle-fill-delay: 400ms;
    --cm-outer-circle-fill-duration: 3050ms;
    --cm-outer-circle-fill-easing: ease;

    --cm-outer-circle-advance: 25ms;



    /* =====================================================
       WHOLE CONSTRUCTION SEQUENCE
       ===================================================== */

    --cm-sequence-start-delay: 0ms;



    /* =====================================================
       COMPLETED MAP HOLD / DIM
       ===================================================== */

    --cm-nav-hold-duration: 500ms;

    --cm-map-dim-opacity: 0.15;

    --cm-map-dim-duration: 2600ms;
    --cm-map-dim-easing: ease;



    /* =====================================================
       NAVIGATION INSTRUCTION
       ===================================================== */

    --cm-nav-text-delay: 450ms;
    --cm-nav-text-duration: 1300ms;
    --cm-nav-text-easing: ease;

    --cm-nav-text-start-offset: 8px;



    /* =====================================================
       NAVIGATION ARROW — OUTLINE
       ===================================================== */

    --cm-nav-arrow-stroke: #6900e5;
    --cm-nav-arrow-stroke-width: .5px;



    /* =====================================================
       NAVIGATION ARROW — THREE-COLOR GRADIENT
       ===================================================== */

    --cm-nav-arrow-gradient-top: rgb(0, 0, 0);
    --cm-nav-arrow-gradient-mid: rgb(0, 0, 0);
    --cm-nav-arrow-gradient-bottom: rgb(82, 255, 2);

    --cm-nav-arrow-gradient-top-opacity: 0;
    --cm-nav-arrow-gradient-mid-opacity: .2;
    --cm-nav-arrow-gradient-bottom-opacity: 1;

    --cm-nav-arrow-gradient-midpoint: 60%;



    /* =====================================================
       NAVIGATION ARROW — THREE INNER SHADOWS
       ===================================================== */

    --cm-nav-arrow-inner-shadow-color: #000000;


    --cm-nav-arrow-inner-shadow-1-blur: 0;
    --cm-nav-arrow-inner-shadow-1-opacity: 0;
    --cm-nav-arrow-inner-shadow-1-offset-x: 0;
    --cm-nav-arrow-inner-shadow-1-offset-y: 0;


    --cm-nav-arrow-inner-shadow-2-blur: 0;
    --cm-nav-arrow-inner-shadow-2-opacity: 0;
    --cm-nav-arrow-inner-shadow-2-offset-x: 0;
    --cm-nav-arrow-inner-shadow-2-offset-y: 0;


    --cm-nav-arrow-inner-shadow-3-blur: 0;
    --cm-nav-arrow-inner-shadow-3-opacity: 0;
    --cm-nav-arrow-inner-shadow-3-offset-x: 0;
    --cm-nav-arrow-inner-shadow-3-offset-y: 0;



    /* =====================================================
       NAVIGATION ARROW — DRAW
       ===================================================== */

    --cm-nav-arrow-delay: 900ms;

    --cm-nav-arrow-draw-duration: 3200ms;
    --cm-nav-arrow-draw-easing: ease;



    /* =====================================================
       NAVIGATION ARROW — GRADIENT FADE
       ===================================================== */

    --cm-nav-arrow-fill-delay: 500ms;
    --cm-nav-arrow-fill-duration: 3000ms;
    --cm-nav-arrow-fill-easing: ease;



    /* =====================================================
       NAVIGATION ARROW — BOUNCE
       ===================================================== */

    --cm-nav-arrow-bounce-delay: 2100ms;

    --cm-nav-arrow-bounce-duration: 1700ms;

    --cm-nav-arrow-bounce-pause: 2600ms;

    --cm-nav-arrow-bounce-first: 11px;
    --cm-nav-arrow-bounce-second: 6px;
}



/* =========================================================
   2. SAFE INITIAL SVG STATE
   ========================================================= */

.context-map-animation svg path {
    fill: var(--cm-black);
    stroke: var(--cm-black);

    stroke-linecap: round;
    stroke-linejoin: round;
}



/* =========================================================
   3. CHAOS FIELD OVERLAYS — SAFE INITIAL STATE
   ========================================================= */

/*
   These override the generic black SVG state above.

   The texture exists in its final color immediately,
   but begins completely transparent.

   JavaScript only animates opacity.
*/

.context-map-animation
:is(
    .inner-circle-overlay,
    .ring-band-overlay,
    .outer-circle-overlay_1,
    .outer-circle-overlay_2,
    .outer-circle-overlay_3,
    .outer-circle-overlay_4,
    .outer-circle-overlay_5,
    .outer-circle-overlay_6,
    .outer-circle-overlay_7,
    .outer-circle-overlay_8,
    .outer-circle-overlay_9,
    .outer-circle-overlay_10
) {
    fill: var(--cm-overlay-color);
    stroke: none;

    opacity: 0;

    pointer-events: none;
}



/* =========================================================
   4. TEXT OUTLINE WIDTH
   ========================================================= */

.context-map-animation
:is(
    .text_0,
    .text_1,
    .text_2,
    .text_3,
    .text_4,
    .text_5,
    .text_6,
    .text_7,
    .text_8,
    .text_9,
    .text_10
) {
    stroke-width: var(--cm-text-stroke-width);
}



/* =========================================================
   5. NAVIGATION OVERLAY
   ========================================================= */

.context-nav-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    pointer-events: none;

    z-index: 50;
}



/* =========================================================
   6. NAVIGATION INSTRUCTION — RESTING
   ========================================================= */

.context-nav-instruction {
    opacity: 0;

    transform:
        translateY(
            var(--cm-nav-text-start-offset, 8px)
        );

    visibility: hidden;
}



/* =========================================================
   7. NAVIGATION ARROW — RESTING
   ========================================================= */

.context-nav-arrow {
    opacity: 0;
    visibility: hidden;

    pointer-events: auto;

    transform: translateY(0);
}


.context-nav-arrow svg {
    display: block;
    overflow: visible;
}/* =========================================================
   CONTEXT PAGE LISTS
   Base / Mobile First
   ========================================================= */

.context-list {
    row-gap: 0.4rem !important;
    margin-left: 8px !important;
    padding-left: 0 !important;
}

.context-list > li {
    position: relative;

    margin: 0;
    padding-block: 0;
    padding-left: 25px;

    line-height: 1.35 !important;
}

.context-list > li::before {
    content: "○";

    position: absolute;

    left: 0;
    top: -6.5px;

    font-size: 30px;
    line-height: 1;

    color: #8b5cf6;
}


/* =========================================================
   640px+
   ========================================================= */

@media (min-width: 640px) {

    .context-list {
        row-gap: 0.4rem !important;
    }

    .context-list > li {
        padding-left: 25px;
        line-height: 1.35 !important;
    }

    .context-list > li::before {
        left: 0;
        top: -6px;

        font-size: 30px;
    }
}


/* =========================================================
   768px+
   ========================================================= */

@media (min-width: 768px) {

    .context-list {
        row-gap: 0.4rem !important;
    }

    .context-list > li {
        padding-left: 25px;
        line-height: 1.35 !important;
    }

    .context-list > li::before {
        left: 0;
        top: -4.5px;

        font-size: 30px;
    }
}


/* =========================================================
   1024px+
   ========================================================= */

@media (min-width: 1024px) {

    .context-list {
        row-gap: 0.4rem !important;
    }

    .context-list > li {
        padding-left: 25px;
        line-height: 1.35 !important;
    }

    .context-list > li::before {
        left: 0;
        top: -4px;

        font-size: 30px;
    }
}


/* =========================================================
   1280px+
   ========================================================= */

@media (min-width: 1280px) {

    .context-list {
        row-gap: 0.4rem !important;
    }

    .context-list > li {
        padding-left: 25px;
        line-height: 1.35 !important;
    }

    .context-list > li::before {
        left: 0;
        top: -3px;

        font-size: 30px;
    }
}


/* =========================================================
   1536px+
   ========================================================= */

@media (min-width: 1536px) {

    .context-list {
        row-gap: 0.4rem !important;
    }

    .context-list > li {
        padding-left: 25px;
        line-height: 1.35 !important;
    }

    .context-list > li::before {
        left: 0;
        top: -3px;

        font-size: 30px;
    }
}
/* ==========================================================
   PAGEFLOW ANIMATOR — STRONG VISIBLE FADE
   ========================================================== */

body.pf-live-mode
.pageflow-slide.pf-slide-active
.pf-animator-wrapper > * {

    transition-property:
        opacity,
        transform !important;

    transition-duration:
        2000ms,
        calc(var(--pf-dur, 800) * 1ms) !important;

    transition-timing-function:
        cubic-bezier(.75, 0, .15, 1),
        cubic-bezier(.25, 1, .5, 1) !important;

    transition-delay:
        calc(var(--pf-del, 0) * 1ms),
        calc(var(--pf-del, 0) * 1ms) !important;
}
/* CONTAINER DUMMY PER L'EDITOR - IN SOVRAIMPRESSIONE (1:1 con Live) */
.pf-dummy-container { position: fixed; z-index: 9999; pointer-events: none; }
.pf-dummy-container[data-show-dummy="false"], .pf-dummy-container[data-show-dummy="0"] { display: none !important; }
.pf-dummy-container[data-position="bottom"] { bottom: 30px; left: 50%; transform: translateX(-50%); }
.pf-dummy-container[data-position="top"] { top: 30px; left: 50%; transform: translateX(-50%); }
.pf-dummy-container[data-position="left"] { left: 30px; top: 50%; transform: translateY(-50%); }
.pf-dummy-container[data-position="right"] { right: 30px; top: 50%; transform: translateY(-50%); }

.pf-preview-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; pointer-events: auto; }
.pf-dummy-container[data-position="left"] .pf-preview-wrapper, .pf-dummy-container[data-position="right"] .pf-preview-wrapper { flex-direction: column; }

.pf-preview-dots { display: flex; gap: 12px; align-items: center; justify-content: center; }
.pf-dummy-container[data-position="left"] .pf-preview-dots, .pf-dummy-container[data-position="right"] .pf-preview-dots { flex-direction: column; }

.pf-preview-wrapper[data-container="true"] { padding: 12px 24px; }
.pf-dummy-container[data-position="left"] .pf-preview-wrapper[data-container="true"], .pf-dummy-container[data-position="right"] .pf-preview-wrapper[data-container="true"] { padding: 24px 12px; }

.pf-preview-bg { position: absolute; inset: 0; border-radius: 50px; z-index: -1; display: none; }
.pf-preview-wrapper[data-container="true"] .pf-preview-bg { display: block; }

.pf-dummy-arrow { display: none; align-items: center; justify-content: center; opacity: 0.5; }
.pf-preview-wrapper[data-arrows="true"] .pf-dummy-arrow { display: flex; }

.pf-icon-horiz { display: block; }
.pf-icon-vert { display: none; }
.pf-dummy-container[data-position="left"] .pf-icon-horiz, .pf-dummy-container[data-position="right"] .pf-icon-horiz { display: none; }
.pf-dummy-container[data-position="left"] .pf-icon-vert, .pf-dummy-container[data-position="right"] .pf-icon-vert { display: block; }

.pf-dummy-dot { display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; transition: all 0.3s; }
.pf-preview-wrapper:not([data-style="numbered"]) .pf-dummy-dot span { display: none; }
.pf-preview-wrapper[data-numbers="false"] .pf-dummy-dot span { display: none; }

.pf-preview-wrapper[data-style="classic"] .pf-dummy-dot { width: 12px; height: 12px; border-radius: 50%; }
.pf-preview-wrapper[data-style="classic"] .pf-dummy-active { transform: scale(1.3); }

.pf-preview-wrapper[data-style="squares"] .pf-dummy-dot { width: 12px; height: 12px; border-radius: 0; }
.pf-preview-wrapper[data-style="squares"] .pf-dummy-active { transform: scale(1.3); }

.pf-preview-wrapper[data-style="pill-dots"] .pf-dummy-dot { width: 12px; height: 12px; border-radius: 12px; }
.pf-preview-wrapper[data-style="pill-dots"]:not([data-position="left"]):not([data-position="right"]) .pf-dummy-active { width: 32px; }
.pf-dummy-container[data-position="left"] .pf-preview-wrapper[data-style="pill-dots"] .pf-dummy-active, .pf-dummy-container[data-position="right"] .pf-preview-wrapper[data-style="pill-dots"] .pf-dummy-active { height: 32px; }

.pf-preview-wrapper[data-style="line-squares"] .pf-dummy-dot { width: 12px; height: 12px; border-radius: 0; }
.pf-preview-wrapper[data-style="line-squares"]:not([data-position="left"]):not([data-position="right"]) .pf-dummy-active { width: 32px; height: 4px; }
.pf-dummy-container[data-position="left"] .pf-preview-wrapper[data-style="line-squares"] .pf-dummy-active, .pf-dummy-container[data-position="right"] .pf-preview-wrapper[data-style="line-squares"] .pf-dummy-active { width: 4px; height: 32px; }

.pf-preview-wrapper[data-style="numbered"] .pf-dummy-dot { width: 36px; height: 36px; border-radius: 50%; color: inherit; }
.pf-preview-wrapper[data-style="numbered"] .pf-dummy-active { color: #ffffff; }
.pf-preview-wrapper[data-style="numbered"][data-inactive-mode="transparent"] .pf-dummy-inactive { background: transparent !important; }

/* -------------------------------------------
   STILE: CUSTOM IMAGE CENTER 
---------------------------------------------*/
.pf-dummy-image-center-wrapper { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); }
.pf-preview-wrapper[data-style="image-center"] .pf-dummy-image-center-wrapper { display: flex; }
.pf-preview-wrapper[data-style="image-center"] .pf-dummy-dot { display: none !important; }
.pf-dummy-center-img-el { width: 100%; height: 100%; object-fit: cover; }
.pf-dummy-center-placeholder { width: 12px; height: 12px; border-radius: 50%; }

/* -------------------------------------------
   CENTER ICON OVERLAY (DESIGN & LIVE)
---------------------------------------------*/
.pf-center-overlay {
	position: fixed; inset: 0; z-index: 1000000;
	display: flex; flex-direction: column;
}

/* Sicurezza Assoluta: Se lo stile non è image-center, nascondi l'overlay forzatamente! */
.pf-center-overlay:not([data-nav-style="image-center"]) {
	display: none !important;
}

.pf-center-overlay[data-editor-preview="false"],
.pf-center-overlay[data-editor-preview="0"] { display: none !important; }

/* FORZA L'ANTEPRIMA OVERLAY IN EDITOR (Bypassa i limiti JS di Elements) */
.pf-center-overlay[data-editor-preview="true"],
.pf-center-overlay[data-editor-preview="1"] {
	opacity: 1 !important;
	pointer-events: auto !important;
	display: flex !important;
}

/* FORZA LA VISIBILITÀ DELLE ICONE (SOLO IN EDITOR) - Fix Anteprima */
.pf-center-overlay[data-editor-preview="true"] .pf-vision-item-wrapper,
.pf-center-overlay[data-editor-preview="1"] .pf-vision-item-wrapper {
	opacity: 1 !important;
	transform: scale(1) translateY(0) !important;
	animation: none !important;
}

.pf-live-mode .pf-center-overlay {
	opacity: 0; pointer-events: none;
	transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}

.pf-live-mode .pf-center-overlay.pf-overlay-active {
	opacity: 1; pointer-events: auto;
}

.pf-overlay-close-btn {
	position: absolute; left: 50%; transform: translateX(-50%);
	cursor: pointer; padding: 16px; display: flex; align-items: center; justify-content: center;
	transition: transform 0.2s; z-index: 1000001;
}
.pf-overlay-close-btn:hover { transform: translateX(-50%) scale(1.1); }
.pf-overlay-close-btn[data-pos="top"] { top: 24px; }
.pf-overlay-close-btn[data-pos="bottom"] { bottom: 24px; }

/* -------------------------------------------
   VISION PRO SPATIAL GRID (APPLE STYLE - RESPONSIVE)
---------------------------------------------*/
.pf-vision-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px; 
	padding: 40px;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
}

.pf-vision-row {
	display: flex;
	justify-content: center;
	gap: 28px; 
}

/* Honeycomb Effect - Margine negativo per far scivolare le righe (applicato dal JS solo dalla seconda riga) */
.pf-vision-row.pf-honeycomb-row {
	margin-top: -15px; 
}

.pf-vision-item-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	opacity: 0;
	will-change: transform, opacity, filter;
	transition: transform 0.4s ease-out, filter 0.4s ease-out; /* Smooth Hover */
}

.pf-vision-item-wrapper:hover {
	transform: scale(1.05) !important; /* Zoom Delicato */
	filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4)) !important;
	z-index: 10;
}

.pf-vision-icon {
	width: var(--pf-v-size, 80px);
	height: var(--pf-v-size, 80px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	border-radius: 50%; /* Reintrodotto stile rotondo per tutte le icone */
	overflow: hidden;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)); 
	transition: width 0.3s ease, height 0.3s ease;
}

.pf-vision-label {
	font-size: var(--pf-v-label-size, 14px);
	font-weight: 500;
	text-align: center;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
	transition: opacity 0.3s ease, font-size 0.3s ease;
}

/* MEDIA QUERIES PER LA RESPONSIVITA' */
@media screen and (max-width: 768px) {
	.pf-vision-grid { gap: 20px; padding: 20px; }
	.pf-vision-row { gap: 20px; }
	.pf-vision-row.pf-honeycomb-row { margin-top: -10px; }
	.pf-vision-icon {
		width: calc(var(--pf-v-size, 80px) * 0.75);
		height: calc(var(--pf-v-size, 80px) * 0.75);
	}
	.pf-vision-label { font-size: calc(var(--pf-v-label-size, 14px) * 0.85); }
}

@media screen and (max-width: 480px) {
	.pf-vision-grid { gap: 12px; padding: 10px; }
	.pf-vision-row { gap: 12px; }
	.pf-vision-row.pf-honeycomb-row { margin-top: -6px; }
	.pf-vision-item-wrapper { gap: 6px; }
	.pf-vision-icon {
		width: calc(var(--pf-v-size, 80px) * 0.6);
		height: calc(var(--pf-v-size, 80px) * 0.6);
	}
	.pf-vision-label { font-size: calc(var(--pf-v-label-size, 14px) * 0.75); }
}

@keyframes appleVisionPop {
	0% { opacity: 0; transform: scale(1.3) translateY(15px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.pf-overlay-active .pf-vision-item-wrapper {
	animation: appleVisionPop 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

/* -------------------------------------------
   FOUC SHIELD & SMART ANIMATIONS 
---------------------------------------------*/
.pf-fouc-shield[data-enabled="false"],
.pf-fouc-shield[data-enabled="0"] { display: none !important; }

.pf-live-mode .pf-anim-text, 
.pf-live-mode .pf-anim-media {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important; 
}

.pf-live-mode .pf-slide-active .pf-anim-text,
.pf-live-mode .pf-slide-active .pf-anim-media {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: var(--pf-delay, 0ms) !important;
}

.pf-live-mode .pf-anim-text-fade-up { transform: translateY(40px) !important; }
.pf-live-mode .pf-anim-text-slide-left { transform: translateX(40px) !important; }
.pf-live-mode .pf-anim-text-fade-in { transform: none !important; }
.pf-live-mode .pf-anim-media-zoom-in { transform: scale(0.85) !important; }
.pf-live-mode .pf-anim-media-fade-up { transform: translateY(40px) !important; }
.pf-live-mode .pf-anim-media-fade-in { transform: scale(1) !important; }/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* Il Wrapper diventa un "Fantasma" per non disturbare i Layout (Flexbox/Grid) dell'utente */
.pf-animator-wrapper {
	display: contents; 
}

/* Stato INIZIALE del contenuto della dropzone (> *) */
/* Resta visibile nell'editor. Si nasconde solo quando la pagina è caricata online! */
.pf-live-mode .pf-animator-wrapper > * {
	opacity: 0 !important;
	will-change: transform, opacity;
	transition: opacity 0.4s ease, transform 0.4s ease !important;
	transition-delay: 0ms !important;
}

/* Mappatura delle posizioni di partenza */
.pf-live-mode .pf-animator-wrapper[data-effect="fade-up"] > * { transform: translateY(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-left"] > * { transform: translateX(-50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="slide-right"] > * { transform: translateX(50px) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="zoom-in"] > * { transform: scale(0.85) !important; }
.pf-live-mode .pf-animator-wrapper[data-effect="fade-in"] > * { transform: none !important; }

/* Stato ATTIVO (Quando la slide genitore entra in scena e riceve la classe dal JS) */
.pf-live-mode .pf-slide-active .pf-animator-wrapper > * {
	opacity: 1 !important;
	transform: translate(0, 0) scale(1) !important;
	
	transition: 
		opacity calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1), 
		transform calc(var(--pf-dur, 800) * 1ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transition-delay: calc(var(--pf-del, 0) * 1ms) !important;
}/* [data-rwx-droparea] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
} */
/* ============================================================
   CHAOS SYSTEM PAGEFLOW NAVIGATION
   Complete standalone system

   Includes:
   - Responsive Chaos System SVG
   - Full construction intro on every PageFlow activation
   - Center-symbol outline draw / fill / stroke removal
   - Tendril-circuit outline draw / fill / stroke removal
   - Six-node reveal cascade
   - Whole-interface scale / upward settle
   - Automatic reset when the PageFlow slide deactivates
   - Replay whenever the PageFlow slide becomes current again
   - Existing route / center / node interaction behavior
   - Native route glow controls
   - Reduced-motion handling
   ============================================================ */


/* ============================================================
   1. MASTER CONTROLS
   ============================================================ */

.chaos-navigation {

  /* ==========================================================
     LAYOUT
     ========================================================== */

  display: grid;
  place-items: center;

  width: min(88vw, 88svh);
  max-width: 100%;

  margin-inline: auto;

  line-height: 0;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;



  /* ==========================================================
     PAGEFLOW DRAW — WHOLE INTERFACE SETTLE
     ========================================================== */

  --chaos-intro-start-scale: .84;
  --chaos-intro-start-y: 23px;

  --chaos-intro-settle-duration: 7200ms;

  --chaos-intro-settle-easing:
    cubic-bezier(.18, .72, .18, 1);



  /* ==========================================================
     PAGEFLOW DRAW — CENTER SYMBOL
     ========================================================== */

  /* ---------- CONSTRUCTION STROKE ---------- */

  --chaos-intro-center-stroke-color:
    rgb(255, 255, 255);

  --chaos-intro-center-stroke-width:
    3px;


  /* ---------- DRAW ---------- */

  --chaos-intro-center-draw-delay:
    100ms;

  --chaos-intro-center-draw-duration:
    10000ms;

  --chaos-intro-center-draw-easing:
    cubic-bezier(.4, 0, .2, 1);


  /* ---------- FILL ---------- */

  --chaos-intro-center-fill-delay:
    1800ms;

  --chaos-intro-center-fill-duration:
    2300ms;

  --chaos-intro-center-fill-easing:
    cubic-bezier(.64,.09,.29,.46);


  /* ---------- STROKE REMOVAL ---------- */

  --chaos-intro-center-stroke-out-delay:
    2500ms;

  --chaos-intro-center-stroke-out-duration:
    1000ms;

  --chaos-intro-center-stroke-out-easing:
    ease;



  /* ==========================================================
     PAGEFLOW DRAW — TENDRIL / CIRCUIT PORTION
     ========================================================== */

  --chaos-intro-tendrils-stroke-color:
    rgb(255, 255, 255);

  --chaos-intro-tendrils-stroke-width:
    3px;


  /* ---------- DRAW ---------- */

  --chaos-intro-tendrils-draw-delay:
    2700ms;

  --chaos-intro-tendrils-draw-duration:
    8000ms;

  --chaos-intro-tendrils-draw-easing:
    cubic-bezier(.4, 0, .2, 1);


  /* ---------- FILL ---------- */

  --chaos-intro-tendrils-fill-delay:
    6300ms;

  --chaos-intro-tendrils-fill-duration:
    2300ms;

  --chaos-intro-tendrils-fill-easing:
    cubic-bezier(.64,.09,.29,.46);


  /* ---------- STROKE REMOVAL ---------- */

  --chaos-intro-tendrils-stroke-out-delay:
    8500ms;

  --chaos-intro-tendrils-stroke-out-duration:
    1000ms;

  --chaos-intro-tendrils-stroke-out-easing:
    ease;



  /* ==========================================================
     PAGEFLOW DRAW — SIX LINK NODES
     ========================================================== */

  --chaos-intro-node-duration:
    1600ms;

  --chaos-intro-node-easing:
    cubic-bezier(.64,.09,.29,.46);


  --chaos-intro-video-delay:
    7500ms;

  --chaos-intro-design-delay:
    8000ms;

  --chaos-intro-audio-delay:
    8500ms;

  --chaos-intro-ai-delay:
    9000ms;

  --chaos-intro-resume-delay:
    9500ms;

  --chaos-intro-context-delay:
    10000ms;



  /* ==========================================================
     BACKGROUND DIMMING
     ========================================================== */

  --chaos-background-opacity:
    0.16;



  /* ==========================================================
     ACTIVE ROUTE GLOW
     ========================================================== */

  --chaos-glow-color:
    rgb(16, 216, 2);

  --chaos-glow-near:
    5px;

  --chaos-glow-mid:
    15px;

  --chaos-glow-far:
    34px;



  /* ==========================================================
     SOFT DARK EDGE SEPARATION
     ========================================================== */

  --chaos-edge-color:
    rgb(0 0 0 / 1);

  --chaos-edge-near:
    10px;

  --chaos-edge-far:
    16px;



  /* ==========================================================
     EXISTING INTERACTION TIMING
     ========================================================== */

  --chaos-icon-out-duration:
    560ms;

  --chaos-icon-in-duration:
    440ms;

  --chaos-icon-in-delay:
    30ms;

  --chaos-center-duration:
    580ms;

  --chaos-route-duration:
    800ms;

  --chaos-background-duration:
    620ms;



  /* ==========================================================
     EXISTING INTERACTION EASING
     ========================================================== */

  --chaos-icon-ease:
    cubic-bezier(.22, .7, .2, 1);

  --chaos-center-ease:
    cubic-bezier(.2, .72, .2, 1);

  --chaos-route-ease:
    cubic-bezier(.08, .25, .5, 1);

  --chaos-background-ease:
    ease-in-out;
}



/* ============================================================
   2. SAFE PRE-INITIALIZATION STATE
   ============================================================ */

/*
   Applied before the SVG fetch begins.

   Nothing becomes visible until JavaScript has put
   every relevant element into the correct starting state.
*/

.chaos-navigation.chaos-intro-preparing {
  visibility: hidden;
}



/* ============================================================
   3. SVG BASE
   ============================================================ */

.chaos-navigation svg {

  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  overflow: visible;

  transform-origin:
    center center;
}



/* ============================================================
   4. TEMPORARILY DISABLE NORMAL INTERACTION TRANSITIONS
   ============================================================ */

/*
   The PageFlow construction sequence temporarily owns opacity.

   Normal hover/focus transitions remain disabled until
   the entrance has completely handed control back.
*/

.chaos-navigation.chaos-intro-active
.chaos-node-normal,

.chaos-navigation.chaos-intro-active
.chaos-node-normal-background,

.chaos-navigation.chaos-intro-active
.chaos-node-inverted,

.chaos-navigation.chaos-intro-active
.chaos-node-inverted-background,

.chaos-navigation.chaos-intro-active
.chaos-center,

.chaos-navigation.chaos-intro-active
#chaos-eye,

.chaos-navigation.chaos-intro-active
#chaos-tendrils {

  transition:
    none !important;
}



/* ============================================================
   5. PAGEFLOW DRAW — WHOLE SVG SETTLE
   ============================================================ */

.chaos-navigation.chaos-intro-active svg {

  transform:
    translateY(
      var(--chaos-intro-start-y)
    )
    scale(
      var(--chaos-intro-start-scale)
    );
}


.chaos-navigation.chaos-intro-active.chaos-intro-running svg {

  transform:
    translateY(0)
    scale(1);

  transition:
    transform
    var(--chaos-intro-settle-duration)
    var(--chaos-intro-settle-easing);
}



/* ============================================================
   7. EXISTING HIDDEN INTERACTION ARTWORK
   ============================================================ */

.chaos-navigation .chaos-route,
.chaos-navigation .chaos-center,
.chaos-navigation .chaos-node-inverted,
.chaos-navigation .chaos-node-inverted-background {

  opacity: 0;

  pointer-events: none;
}



/* ============================================================
   8. NORMAL OUTER NODE ARTWORK
   ============================================================ */

.chaos-navigation .chaos-node-normal,
.chaos-navigation .chaos-node-normal-background {

  opacity: 1;

  pointer-events: none;
}



/* ============================================================
   9. DEFAULT CENTER SYMBOL
   ============================================================ */

.chaos-navigation #chaos-eye {

  opacity: 1;

  pointer-events: none;
}



/* ============================================================
   10. TENDRIL / CIRCUIT PORTION
   ============================================================ */

.chaos-navigation #chaos-tendrils {

  opacity: 1;

  pointer-events: none;

  transition:
    opacity
    var(--chaos-background-duration)
    var(--chaos-background-ease);
}


.chaos-navigation.is-engaged #chaos-tendrils {

  opacity:
    var(--chaos-background-opacity);
}



/* ============================================================
   11. ACTIVE ROUTE
   ============================================================ */

.chaos-navigation .chaos-route {

  transition:
    opacity
    var(--chaos-route-duration)
    var(--chaos-route-ease);
}


.chaos-navigation .chaos-route.is-active {
  opacity: 1;
}



/* ============================================================
   12. CENTER TRANSITION
   ============================================================ */

.chaos-navigation #chaos-eye,
.chaos-navigation .chaos-center {

  transition:
    opacity
    var(--chaos-center-duration)
    var(--chaos-center-ease);
}


.chaos-navigation.is-engaged #chaos-eye {
  opacity: 0;
}


.chaos-navigation .chaos-center.is-active {
  opacity: 1;
}



/* ============================================================
   13. OUTER ICON INVERSION
   ============================================================ */

.chaos-navigation .chaos-node-normal,
.chaos-navigation .chaos-node-normal-background {

  transition:
    opacity
    var(--chaos-icon-out-duration)
    var(--chaos-icon-ease);
}


.chaos-navigation .chaos-node-inverted,
.chaos-navigation .chaos-node-inverted-background {

  transition:
    opacity
    var(--chaos-icon-in-duration)
    var(--chaos-icon-ease)
    var(--chaos-icon-in-delay);
}


.chaos-navigation .chaos-node-normal.is-selected,
.chaos-navigation .chaos-node-normal-background.is-selected {

  opacity: 0;
}


.chaos-navigation .chaos-node-inverted.is-selected,
.chaos-navigation .chaos-node-inverted-background.is-selected {

  opacity: 1;
}



/* ============================================================
   14. INTERACTION GEOMETRY
   ============================================================ */

.chaos-navigation .chaos-hit-target {

  fill: transparent;

  stroke: none;

  cursor: pointer;

  pointer-events: all;

  outline: none;
}


.chaos-navigation .chaos-center-hit-target {
  cursor: pointer;
}


/*
   The interface is intentionally noninteractive while the PageFlow construction sequence is running.
*/

.chaos-navigation.chaos-intro-active
.chaos-hit-target {

  pointer-events:
    none !important;
}


.chaos-navigation
.chaos-hit-target:focus-visible {

  stroke:
    currentColor;

  stroke-width:
    8;

  stroke-opacity:
    0.72;

  vector-effect:
    non-scaling-stroke;
}



/* ============================================================
   15. MOBILE ROUTE GLOW
   ============================================================ */

@media (max-width: 767px) {

  .chaos-navigation {

    --chaos-glow-color:
      rgb(16, 216, 2);

    --chaos-glow-mid:
      20px;

    --chaos-glow-far:
      38px;


    --chaos-edge-color:
      rgb(0 0 0 / 1);

    --chaos-edge-near:
      16px;

    --chaos-edge-far:
      23px;
  }
}



/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .chaos-navigation,
  .chaos-navigation * {

    transition-duration:
      1ms !important;

    transition-delay:
      0ms !important;
  }
}