/**
 * BeezWoo Fashion Carousel CSS
 * 
 * Effetti transizione premium stile Fashion TV
 * Ottimizzato per performance con GPU acceleration
 * 
 * @package BeezWoo
 * @since 2.15.7
 */

/* ==========================================================================
   CSS VARIABLES - RESPONSIVE COLUMNS SYSTEM
   ========================================================================== */

.beezwoo-fashion-carousel {
    /* Column defaults - can be overridden by inline styles */
    --fc-columns-desktop: 3;
    --fc-columns-tablet: 2;
    --fc-columns-mobile: 1;
    
    /* Current columns - changes based on device */
    --fc-columns: var(--fc-columns-desktop);
    
    /* Other variables */
    --fc-transition-duration: 700ms;
    --fc-brightness: 100;
    --fc-contrast: 100;
    --fc-saturation: 100;
    --fc-slot-bg: #000000;
    --fc-border-width: 0px;
    --fc-border-color: #ffffff;
    --fc-gap: 15px;
}

/* ==========================================================================
   FRONTEND RESPONSIVE - Media Queries
   ========================================================================== */

/* Tablet breakpoint */
@media screen and (max-width: 1024px) {
    .beezwoo-fashion-carousel {
        --fc-columns: var(--fc-columns-tablet);
    }
}

/* Mobile breakpoint */
@media screen and (max-width: 767px) {
    .beezwoo-fashion-carousel {
        --fc-columns: var(--fc-columns-mobile);
    }
}

/* ==========================================================================
   ELEMENTOR EDITOR RESPONSIVE - Device Classes
   ========================================================================== */

/* Desktop mode (default) */
.elementor-device-desktop .beezwoo-fashion-carousel,
.elementor-editor-active .beezwoo-fashion-carousel {
    --fc-columns: var(--fc-columns-desktop);
}

/* Tablet mode in editor */
.elementor-device-tablet .beezwoo-fashion-carousel {
    --fc-columns: var(--fc-columns-tablet) !important;
}

/* Mobile mode in editor */
.elementor-device-mobile .beezwoo-fashion-carousel {
    --fc-columns: var(--fc-columns-mobile) !important;
}

/* ==========================================================================
   BASE STYLES - CONTENIMENTO ULTRA AGGRESSIVO
   ========================================================================== */

/* Reset per Elementor container */
.elementor-widget-beezwoo-fashion-carousel,
.elementor-widget-beezwoo-fashion-carousel .elementor-widget-container {
    /* Allow card shadows to render outside the grid */
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
}

.beezwoo-fashion-carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Allow shadows (avoid clipping from overflow/paint containment) */
    overflow: visible !important;
    box-sizing: border-box !important;
    contain: layout style;
}

.beezwoo-fc-grid {
    display: grid !important;
    /* USA CSS VARIABLE per le colonne */
    grid-template-columns: repeat(var(--fc-columns, 3), 1fr) !important;
    gap: var(--fc-gap, 15px);
    /* Space for card shadows (prevents clipping inside rounded/hidden parents) */
    padding: 10px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Allow shadows from slots */
    overflow: visible !important;
    contain: layout;
}

/* Lo slot - contenitore principale per ogni card */
.beezwoo-fc-slot {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--fc-slot-bg, #000000);
    aspect-ratio: 4/5;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Keep layout/style containment for performance without breaking box-shadows */
    contain: layout style;
}

/* Fallback per browser senza aspect-ratio - usa padding-bottom */
@supports not (aspect-ratio: 1/1) {
    .beezwoo-fc-slot { padding-bottom: 125%; /* 4:5 default */ }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-1-1 { padding-bottom: 100%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-4-5 { padding-bottom: 125%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-3-4 { padding-bottom: 133.33%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-2-3 { padding-bottom: 150%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-9-16 { padding-bottom: 177.78%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-16-9 { padding-bottom: 56.25%; }
    .beezwoo-fc-slot.beezwoo-fc-slot-ratio-4-3 { padding-bottom: 75%; }
}

/* Aspect ratio sullo SLOT (non sull'item) */
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-1-1 { aspect-ratio: 1/1; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-4-5 { aspect-ratio: 4/5; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-3-4 { aspect-ratio: 3/4; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-2-3 { aspect-ratio: 2/3; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-9-16 { aspect-ratio: 9/16; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-16-9 { aspect-ratio: 16/9; }
.beezwoo-fc-slot.beezwoo-fc-slot-ratio-4-3 { aspect-ratio: 4/3; }

/* Fallback con :has per browser moderni */
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-1-1) { aspect-ratio: 1/1; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-4-5) { aspect-ratio: 4/5; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-3-4) { aspect-ratio: 3/4; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-2-3) { aspect-ratio: 2/3; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-9-16) { aspect-ratio: 9/16; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-16-9) { aspect-ratio: 16/9; }
.beezwoo-fc-slot:has(.beezwoo-fc-ratio-4-3) { aspect-ratio: 4/3; }

/* ======================================================================
   FILL PARENT MODE
   The carousel fills 100% of the parent container's height.
   Works with Elementor flex containers (both row and column directions).

   Height propagation chain (all links must work):
   .elementor-widget        (stretched by flex parent align-items: stretch)
     > .elementor-widget-container  (MUST be height:100% + flex column)
       > .beezwoo-fc-fill           (height:100%, flex:1)
         > .beezwoo-fc-grid         (flex:1 fills carousel)
           > .beezwoo-fc-slot       (no aspect-ratio, fills grid cell)
             > .beezwoo-fc-item     (position:absolute, fills slot)

   The Elementor widget wrapper is the broken link by default — its
   .elementor-widget-container has height:auto so height:100% below
   resolves to 0. We fix this with :has().
   ====================================================================== */

/* 1. Elementor wrapper: grow to fill + propagate height to widget-container */
.elementor-widget:has(.beezwoo-fc-fill) {
    align-self: stretch !important;
    flex: 1 1 0% !important;
}
.elementor-widget:has(.beezwoo-fc-fill) > .elementor-widget-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Carousel container: fill parent, with min-height safety */
.beezwoo-fashion-carousel.beezwoo-fc-fill {
    height: 100% !important;
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 250px;
}

/* 3. Grid: fill the carousel */
.beezwoo-fc-fill .beezwoo-fc-grid {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

/* 4. Slots: fill grid cells, no aspect-ratio */
.beezwoo-fc-fill .beezwoo-fc-slot {
    aspect-ratio: unset !important;
    height: 100% !important;
}

/* Fallback: no aspect-ratio support */
@supports not (aspect-ratio: 1/1) {
    .beezwoo-fc-fill .beezwoo-fc-slot {
        padding-bottom: 0 !important;
        height: 100% !important;
    }
}

/* TUTTI gli item sono SEMPRE absolute - riempiono lo slot */
.beezwoo-fashion-carousel .beezwoo-fc-item,
.beezwoo-fc-slot .beezwoo-fc-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    visibility: hidden;
    overflow: hidden !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: var(--fc-slot-bg, #000000);
    z-index: 1;
    padding: 0 !important;
    margin: 0 !important;
}

/* Item attivo - RIMANE absolute ma diventa visibile */
.beezwoo-fashion-carousel .beezwoo-fc-item.is-active,
.beezwoo-fc-slot .beezwoo-fc-item.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
}

/* Item in transizione */
.beezwoo-fc-item.is-leaving {
    z-index: 3;
}

.beezwoo-fc-item.is-entering {
    z-index: 4;
    /* Override base hidden state so in-animation is visible (cross-fade, clip-path reveals) */
    visibility: visible !important;
}

/* Link riempie tutto l'item */
.beezwoo-fashion-carousel .beezwoo-fc-link,
.beezwoo-fc-slot .beezwoo-fc-link,
.beezwoo-fc-item .beezwoo-fc-link {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Container immagine riempie tutto */
.beezwoo-fashion-carousel .beezwoo-fc-image,
.beezwoo-fc-slot .beezwoo-fc-image,
.beezwoo-fc-item .beezwoo-fc-image,
.beezwoo-fc-link .beezwoo-fc-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Immagine DEVE riempire il container - regole aggressive */
.beezwoo-fashion-carousel .beezwoo-fc-image img,
.beezwoo-fc-slot .beezwoo-fc-image img,
.beezwoo-fc-item .beezwoo-fc-image img,
.beezwoo-fc-link .beezwoo-fc-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: transform 0.5s ease, filter 0.3s ease;
    /* Filter values: --fc-brightness/contrast/saturation are 0-200, need to convert to 0-2 range */
    filter: brightness(calc(var(--fc-brightness, 100) / 100)) 
            contrast(calc(var(--fc-contrast, 100) / 100)) 
            saturate(calc(var(--fc-saturation, 100) / 100));
}

/* ==========================================================================
   ASPECT RATIOS (classi per compatibilità - applicate agli item)
   ========================================================================== */

.beezwoo-fc-ratio-1-1,
.beezwoo-fc-ratio-4-5,
.beezwoo-fc-ratio-3-4,
.beezwoo-fc-ratio-2-3,
.beezwoo-fc-ratio-9-16,
.beezwoo-fc-ratio-16-9,
.beezwoo-fc-ratio-4-3 {
    /* Le classi ratio sugli item servono solo per il :has selector */
}

/* ==========================================================================
   OVERLAY
   ========================================================================== */

.beezwoo-fc-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   HOVER EFFECTS
   ========================================================================== */

.beezwoo-fc-hover-zoom .beezwoo-fc-item:hover .beezwoo-fc-image img {
    transform: scale(1.08);
}

.beezwoo-fc-hover-zoom-rotate .beezwoo-fc-item:hover .beezwoo-fc-image img {
    transform: scale(1.08) rotate(2deg);
}

.beezwoo-fc-hover-brightness .beezwoo-fc-item:hover .beezwoo-fc-image img {
    filter: brightness(120%);
}

.beezwoo-fc-hover-grayscale .beezwoo-fc-image img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.beezwoo-fc-hover-grayscale .beezwoo-fc-item:hover .beezwoo-fc-image img {
    filter: grayscale(0%);
}

.beezwoo-fc-hover-blur .beezwoo-fc-item:hover .beezwoo-fc-image img {
    filter: blur(2px);
}

/* Shine Effect */
.beezwoo-fc-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,0.4) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 3;
}

.beezwoo-fc-hover-shine .beezwoo-fc-item:hover .beezwoo-fc-shine {
    animation: beezwoo-fc-shine 0.8s ease-out;
}

@keyframes beezwoo-fc-shine {
    to { transform: translateX(100%); }
}

/* ==========================================================================
   TRANSITION EFFECTS - CINEMATOGRAFICI
   ========================================================================== */

/* Glitch Effect */
.beezwoo-fc-trans-glitch .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-glitch-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-glitch .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-glitch-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-glitch-out {
    0% { 
        opacity: 1;
        clip-path: inset(0);
    }
    20% { 
        opacity: 1;
        clip-path: inset(10% 0 30% 0);
        transform: translateX(5px);
        filter: hue-rotate(90deg);
    }
    40% { 
        clip-path: inset(50% 0 20% 0);
        transform: translateX(-8px);
        filter: hue-rotate(180deg);
    }
    60% { 
        clip-path: inset(20% 0 60% 0);
        transform: translateX(3px);
        filter: hue-rotate(270deg);
    }
    80% { 
        clip-path: inset(70% 0 5% 0);
        transform: translateX(-5px);
    }
    100% { 
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
}

@keyframes beezwoo-fc-glitch-in {
    0% { 
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    20% { 
        opacity: 1;
        clip-path: inset(70% 0 5% 0);
        transform: translateX(-5px);
        filter: hue-rotate(270deg);
    }
    40% { 
        clip-path: inset(20% 0 60% 0);
        transform: translateX(3px);
        filter: hue-rotate(180deg);
    }
    60% { 
        clip-path: inset(50% 0 20% 0);
        transform: translateX(-8px);
        filter: hue-rotate(90deg);
    }
    80% { 
        clip-path: inset(10% 0 30% 0);
        transform: translateX(5px);
    }
    100% { 
        opacity: 1;
        clip-path: inset(0);
        transform: translateX(0);
        filter: none;
    }
}

/* Flash Effect */
.beezwoo-fc-trans-flash .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-flash-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-flash .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-flash-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-flash-out {
    0% { 
        opacity: 1;
        filter: brightness(1);
        transform: scale(1);
    }
    30% { 
        filter: brightness(3);
        transform: scale(1.02);
    }
    100% { 
        opacity: 0;
        filter: brightness(3);
        transform: scale(1.1);
    }
}

@keyframes beezwoo-fc-flash-in {
    0% { 
        opacity: 0;
        filter: brightness(3);
        transform: scale(0.9);
    }
    30% { 
        opacity: 1;
        filter: brightness(2);
    }
    100% { 
        opacity: 1;
        filter: brightness(1);
        transform: scale(1);
    }
}

/* Zoom Blur Effect */
.beezwoo-fc-trans-zoom-blur .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-zoom-blur-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-zoom-blur .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-zoom-blur-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-zoom-blur-out {
    0% { 
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% { 
        opacity: 0;
        transform: scale(1.3);
        filter: blur(20px);
    }
}

@keyframes beezwoo-fc-zoom-blur-in {
    0% { 
        opacity: 0;
        transform: scale(1.3);
        filter: blur(20px);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - FASHION TV STYLE
   ========================================================================== */

/* Slice Horizontal */
.beezwoo-fc-trans-slice-horizontal .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slice-h-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slice-horizontal .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slice-h-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slice-h-out {
    0% { 
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% { 
        opacity: 0;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
}

@keyframes beezwoo-fc-slice-h-in {
    0% { 
        opacity: 0;
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    100% { 
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Slice Vertical */
.beezwoo-fc-trans-slice-vertical .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slice-v-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slice-vertical .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slice-v-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slice-v-out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% { 
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-slice-v-in {
    0% { 
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* Reveal Effects */
.beezwoo-fc-trans-reveal-left .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-reveal-left-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-reveal-left .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-reveal-left-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-reveal-left-out {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

@keyframes beezwoo-fc-reveal-left-in {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.beezwoo-fc-trans-reveal-right .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-reveal-right-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-reveal-right .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-reveal-right-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-reveal-right-out {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}

@keyframes beezwoo-fc-reveal-right-in {
    0% { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}

.beezwoo-fc-trans-reveal-up .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-reveal-up-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-reveal-up .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-reveal-up-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-reveal-up-out {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
}

@keyframes beezwoo-fc-reveal-up-in {
    0% { clip-path: inset(100% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.beezwoo-fc-trans-reveal-down .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-reveal-down-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-reveal-down .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-reveal-down-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-reveal-down-out {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
}

@keyframes beezwoo-fc-reveal-down-in {
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   TRANSITION EFFECTS - PREMIUM
   ========================================================================== */

/* Split Horizontal */
.beezwoo-fc-trans-split-horizontal .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-split-h-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-split-horizontal .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-split-h-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-split-h-out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% { 
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 100% 0, 100% 0);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-split-h-in {
    0% { 
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* Split Vertical */
.beezwoo-fc-trans-split-vertical .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-split-v-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-split-vertical .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-split-v-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-split-v-out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% { 
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-split-v-in {
    0% { 
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* Shutter Effect - SMOOTH */
.beezwoo-fc-trans-shutter .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-shutter-out var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-shutter .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-shutter-in var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beezwoo-fc-shutter-out {
    0% { 
        clip-path: polygon(
            0% 0%, 12.5% 0%, 12.5% 100%, 0% 100%,
            12.5% 0%, 25% 0%, 25% 100%, 12.5% 100%,
            25% 0%, 37.5% 0%, 37.5% 100%, 25% 100%,
            37.5% 0%, 50% 0%, 50% 100%, 37.5% 100%,
            50% 0%, 62.5% 0%, 62.5% 100%, 50% 100%,
            62.5% 0%, 75% 0%, 75% 100%, 62.5% 100%,
            75% 0%, 87.5% 0%, 87.5% 100%, 75% 100%,
            87.5% 0%, 100% 0%, 100% 100%, 87.5% 100%
        );
    }
    100% { 
        clip-path: polygon(
            0% 50%, 12.5% 50%, 12.5% 50%, 0% 50%,
            12.5% 50%, 25% 50%, 25% 50%, 12.5% 50%,
            25% 50%, 37.5% 50%, 37.5% 50%, 25% 50%,
            37.5% 50%, 50% 50%, 50% 50%, 37.5% 50%,
            50% 50%, 62.5% 50%, 62.5% 50%, 50% 50%,
            62.5% 50%, 75% 50%, 75% 50%, 62.5% 50%,
            75% 50%, 87.5% 50%, 87.5% 50%, 75% 50%,
            87.5% 50%, 100% 50%, 100% 50%, 87.5% 50%
        );
        opacity: 0;
    }
}

@keyframes beezwoo-fc-shutter-in {
    0% { 
        clip-path: polygon(
            0% 50%, 12.5% 50%, 12.5% 50%, 0% 50%,
            12.5% 50%, 25% 50%, 25% 50%, 12.5% 50%,
            25% 50%, 37.5% 50%, 37.5% 50%, 25% 50%,
            37.5% 50%, 50% 50%, 50% 50%, 37.5% 50%,
            50% 50%, 62.5% 50%, 62.5% 50%, 50% 50%,
            62.5% 50%, 75% 50%, 75% 50%, 62.5% 50%,
            75% 50%, 87.5% 50%, 87.5% 50%, 75% 50%,
            87.5% 50%, 100% 50%, 100% 50%, 87.5% 50%
        );
        opacity: 0;
    }
    100% { 
        clip-path: polygon(
            0% 0%, 12.5% 0%, 12.5% 100%, 0% 100%,
            12.5% 0%, 25% 0%, 25% 100%, 12.5% 100%,
            25% 0%, 37.5% 0%, 37.5% 100%, 25% 100%,
            37.5% 0%, 50% 0%, 50% 100%, 37.5% 100%,
            50% 0%, 62.5% 0%, 62.5% 100%, 50% 100%,
            62.5% 0%, 75% 0%, 75% 100%, 62.5% 100%,
            75% 0%, 87.5% 0%, 87.5% 100%, 75% 100%,
            87.5% 0%, 100% 0%, 100% 100%, 87.5% 100%
        );
        opacity: 1;
    }
}

/* Fold Effect */
.beezwoo-fc-trans-fold .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-fold {
    perspective: 1000px;
}

.beezwoo-fc-trans-fold .beezwoo-fc-item.is-leaving {
    transform-origin: left center;
    animation: beezwoo-fc-fold-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-fold .beezwoo-fc-item.is-entering {
    transform-origin: right center;
    animation: beezwoo-fc-fold-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-fold-out {
    0% { 
        transform: rotateY(0deg);
        opacity: 1;
    }
    100% { 
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-fold-in {
    0% { 
        transform: rotateY(90deg);
        opacity: 0;
    }
    100% { 
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - ELEGANTI
   ========================================================================== */

/* Dissolve */
.beezwoo-fc-trans-dissolve .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-dissolve-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-dissolve .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-dissolve-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-dissolve-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes beezwoo-fc-dissolve-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade Scale */
.beezwoo-fc-trans-fade-scale .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-fade-scale-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-fade-scale .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-fade-scale-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-fade-scale-out {
    0% { 
        opacity: 1;
        transform: scale(1);
    }
    100% { 
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes beezwoo-fc-fade-scale-in {
    0% { 
        opacity: 0;
        transform: scale(1.05);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Ken Burns */
.beezwoo-fc-trans-ken-burns .beezwoo-fc-item.is-active .beezwoo-fc-image img {
    animation: beezwoo-fc-ken-burns 8s ease-in-out infinite alternate;
}

.beezwoo-fc-trans-ken-burns .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-fade-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-ken-burns .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-fade-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-ken-burns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -2%); }
}

@keyframes beezwoo-fc-fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes beezwoo-fc-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   TRANSITION EFFECTS - DINAMICI
   ========================================================================== */

/* Rotate Scale */
.beezwoo-fc-trans-rotate-scale .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-rotate-scale-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-rotate-scale .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-rotate-scale-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-rotate-scale-out {
    0% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    100% { 
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
}

@keyframes beezwoo-fc-rotate-scale-in {
    0% { 
        opacity: 0;
        transform: scale(0.8) rotate(10deg);
    }
    100% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Flip X */
.beezwoo-fc-trans-flip-x .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-flip-x {
    perspective: 1000px;
}

.beezwoo-fc-trans-flip-x .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-flip-x-out var(--fc-transition-duration) ease-in-out forwards;
    backface-visibility: hidden;
}

.beezwoo-fc-trans-flip-x .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-flip-x-in var(--fc-transition-duration) ease-in-out forwards;
    backface-visibility: hidden;
}

@keyframes beezwoo-fc-flip-x-out {
    0% { transform: rotateY(0deg); opacity: 1; }
    50% { opacity: 0; }
    100% { transform: rotateY(180deg); opacity: 0; }
}

@keyframes beezwoo-fc-flip-x-in {
    0% { transform: rotateY(-180deg); opacity: 0; }
    50% { opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

/* Flip Y */
.beezwoo-fc-trans-flip-y .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-flip-y {
    perspective: 1000px;
}

.beezwoo-fc-trans-flip-y .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-flip-y-out var(--fc-transition-duration) ease-in-out forwards;
    backface-visibility: hidden;
}

.beezwoo-fc-trans-flip-y .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-flip-y-in var(--fc-transition-duration) ease-in-out forwards;
    backface-visibility: hidden;
}

@keyframes beezwoo-fc-flip-y-out {
    0% { transform: rotateX(0deg); opacity: 1; }
    50% { opacity: 0; }
    100% { transform: rotateX(180deg); opacity: 0; }
}

@keyframes beezwoo-fc-flip-y-in {
    0% { transform: rotateX(-180deg); opacity: 0; }
    50% { opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* Cube */
.beezwoo-fc-trans-cube .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-cube {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.beezwoo-fc-trans-cube .beezwoo-fc-item.is-leaving {
    transform-origin: right center;
    animation: beezwoo-fc-cube-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-cube .beezwoo-fc-item.is-entering {
    transform-origin: left center;
    animation: beezwoo-fc-cube-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-cube-out {
    0% { 
        transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateZ(-100px) rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-cube-in {
    0% { 
        transform: translateZ(-100px) rotateY(90deg);
        opacity: 0;
    }
    100% { 
        transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - CLIP-PATH (PREMIUM)
   ========================================================================== */

/* Iris - cerchio che si espande dal centro */
.beezwoo-fc-trans-iris .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-iris-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-iris .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-iris-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-iris-out {
    0% { 
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
    100% { 
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-iris-in {
    0% { 
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
    100% { 
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
}

/* Diamond - diamante che si espande */
.beezwoo-fc-trans-diamond .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-diamond-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-diamond .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-diamond-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-diamond-out {
    0% { 
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        opacity: 1;
    }
    100% { 
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-diamond-in {
    0% { 
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        opacity: 1;
    }
}

/* Wipe Circle - cerchio che wipe da angolo */
.beezwoo-fc-trans-wipe-circle .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-wipe-circle-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-wipe-circle .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-wipe-circle-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-wipe-circle-out {
    0% { 
        clip-path: circle(150% at 0% 0%);
        opacity: 1;
    }
    100% { 
        clip-path: circle(0% at 0% 0%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-wipe-circle-in {
    0% { 
        clip-path: circle(0% at 100% 100%);
        opacity: 0;
    }
    100% { 
        clip-path: circle(150% at 100% 100%);
        opacity: 1;
    }
}

/* Morph - morphing organico */
.beezwoo-fc-trans-morph .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-morph-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-morph .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-morph-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-morph-out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    50% {
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        opacity: 0.5;
    }
    100% { 
        clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-morph-in {
    0% { 
        clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
        opacity: 0;
    }
    50% {
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        opacity: 0.5;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - CURTAIN / WIPE
   ========================================================================== */

/* Curtain Horizontal - tendina orizzontale */
.beezwoo-fc-trans-curtain-horizontal .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-curtain-h-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-curtain-horizontal .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-curtain-h-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-curtain-h-out {
    0% { 
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    100% { 
        clip-path: inset(0 50% 0 50%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-curtain-h-in {
    0% { 
        clip-path: inset(0 50% 0 50%);
        opacity: 0;
    }
    100% { 
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Curtain Vertical - tendina verticale */
.beezwoo-fc-trans-curtain-vertical .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-curtain-v-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-curtain-vertical .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-curtain-v-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-curtain-v-out {
    0% { 
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    100% { 
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-curtain-v-in {
    0% { 
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
    }
    100% { 
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Blinds - effetto veneziane */
.beezwoo-fc-trans-blinds .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-blinds-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-blinds .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-blinds-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-blinds-out {
    0% { 
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 20%, 0% 20%,
            0% 20%, 100% 20%, 100% 40%, 0% 40%,
            0% 40%, 100% 40%, 100% 60%, 0% 60%,
            0% 60%, 100% 60%, 100% 80%, 0% 80%,
            0% 80%, 100% 80%, 100% 100%, 0% 100%
        );
        opacity: 1;
    }
    100% { 
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 0%, 0% 0%,
            0% 20%, 100% 20%, 100% 20%, 0% 20%,
            0% 40%, 100% 40%, 100% 40%, 0% 40%,
            0% 60%, 100% 60%, 100% 60%, 0% 60%,
            0% 80%, 100% 80%, 100% 80%, 0% 80%
        );
        opacity: 0;
    }
}

@keyframes beezwoo-fc-blinds-in {
    0% { 
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 0%, 0% 0%,
            0% 20%, 100% 20%, 100% 20%, 0% 20%,
            0% 40%, 100% 40%, 100% 40%, 0% 40%,
            0% 60%, 100% 60%, 100% 60%, 0% 60%,
            0% 80%, 100% 80%, 100% 80%, 0% 80%
        );
        opacity: 0;
    }
    100% { 
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 20%, 0% 20%,
            0% 20%, 100% 20%, 100% 40%, 0% 40%,
            0% 40%, 100% 40%, 100% 60%, 0% 60%,
            0% 60%, 100% 60%, 100% 80%, 0% 80%,
            0% 80%, 100% 80%, 100% 100%, 0% 100%
        );
        opacity: 1;
    }
}

/* Slice Diagonal */
.beezwoo-fc-trans-slice-diagonal .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slice-diag-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slice-diagonal .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slice-diag-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slice-diag-out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% { 
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-slice-diag-in {
    0% { 
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - BOOK / FOLD
   ========================================================================== */

/* Book - gira pagina */
.beezwoo-fc-trans-book .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-book {
    perspective: 1500px;
}

.beezwoo-fc-trans-book .beezwoo-fc-item.is-leaving {
    transform-origin: left center;
    animation: beezwoo-fc-book-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-book .beezwoo-fc-item.is-entering {
    transform-origin: right center;
    animation: beezwoo-fc-book-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-book-out {
    0% { 
        transform: rotateY(0deg);
        opacity: 1;
    }
    100% { 
        transform: rotateY(-120deg);
        opacity: 0;
    }
}

@keyframes beezwoo-fc-book-in {
    0% { 
        transform: rotateY(120deg);
        opacity: 0;
    }
    100% { 
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - ELEGANTI
   ========================================================================== */

/* Blur Fade */
.beezwoo-fc-trans-blur-fade .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-blur-fade-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-blur-fade .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-blur-fade-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-blur-fade-out {
    0% { 
        opacity: 1;
        filter: blur(0px);
    }
    100% { 
        opacity: 0;
        filter: blur(20px);
    }
}

@keyframes beezwoo-fc-blur-fade-in {
    0% { 
        opacity: 0;
        filter: blur(20px);
    }
    100% { 
        opacity: 1;
        filter: blur(0px);
    }
}

/* Soft Zoom */
.beezwoo-fc-trans-soft-zoom .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-soft-zoom-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-soft-zoom .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-soft-zoom-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-soft-zoom-out {
    0% { 
        opacity: 1;
        transform: scale(1);
    }
    100% { 
        opacity: 0;
        transform: scale(1.15);
    }
}

@keyframes beezwoo-fc-soft-zoom-in {
    0% { 
        opacity: 0;
        transform: scale(0.9);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   TRANSITION EFFECTS - SLIDE
   ========================================================================== */

/* Slide Left */
.beezwoo-fc-trans-slide-left .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slide-left-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slide-left .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slide-left-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slide-left-out {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes beezwoo-fc-slide-left-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Slide Right */
.beezwoo-fc-trans-slide-right .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slide-right-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slide-right .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slide-right-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slide-right-out {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes beezwoo-fc-slide-right-in {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Slide Up */
.beezwoo-fc-trans-slide-up .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slide-up-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slide-up .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slide-up-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slide-up-out {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes beezwoo-fc-slide-up-in {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Slide Down */
.beezwoo-fc-trans-slide-down .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-slide-down-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-slide-down .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-slide-down-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-slide-down-out {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

@keyframes beezwoo-fc-slide-down-in {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   TRANSITION EFFECTS - DINAMICI
   ========================================================================== */

/* Swing - oscillazione pendolare */
.beezwoo-fc-trans-swing .beezwoo-fc-slot,
.beezwoo-fc-slot.beezwoo-fc-trans-swing {
    perspective: 1000px;
}

.beezwoo-fc-trans-swing .beezwoo-fc-item.is-leaving {
    transform-origin: top center;
    animation: beezwoo-fc-swing-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-swing .beezwoo-fc-item.is-entering {
    transform-origin: top center;
    animation: beezwoo-fc-swing-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-swing-out {
    0% { transform: rotateX(0deg); opacity: 1; }
    50% { transform: rotateX(-30deg); }
    100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes beezwoo-fc-swing-in {
    0% { transform: rotateX(90deg); opacity: 0; }
    50% { transform: rotateX(30deg); }
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* ==========================================================================
   TRANSITION EFFECTS - SPECIALI
   ========================================================================== */

/* Pixelate - simulato con scala e blur SMOOTH */
.beezwoo-fc-trans-pixelate .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-pixelate-out var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-pixelate .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-pixelate-in var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beezwoo-fc-pixelate-out {
    0% { 
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
    50% {
        filter: blur(4px);
        transform: scale(1.02);
    }
    100% { 
        opacity: 0;
        filter: blur(8px);
        transform: scale(1.05);
    }
}

@keyframes beezwoo-fc-pixelate-in {
    0% { 
        opacity: 0;
        filter: blur(8px);
        transform: scale(1.05);
    }
    50% {
        filter: blur(4px);
        transform: scale(1.02);
    }
    100% { 
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

/* Noise - rumore TV vintage */
.beezwoo-fc-trans-noise .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-noise-out var(--fc-transition-duration) linear forwards;
}

.beezwoo-fc-trans-noise .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-noise-in var(--fc-transition-duration) linear forwards;
}

@keyframes beezwoo-fc-noise-out {
    0% { opacity: 1; filter: grayscale(0) brightness(1); }
    20% { filter: grayscale(0.5) brightness(1.5); }
    40% { filter: grayscale(1) brightness(0.5); }
    60% { filter: grayscale(0.5) brightness(1.5); opacity: 0.5; }
    80% { filter: grayscale(1) brightness(0.3); }
    100% { opacity: 0; filter: grayscale(1) brightness(0); }
}

@keyframes beezwoo-fc-noise-in {
    0% { opacity: 0; filter: grayscale(1) brightness(0); }
    20% { filter: grayscale(1) brightness(0.3); }
    40% { filter: grayscale(0.5) brightness(1.5); opacity: 0.5; }
    60% { filter: grayscale(1) brightness(0.5); }
    80% { filter: grayscale(0.5) brightness(1.5); }
    100% { opacity: 1; filter: grayscale(0) brightness(1); }
}

/* ==========================================================================
   2025 TREND EFFECTS
   ========================================================================== */

/* Liquid - movimento fluido come acqua */
.beezwoo-fc-trans-liquid .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-liquid-out var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-liquid .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-liquid-in var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beezwoo-fc-liquid-out {
    0% { 
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
    }
    30% {
        clip-path: inset(0 0 0 0 round 0 50% 0 50%);
        filter: blur(2px);
    }
    60% {
        clip-path: inset(10% 20% 10% 20% round 50%);
        filter: blur(4px);
    }
    100% { 
        opacity: 0;
        clip-path: inset(50% 50% 50% 50% round 50%);
        filter: blur(8px);
    }
}

@keyframes beezwoo-fc-liquid-in {
    0% { 
        opacity: 0;
        clip-path: inset(50% 50% 50% 50% round 50%);
        filter: blur(8px);
    }
    40% {
        clip-path: inset(10% 20% 10% 20% round 50%);
        filter: blur(4px);
    }
    70% {
        clip-path: inset(0 0 0 0 round 0 50% 0 50%);
        filter: blur(2px);
    }
    100% { 
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
    }
}

/* VHS - distorsione retro SMOOTH */
.beezwoo-fc-trans-vhs .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-vhs-out var(--fc-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.beezwoo-fc-trans-vhs .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-vhs-in var(--fc-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes beezwoo-fc-vhs-out {
    0% { 
        opacity: 1;
        filter: saturate(1.2) contrast(1.1);
        transform: translateX(0) skewX(0deg);
    }
    25% {
        filter: saturate(0.5) contrast(1.5) hue-rotate(10deg);
        transform: translateX(-3px) skewX(2deg);
    }
    50% {
        filter: saturate(0.2) contrast(2) hue-rotate(-10deg);
        transform: translateX(3px) skewX(-2deg);
    }
    75% {
        filter: saturate(0) contrast(0.5);
        transform: translateX(-2px) skewX(1deg);
    }
    100% { 
        opacity: 0;
        filter: saturate(0) contrast(0);
        transform: translateX(0) skewX(0deg);
    }
}

@keyframes beezwoo-fc-vhs-in {
    0% { 
        opacity: 0;
        filter: saturate(0) contrast(0);
        transform: translateX(0) skewX(0deg);
    }
    25% {
        filter: saturate(0) contrast(0.5);
        transform: translateX(2px) skewX(-1deg);
    }
    50% {
        filter: saturate(0.2) contrast(2) hue-rotate(10deg);
        transform: translateX(-3px) skewX(2deg);
    }
    75% {
        filter: saturate(0.5) contrast(1.5) hue-rotate(-10deg);
        transform: translateX(3px) skewX(-2deg);
    }
    100% { 
        opacity: 1;
        filter: saturate(1.2) contrast(1.1);
        transform: translateX(0) skewX(0deg);
    }
}

/* Chromatic - aberrazione cromatica RGB */
.beezwoo-fc-trans-chromatic .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-chromatic-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-chromatic .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-chromatic-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-chromatic-out {
    0% { 
        opacity: 1;
        filter: blur(0);
    }
    30% {
        filter: blur(0) drop-shadow(-4px 0 0 rgba(255,0,0,0.5)) drop-shadow(4px 0 0 rgba(0,255,255,0.5));
    }
    60% {
        filter: blur(2px) drop-shadow(-8px 0 0 rgba(255,0,0,0.7)) drop-shadow(8px 0 0 rgba(0,255,255,0.7));
    }
    100% { 
        opacity: 0;
        filter: blur(4px) drop-shadow(-12px 0 0 rgba(255,0,0,0.3)) drop-shadow(12px 0 0 rgba(0,255,255,0.3));
    }
}

@keyframes beezwoo-fc-chromatic-in {
    0% { 
        opacity: 0;
        filter: blur(4px) drop-shadow(-12px 0 0 rgba(255,0,0,0.3)) drop-shadow(12px 0 0 rgba(0,255,255,0.3));
    }
    40% {
        filter: blur(2px) drop-shadow(-8px 0 0 rgba(255,0,0,0.7)) drop-shadow(8px 0 0 rgba(0,255,255,0.7));
    }
    70% {
        filter: blur(0) drop-shadow(-4px 0 0 rgba(255,0,0,0.5)) drop-shadow(4px 0 0 rgba(0,255,255,0.5));
    }
    100% { 
        opacity: 1;
        filter: blur(0);
    }
}

/* Dreamscape - transizione onirica */
.beezwoo-fc-trans-dreamscape .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-dreamscape-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-dreamscape .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-dreamscape-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-dreamscape-out {
    0% { 
        opacity: 1;
        filter: blur(0) brightness(1) saturate(1);
        transform: scale(1);
    }
    50% {
        filter: blur(15px) brightness(1.3) saturate(0.5);
        transform: scale(1.05);
    }
    100% { 
        opacity: 0;
        filter: blur(30px) brightness(1.5) saturate(0);
        transform: scale(1.1);
    }
}

@keyframes beezwoo-fc-dreamscape-in {
    0% { 
        opacity: 0;
        filter: blur(30px) brightness(1.5) saturate(0);
        transform: scale(1.1);
    }
    50% {
        filter: blur(15px) brightness(1.3) saturate(0.5);
        transform: scale(1.05);
    }
    100% { 
        opacity: 1;
        filter: blur(0) brightness(1) saturate(1);
        transform: scale(1);
    }
}

/* Elastic - rimbalzo elastico */
.beezwoo-fc-trans-elastic .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-elastic-out var(--fc-transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.beezwoo-fc-trans-elastic .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-elastic-in var(--fc-transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes beezwoo-fc-elastic-out {
    0% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    20% {
        transform: scale(1.1) translateY(-10px);
    }
    50% {
        transform: scale(0.9) translateY(5px);
    }
    100% { 
        opacity: 0;
        transform: scale(0.5) translateY(100%);
    }
}

@keyframes beezwoo-fc-elastic-in {
    0% { 
        opacity: 0;
        transform: scale(0.5) translateY(-100%);
    }
    50% {
        transform: scale(1.1) translateY(5px);
    }
    80% {
        transform: scale(0.95) translateY(-3px);
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Wave - ondulazione fluida */
.beezwoo-fc-trans-wave .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-wave-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-wave .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-wave-in var(--fc-transition-duration) ease-in-out forwards;
}

@keyframes beezwoo-fc-wave-out {
    0% { 
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 50% 75%, 25% 100%, 0% 75%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 75% 75%, 50% 50%, 25% 75%, 0% 50%);
    }
    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 75% 50%, 50% 25%, 25% 50%, 0% 25%);
    }
    100% { 
        opacity: 0;
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 75% 0%, 50% 0%, 25% 0%, 0% 0%);
    }
}

@keyframes beezwoo-fc-wave-in {
    0% { 
        opacity: 0;
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 75% 100%, 50% 100%, 25% 100%, 0% 100%);
    }
    25% {
        clip-path: polygon(0% 75%, 100% 75%, 100% 100%, 75% 50%, 50% 75%, 25% 50%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 75% 25%, 50% 50%, 25% 25%, 0% 100%);
    }
    75% {
        clip-path: polygon(0% 25%, 100% 25%, 100% 100%, 75% 0%, 50% 25%, 25% 0%, 0% 100%);
    }
    100% { 
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 50% 100%, 25% 100%, 0% 100%);
    }
}

/* Split 3D - split con profondità */
.beezwoo-fc-trans-split-3d .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-split3d-out var(--fc-transition-duration) ease-in-out forwards;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.beezwoo-fc-trans-split-3d .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-split3d-in var(--fc-transition-duration) ease-in-out forwards;
    transform-style: preserve-3d;
    perspective: 1000px;
}

@keyframes beezwoo-fc-split3d-out {
    0% { 
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) scale(1);
        clip-path: inset(0 0 0 0);
    }
    30% {
        clip-path: inset(0 0 0 50%);
        transform: perspective(1000px) rotateY(15deg) scale(0.95);
    }
    60% {
        transform: perspective(1000px) rotateY(30deg) scale(0.9);
    }
    100% { 
        opacity: 0;
        transform: perspective(1000px) rotateY(45deg) scale(0.8) translateX(50%);
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes beezwoo-fc-split3d-in {
    0% { 
        opacity: 0;
        transform: perspective(1000px) rotateY(-45deg) scale(0.8) translateX(-50%);
        clip-path: inset(0 100% 0 0);
    }
    40% {
        transform: perspective(1000px) rotateY(-30deg) scale(0.9);
    }
    70% {
        clip-path: inset(0 50% 0 0);
        transform: perspective(1000px) rotateY(-15deg) scale(0.95);
    }
    100% { 
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) scale(1);
        clip-path: inset(0 0 0 0);
    }
}

/* Double Exposure - sovrapposizione fotografica */
.beezwoo-fc-trans-double-exposure .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-dblexp-out var(--fc-transition-duration) ease-in-out forwards;
}

.beezwoo-fc-trans-double-exposure .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-dblexp-in var(--fc-transition-duration) ease-in-out forwards;
    mix-blend-mode: screen;
}

@keyframes beezwoo-fc-dblexp-out {
    0% { 
        opacity: 1;
        filter: brightness(1) contrast(1);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.3) contrast(0.8);
    }
    100% { 
        opacity: 0;
        filter: brightness(1.5) contrast(0.5);
    }
}

@keyframes beezwoo-fc-dblexp-in {
    0% { 
        opacity: 0;
        filter: brightness(1.5) contrast(0.5);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.3) contrast(0.8);
    }
    100% { 
        opacity: 1;
        filter: brightness(1) contrast(1);
        mix-blend-mode: normal;
    }
}

/* Prism - rifrazione prismatica */
.beezwoo-fc-trans-prism .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-prism-out var(--fc-transition-duration) ease-out forwards;
}

.beezwoo-fc-trans-prism .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-prism-in var(--fc-transition-duration) ease-out forwards;
}

@keyframes beezwoo-fc-prism-out {
    0% { 
        opacity: 1;
        filter: hue-rotate(0deg) saturate(1);
        transform: scale(1);
    }
    25% {
        filter: hue-rotate(30deg) saturate(1.5);
        transform: scale(1.02) skewX(2deg);
    }
    50% {
        filter: hue-rotate(60deg) saturate(2);
        transform: scale(1.05) skewX(-2deg);
    }
    75% {
        filter: hue-rotate(90deg) saturate(1.5);
        transform: scale(1.02) skewX(1deg);
    }
    100% { 
        opacity: 0;
        filter: hue-rotate(120deg) saturate(0);
        transform: scale(0.95);
    }
}

@keyframes beezwoo-fc-prism-in {
    0% { 
        opacity: 0;
        filter: hue-rotate(-120deg) saturate(0);
        transform: scale(0.95);
    }
    25% {
        filter: hue-rotate(-90deg) saturate(1.5);
        transform: scale(1.02) skewX(-1deg);
    }
    50% {
        filter: hue-rotate(-60deg) saturate(2);
        transform: scale(1.05) skewX(2deg);
    }
    75% {
        filter: hue-rotate(-30deg) saturate(1.5);
        transform: scale(1.02) skewX(-2deg);
    }
    100% { 
        opacity: 1;
        filter: hue-rotate(0deg) saturate(1);
        transform: scale(1);
    }
}

/* Magnetic - attrazione magnetica */
.beezwoo-fc-trans-magnetic .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-magnetic-out var(--fc-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.beezwoo-fc-trans-magnetic .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-magnetic-in var(--fc-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes beezwoo-fc-magnetic-out {
    0% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
        clip-path: circle(100% at 50% 50%);
    }
    30% {
        transform: scale(0.95) rotate(2deg);
        clip-path: circle(80% at 60% 50%);
    }
    60% {
        transform: scale(0.85) rotate(-1deg);
        clip-path: circle(50% at 80% 50%);
    }
    100% { 
        opacity: 0;
        transform: scale(0.5) rotate(5deg);
        clip-path: circle(0% at 100% 50%);
    }
}

@keyframes beezwoo-fc-magnetic-in {
    0% { 
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
        clip-path: circle(0% at 0% 50%);
    }
    40% {
        transform: scale(0.85) rotate(1deg);
        clip-path: circle(50% at 20% 50%);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
        clip-path: circle(80% at 40% 50%);
    }
    100% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
        clip-path: circle(100% at 50% 50%);
    }
}

/* ==========================================================================
   LOGO REVEAL EFFECT - Transizione con logo del negozio
   ========================================================================== */

/* Container per logo overlay */
.beezwoo-fc-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.beezwoo-fc-logo-overlay svg,
.beezwoo-fc-logo-overlay img {
    max-width: 60%;
    max-height: 50%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

/* Logo Reveal Effect - immagine sfuma, logo appare */
.beezwoo-fc-trans-logo-reveal .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-logo-reveal-out var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-logo-reveal .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-logo-reveal-in var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Durante la transizione, mostra il logo */
.beezwoo-fc-trans-logo-reveal .beezwoo-fc-slot:has(.is-leaving) .beezwoo-fc-logo-overlay,
.beezwoo-fc-trans-logo-reveal .beezwoo-fc-slot:has(.is-entering) .beezwoo-fc-logo-overlay {
    animation: beezwoo-fc-logo-pulse var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beezwoo-fc-logo-reveal-out {
    0% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
    30% {
        filter: brightness(1.2) blur(2px);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95);
        filter: brightness(1.5) blur(4px);
    }
    100% { 
        opacity: 0;
        transform: scale(0.9);
        filter: brightness(2) blur(8px);
    }
}

@keyframes beezwoo-fc-logo-reveal-in {
    0% { 
        opacity: 0;
        transform: scale(1.1);
        filter: brightness(2) blur(8px);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
        filter: brightness(1.5) blur(4px);
    }
    70% {
        filter: brightness(1.2) blur(2px);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
}

@keyframes beezwoo-fc-logo-pulse {
    0% { 
        opacity: 0;
        transform: scale(0.6) rotate(-5deg);
    }
    20% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    80% {
        opacity: 1;
        transform: scale(1.05) rotate(0deg);
    }
    100% { 
        opacity: 0;
        transform: scale(0.8) rotate(5deg);
    }
}

/* Logo Stamp Effect - logo come timbro */
.beezwoo-fc-trans-logo-stamp .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-logo-stamp-out var(--fc-transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.beezwoo-fc-trans-logo-stamp .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-logo-stamp-in var(--fc-transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.beezwoo-fc-trans-logo-stamp .beezwoo-fc-slot:has(.is-leaving) .beezwoo-fc-logo-overlay,
.beezwoo-fc-trans-logo-stamp .beezwoo-fc-slot:has(.is-entering) .beezwoo-fc-logo-overlay {
    animation: beezwoo-fc-logo-stamp-pulse var(--fc-transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes beezwoo-fc-logo-stamp-out {
    0% { 
        opacity: 1;
        transform: scale(1);
    }
    40% {
        transform: scale(0.85);
    }
    100% { 
        opacity: 0;
        transform: scale(0.3);
    }
}

@keyframes beezwoo-fc-logo-stamp-in {
    0% { 
        opacity: 0;
        transform: scale(2);
    }
    60% {
        transform: scale(0.9);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes beezwoo-fc-logo-stamp-pulse {
    0% { 
        opacity: 0;
        transform: scale(0.3);
    }
    30% {
        opacity: 1;
        transform: scale(1.3);
    }
    50% {
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% { 
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Logo Wipe Effect - logo wipe orizzontale */
.beezwoo-fc-trans-logo-wipe .beezwoo-fc-item.is-leaving {
    animation: beezwoo-fc-logo-wipe-out var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-logo-wipe .beezwoo-fc-item.is-entering {
    animation: beezwoo-fc-logo-wipe-in var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.beezwoo-fc-trans-logo-wipe .beezwoo-fc-slot:has(.is-leaving) .beezwoo-fc-logo-overlay,
.beezwoo-fc-trans-logo-wipe .beezwoo-fc-slot:has(.is-entering) .beezwoo-fc-logo-overlay {
    animation: beezwoo-fc-logo-wipe-pulse var(--fc-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beezwoo-fc-logo-wipe-out {
    0% { 
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
    100% { 
        opacity: 0;
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes beezwoo-fc-logo-wipe-in {
    0% { 
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    100% { 
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes beezwoo-fc-logo-wipe-pulse {
    0% { 
        opacity: 0;
        transform: translateX(-50px) scale(0.9);
    }
    20% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% { 
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
}

/* ==========================================================================
   IMAGE FILTERS INTEGRATION - Fashion Magazine Presets
   ========================================================================== */

/* 
 * Premium fashion filters for transforming product photos into cover-worthy images.
 * These override the CSS variable-based filters when a preset is selected.
 */

/* Soft Elegance - Morbido e raffinato, ideale per lingerie e abbigliamento intimo */
.beezwoo-fc-image.beezwoo-filter-soft-elegance img {
    filter: brightness(1.05) contrast(0.92) saturate(0.88) !important;
}

/* Editorial - Look da rivista, contrasto alto ma naturale */
.beezwoo-fc-image.beezwoo-filter-editorial img {
    filter: contrast(1.15) brightness(1.02) saturate(0.9) !important;
}

/* Warm Glow - Toni caldi dorati, perfetto per autunno/inverno */
.beezwoo-fc-image.beezwoo-filter-warm-glow img {
    filter: sepia(0.12) brightness(1.05) saturate(1.15) contrast(1.02) !important;
}

/* Clean Minimal - Luminoso e pulito, stile scandinavo */
.beezwoo-fc-image.beezwoo-filter-clean-minimal img {
    filter: brightness(1.1) contrast(0.88) saturate(0.75) !important;
}

/* Luxury Dark - Mood lussuoso, ideale per accessori e gioielli */
.beezwoo-fc-image.beezwoo-filter-luxury-dark img {
    filter: brightness(0.92) contrast(1.2) saturate(0.85) !important;
}

/* Vintage Soft - Retrò morbido, stile anni '70 */
.beezwoo-fc-image.beezwoo-filter-vintage-soft img {
    filter: sepia(0.2) brightness(1.02) contrast(0.92) saturate(0.8) !important;
}

/* Vivid Pop - Colori vibranti, perfetto per sportswear */
.beezwoo-fc-image.beezwoo-filter-vivid-pop img {
    filter: brightness(1.05) contrast(1.12) saturate(1.35) !important;
}

/* Dreamy - Etereo e sognante, ideale per abiti da cerimonia */
.beezwoo-fc-image.beezwoo-filter-dreamy img {
    filter: brightness(1.08) contrast(0.88) saturate(0.92) blur(0.3px) !important;
}

/* High Fashion - Look da sfilata, contrasto drammatico */
.beezwoo-fc-image.beezwoo-filter-high-fashion img {
    filter: brightness(1.0) contrast(1.25) saturate(0.8) !important;
}

/* Noir Elegance - Bianco e nero sofisticato con leggero contrasto */
.beezwoo-fc-image.beezwoo-filter-noir-elegance img {
    filter: grayscale(1) brightness(1.05) contrast(1.15) !important;
}

/* Golden Hour - Luce dorata del tramonto */
.beezwoo-fc-image.beezwoo-filter-golden-hour img {
    filter: sepia(0.25) brightness(1.08) saturate(1.2) contrast(1.05) !important;
}

/* Ice Queen - Toni freddi azzurrati */
.beezwoo-fc-image.beezwoo-filter-ice-queen img {
    filter: brightness(1.1) contrast(1.05) saturate(0.7) hue-rotate(-10deg) !important;
}

/* Rose Tint - Leggera tinta rosa romantica */
.beezwoo-fc-image.beezwoo-filter-rose-tint img {
    filter: brightness(1.05) contrast(0.95) saturate(1.1) hue-rotate(5deg) sepia(0.08) !important;
}

/* Urban Chic - Look metropolitano, desaturato ma contrastato */
.beezwoo-fc-image.beezwoo-filter-urban-chic img {
    filter: brightness(0.98) contrast(1.18) saturate(0.6) !important;
}

/* ==========================================================================
   PROFESSIONAL FASHION PHOTOGRAPHY FILTERS
   Vignettatura + Color Grading Cinematografico
   ========================================================================== */

/*
 * ARCHITETTURA FILTRI PREMIUM
 * ---------------------------
 * Ogni filtro usa:
 * 1. filter: sul tag img per color grading
 * 2. ::after pseudo-elemento per VIGNETTATURA drammatica
 * 3. ::before (opzionale) per effetti luce/flare
 *
 * Ispirazione: Vogue, Harper's Bazaar, ELLE, W Magazine
 */

/* Base per tutti i filtri - abilita pseudo-elementi */
.beezwoo-fc-image[class*="beezwoo-filter-"] {
    position: relative !important;
    overflow: visible !important; /* IMPORTANTE per mostrare vignettatura */
}

.beezwoo-fc-image[class*="beezwoo-filter-"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    /* Vignettatura controllabile via CSS variable */
    opacity: var(--fc-vignette-intensity, 1);
}

/* --------------------------------------------------------------------------
   VOGUE NOIR - Bianco e nero drammatico stile Annie Leibovitz
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-vogue-noir img {
    filter: 
        grayscale(1) 
        contrast(1.35) 
        brightness(1.05)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-vogue-noir::after {
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 30%,
        rgba(0,0,0,0.25) 70%,
        rgba(0,0,0,0.6) 100%
    );
}

/* --------------------------------------------------------------------------
   HAUTE COUTURE - Look sfilata Chanel/Dior, contrasto drammatico
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-haute-couture img {
    filter: 
        contrast(1.3) 
        brightness(1.02) 
        saturate(0.85)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-haute-couture::after {
    background: radial-gradient(
        ellipse 70% 70% at 50% 45%,
        transparent 25%,
        rgba(0,0,0,0.2) 60%,
        rgba(0,0,0,0.55) 100%
    );
}

/* --------------------------------------------------------------------------
   GOLDEN LUXE - Luce dorata da golden hour, toni caldi lussuosi
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-golden-luxe img {
    filter: 
        sepia(0.15) 
        brightness(1.08) 
        contrast(1.12) 
        saturate(1.25)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-golden-luxe::after {
    background: 
        radial-gradient(
            ellipse 75% 75% at 50% 40%,
            rgba(255,200,100,0.08) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 80% at 50% 50%,
            transparent 35%,
            rgba(80,40,0,0.2) 70%,
            rgba(40,20,0,0.5) 100%
        );
}

/* --------------------------------------------------------------------------
   ICE EDITORIAL - Toni freddi da Scandinavia, stile COS/Acne
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-ice-editorial img {
    filter: 
        brightness(1.12) 
        contrast(1.08) 
        saturate(0.7) 
        hue-rotate(-8deg)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-ice-editorial::after {
    background: 
        radial-gradient(
            ellipse 70% 70% at 50% 50%,
            rgba(200,220,255,0.1) 0%,
            transparent 40%
        ),
        radial-gradient(
            ellipse 85% 85% at 50% 50%,
            transparent 30%,
            rgba(20,30,50,0.25) 70%,
            rgba(10,15,30,0.55) 100%
        );
}

/* --------------------------------------------------------------------------
   BLUSH ROMANCE - Rosa romantico da bridal/lingerie
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-blush-romance img {
    filter: 
        brightness(1.08) 
        contrast(0.95) 
        saturate(1.05) 
        sepia(0.08) 
        hue-rotate(-5deg)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-blush-romance::after {
    background: 
        radial-gradient(
            ellipse 60% 60% at 50% 50%,
            rgba(255,180,190,0.12) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 80% at 50% 50%,
            transparent 35%,
            rgba(80,40,50,0.18) 70%,
            rgba(50,20,30,0.45) 100%
        );
}

/* --------------------------------------------------------------------------
   RUNWAY DRAMA - Contrasto estremo da passerella
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-runway-drama img {
    filter: 
        contrast(1.4) 
        brightness(1.0) 
        saturate(0.9)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-runway-drama::after {
    background: radial-gradient(
        ellipse 65% 65% at 50% 45%,
        transparent 20%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.7) 100%
    );
}

/* --------------------------------------------------------------------------
   CINEMA TEAL - Color grading cinematografico teal & orange
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-cinema-teal img {
    filter: 
        contrast(1.15) 
        brightness(1.0) 
        saturate(1.1) 
        hue-rotate(-15deg) 
        sepia(0.1)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-cinema-teal::after {
    background: 
        linear-gradient(
            180deg,
            rgba(0,80,100,0.08) 0%,
            transparent 30%,
            transparent 70%,
            rgba(100,50,0,0.08) 100%
        ),
        radial-gradient(
            ellipse 80% 80% at 50% 50%,
            transparent 30%,
            rgba(0,30,40,0.3) 70%,
            rgba(0,20,30,0.6) 100%
        );
}

/* --------------------------------------------------------------------------
   DIAMOND GLOW - Luminosita lussuosa per gioielli/accessori
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-diamond-glow img {
    filter: 
        brightness(1.15) 
        contrast(1.2) 
        saturate(0.9)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-diamond-glow::after {
    background: 
        radial-gradient(
            ellipse 50% 50% at 50% 40%,
            rgba(255,255,255,0.15) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 75% 75% at 50% 50%,
            transparent 35%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.55) 100%
        );
}

/* --------------------------------------------------------------------------
   NATURAL BEAUTY - Look naturale ma perfezionato
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-natural-beauty img {
    filter: 
        brightness(1.06) 
        contrast(1.08) 
        saturate(1.05)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-natural-beauty::after {
    background: radial-gradient(
        ellipse 85% 85% at 50% 50%,
        transparent 40%,
        rgba(30,20,10,0.15) 70%,
        rgba(20,15,10,0.4) 100%
    );
}

/* --------------------------------------------------------------------------
   MIDNIGHT LUXE - Mood notturno lussuoso
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-midnight-luxe img {
    filter: 
        brightness(0.92) 
        contrast(1.25) 
        saturate(0.85)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-midnight-luxe::after {
    background: 
        radial-gradient(
            ellipse 60% 60% at 50% 45%,
            rgba(100,120,180,0.08) 0%,
            transparent 40%
        ),
        radial-gradient(
            ellipse 70% 70% at 50% 50%,
            transparent 25%,
            rgba(10,10,30,0.35) 60%,
            rgba(5,5,20,0.7) 100%
        );
}

/* --------------------------------------------------------------------------
   MARBLE CLEAN - Bianco pulito stile minimal luxury
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-marble-clean img {
    filter: 
        brightness(1.15) 
        contrast(0.95) 
        saturate(0.7)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-marble-clean::after {
    background: radial-gradient(
        ellipse 90% 90% at 50% 50%,
        transparent 45%,
        rgba(100,100,120,0.12) 70%,
        rgba(60,60,80,0.35) 100%
    );
}

/* --------------------------------------------------------------------------
   PORCELAIN SKIN - Pelle perfetta da beauty campaign
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-porcelain-skin img {
    filter: 
        brightness(1.1) 
        contrast(0.92) 
        saturate(0.9) 
        blur(0.2px)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-porcelain-skin::after {
    background: 
        radial-gradient(
            ellipse 70% 70% at 50% 40%,
            rgba(255,240,230,0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 80% at 50% 50%,
            transparent 40%,
            rgba(50,30,30,0.18) 70%,
            rgba(30,20,20,0.45) 100%
        );
}

/* --------------------------------------------------------------------------
   MEDITERRANEAN - Azzurro mediterraneo, luce estiva
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-mediterranean img {
    filter: 
        brightness(1.1) 
        contrast(1.1) 
        saturate(1.2) 
        hue-rotate(5deg)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-mediterranean::after {
    background: 
        radial-gradient(
            ellipse 60% 60% at 50% 30%,
            rgba(255,220,180,0.12) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 80% at 50% 50%,
            transparent 35%,
            rgba(0,40,60,0.2) 70%,
            rgba(0,20,40,0.5) 100%
        );
}

/* --------------------------------------------------------------------------
   FILM GRAIN - Estetica pellicola analogica premium
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-film-grain img {
    filter: 
        contrast(1.12) 
        brightness(1.02) 
        saturate(0.95) 
        sepia(0.08)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-film-grain::after {
    background: 
        radial-gradient(
            ellipse 75% 75% at 50% 50%,
            transparent 30%,
            rgba(40,30,20,0.25) 70%,
            rgba(20,15,10,0.55) 100%
        );
    /* Film grain texture via noise */
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
        radial-gradient(
            ellipse 75% 75% at 50% 50%,
            transparent 30%,
            rgba(40,30,20,0.25) 70%,
            rgba(20,15,10,0.55) 100%
        );
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   ROYAL VELVET - Lusso estremo, toni profondi
   -------------------------------------------------------------------------- */
.beezwoo-fc-image.beezwoo-filter-royal-velvet img {
    filter: 
        brightness(0.95) 
        contrast(1.3) 
        saturate(1.1)
        !important;
}

.beezwoo-fc-image.beezwoo-filter-royal-velvet::after {
    background: 
        radial-gradient(
            ellipse 55% 55% at 50% 45%,
            rgba(150,100,180,0.08) 0%,
            transparent 40%
        ),
        radial-gradient(
            ellipse 70% 70% at 50% 50%,
            transparent 25%,
            rgba(30,10,40,0.3) 60%,
            rgba(20,5,30,0.65) 100%
        );
}

/* ==========================================================================
   LEGACY FILTERS - Mantieni compatibilità con nomi precedenti
   ========================================================================== */

/* Soft Elegance → Blush Romance */
.beezwoo-fc-image.beezwoo-filter-soft-elegance img {
    filter: brightness(1.08) contrast(0.95) saturate(1.05) sepia(0.08) hue-rotate(-5deg) !important;
}
.beezwoo-fc-image.beezwoo-filter-soft-elegance::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(80,40,50,0.18) 70%, rgba(50,20,30,0.45) 100%);
}

/* Editorial → Haute Couture */
.beezwoo-fc-image.beezwoo-filter-editorial img {
    filter: contrast(1.3) brightness(1.02) saturate(0.85) !important;
}
.beezwoo-fc-image.beezwoo-filter-editorial::after {
    background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 25%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.55) 100%);
}

/* Warm Glow → Golden Luxe */
.beezwoo-fc-image.beezwoo-filter-warm-glow img {
    filter: sepia(0.15) brightness(1.08) contrast(1.12) saturate(1.25) !important;
}
.beezwoo-fc-image.beezwoo-filter-warm-glow::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(80,40,0,0.2) 70%, rgba(40,20,0,0.5) 100%);
}

/* Clean Minimal → Marble Clean */
.beezwoo-fc-image.beezwoo-filter-clean-minimal img {
    filter: brightness(1.15) contrast(0.95) saturate(0.7) !important;
}
.beezwoo-fc-image.beezwoo-filter-clean-minimal::after {
    background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 45%, rgba(100,100,120,0.12) 70%, rgba(60,60,80,0.35) 100%);
}

/* Luxury Dark → Midnight Luxe */
.beezwoo-fc-image.beezwoo-filter-luxury-dark img {
    filter: brightness(0.92) contrast(1.25) saturate(0.85) !important;
}
.beezwoo-fc-image.beezwoo-filter-luxury-dark::after {
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 25%, rgba(10,10,30,0.35) 60%, rgba(5,5,20,0.7) 100%);
}

/* Vintage Soft → Film Grain */
.beezwoo-fc-image.beezwoo-filter-vintage-soft img {
    filter: contrast(1.12) brightness(1.02) saturate(0.95) sepia(0.08) !important;
}
.beezwoo-fc-image.beezwoo-filter-vintage-soft::after {
    background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 30%, rgba(40,30,20,0.25) 70%, rgba(20,15,10,0.55) 100%);
}

/* Vivid Pop - Colori vibranti potenziati */
.beezwoo-fc-image.beezwoo-filter-vivid-pop img {
    filter: brightness(1.08) contrast(1.18) saturate(1.4) !important;
}
.beezwoo-fc-image.beezwoo-filter-vivid-pop::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.5) 100%);
}

/* Dreamy → Porcelain Skin */
.beezwoo-fc-image.beezwoo-filter-dreamy img {
    filter: brightness(1.1) contrast(0.92) saturate(0.9) blur(0.2px) !important;
}
.beezwoo-fc-image.beezwoo-filter-dreamy::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(50,30,30,0.18) 70%, rgba(30,20,20,0.45) 100%);
}

/* High Fashion → Runway Drama */
.beezwoo-fc-image.beezwoo-filter-high-fashion img {
    filter: contrast(1.4) brightness(1.0) saturate(0.9) !important;
}
.beezwoo-fc-image.beezwoo-filter-high-fashion::after {
    background: radial-gradient(ellipse 65% 65% at 50% 45%, transparent 20%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.7) 100%);
}

/* Noir Elegance → Vogue Noir */
.beezwoo-fc-image.beezwoo-filter-noir-elegance img {
    filter: grayscale(1) contrast(1.35) brightness(1.05) !important;
}
.beezwoo-fc-image.beezwoo-filter-noir-elegance::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.6) 100%);
}

/* Golden Hour → Golden Luxe */
.beezwoo-fc-image.beezwoo-filter-golden-hour img {
    filter: sepia(0.15) brightness(1.08) contrast(1.12) saturate(1.25) !important;
}
.beezwoo-fc-image.beezwoo-filter-golden-hour::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(80,40,0,0.2) 70%, rgba(40,20,0,0.5) 100%);
}

/* Ice Queen → Ice Editorial */
.beezwoo-fc-image.beezwoo-filter-ice-queen img {
    filter: brightness(1.12) contrast(1.08) saturate(0.7) hue-rotate(-8deg) !important;
}
.beezwoo-fc-image.beezwoo-filter-ice-queen::after {
    background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 30%, rgba(20,30,50,0.25) 70%, rgba(10,15,30,0.55) 100%);
}

/* Rose Tint → Blush Romance */
.beezwoo-fc-image.beezwoo-filter-rose-tint img {
    filter: brightness(1.08) contrast(0.95) saturate(1.05) sepia(0.08) hue-rotate(-5deg) !important;
}
.beezwoo-fc-image.beezwoo-filter-rose-tint::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(80,40,50,0.18) 70%, rgba(50,20,30,0.45) 100%);
}

/* Urban Chic aggiornato con vignettatura */
.beezwoo-fc-image.beezwoo-filter-urban-chic::after {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(30,30,40,0.25) 70%, rgba(15,15,25,0.55) 100%);
}

/* ==========================================================================
   AMBIENT MOTION EFFECTS - Premium Movement
   ========================================================================== */

/* Base motion setup */
.beezwoo-fashion-carousel[class*="beezwoo-fc-motion-"] .beezwoo-fc-image {
    overflow: hidden;
}

.beezwoo-fashion-carousel[class*="beezwoo-fc-motion-"] .beezwoo-fc-image img {
    will-change: transform;
}

/* Motion speed variations */
.beezwoo-fc-motion-speed-slow .beezwoo-fc-image img { --motion-duration: 20s; }
.beezwoo-fc-motion-speed-normal .beezwoo-fc-image img { --motion-duration: 12s; }
.beezwoo-fc-motion-speed-fast .beezwoo-fc-image img { --motion-duration: 6s; }

/* Stagger delays for each slot */
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(1) .beezwoo-fc-image img { animation-delay: 0s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(2) .beezwoo-fc-image img { animation-delay: -2s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(3) .beezwoo-fc-image img { animation-delay: -4s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(4) .beezwoo-fc-image img { animation-delay: -6s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(5) .beezwoo-fc-image img { animation-delay: -3s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(6) .beezwoo-fc-image img { animation-delay: -5s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(7) .beezwoo-fc-image img { animation-delay: -1s; }
.beezwoo-fashion-carousel[data-motion-stagger="true"] .beezwoo-fc-slot:nth-child(8) .beezwoo-fc-image img { animation-delay: -7s; }

/* === KEN BURNS ZOOM IN === */
.beezwoo-fc-motion-ken-burns-in .beezwoo-fc-image img {
    animation: beezwoo-motion-kb-in var(--motion-duration, 12s) ease-in-out infinite;
    transform-origin: center center;
}

@keyframes beezwoo-motion-kb-in {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.02)); }
}

/* === KEN BURNS ZOOM OUT === */
.beezwoo-fc-motion-ken-burns-out .beezwoo-fc-image img {
    animation: beezwoo-motion-kb-out var(--motion-duration, 12s) ease-in-out infinite;
    transform-origin: center center;
}

@keyframes beezwoo-motion-kb-out {
    0%, 100% { transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.02)); }
    50% { transform: scale(1); }
}

/* === KEN BURNS ALTERNATO === */
.beezwoo-fc-motion-ken-burns-alt .beezwoo-fc-slot:nth-child(odd) .beezwoo-fc-image img {
    animation: beezwoo-motion-kb-in var(--motion-duration, 12s) ease-in-out infinite;
}
.beezwoo-fc-motion-ken-burns-alt .beezwoo-fc-slot:nth-child(even) .beezwoo-fc-image img {
    animation: beezwoo-motion-kb-out var(--motion-duration, 12s) ease-in-out infinite;
}

/* === DRIFT (Movimento Sottile) === */
.beezwoo-fc-motion-drift .beezwoo-fc-image img {
    animation: beezwoo-motion-drift var(--motion-duration, 12s) ease-in-out infinite;
}

@keyframes beezwoo-motion-drift {
    0%, 100% { 
        transform: scale(1.05) translate(0, 0); 
    }
    25% { 
        transform: scale(1.05) translate(calc(var(--fc-motion-intensity, 5) * 0.3%), calc(var(--fc-motion-intensity, 5) * -0.2%)); 
    }
    50% { 
        transform: scale(1.05) translate(calc(var(--fc-motion-intensity, 5) * -0.2%), calc(var(--fc-motion-intensity, 5) * 0.3%)); 
    }
    75% { 
        transform: scale(1.05) translate(calc(var(--fc-motion-intensity, 5) * -0.3%), calc(var(--fc-motion-intensity, 5) * -0.3%)); 
    }
}

/* === FLOAT (Galleggiamento) === */
.beezwoo-fc-motion-float .beezwoo-fc-image img {
    animation: beezwoo-motion-float var(--motion-duration, 12s) ease-in-out infinite;
}

@keyframes beezwoo-motion-float {
    0%, 100% { 
        transform: scale(1.03) translateY(0); 
    }
    50% { 
        transform: scale(1.03) translateY(calc(var(--fc-motion-intensity, 5) * -0.5%)); 
    }
}

/* === BREATHE (Pulsazione) === */
.beezwoo-fc-motion-breathe .beezwoo-fc-image img {
    animation: beezwoo-motion-breathe var(--motion-duration, 12s) ease-in-out infinite;
}

@keyframes beezwoo-motion-breathe {
    0%, 100% { 
        transform: scale(1); 
        filter: brightness(1);
    }
    50% { 
        transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.01)); 
        filter: brightness(1.03);
    }
}

/* === SWAY (Oscillazione) === */
.beezwoo-fc-motion-sway .beezwoo-fc-image img {
    animation: beezwoo-motion-sway var(--motion-duration, 12s) ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes beezwoo-motion-sway {
    0%, 100% { 
        transform: scale(1.02) rotate(0deg); 
    }
    25% { 
        transform: scale(1.02) rotate(calc(var(--fc-motion-intensity, 5) * 0.15deg)); 
    }
    75% { 
        transform: scale(1.02) rotate(calc(var(--fc-motion-intensity, 5) * -0.15deg)); 
    }
}

/* === PARALLAX SUBTLE === */
.beezwoo-fc-motion-parallax-subtle .beezwoo-fc-image img {
    animation: beezwoo-motion-parallax var(--motion-duration, 12s) ease-in-out infinite;
}

@keyframes beezwoo-motion-parallax {
    0%, 100% { 
        transform: scale(1.08) translate3d(0, 0, 0); 
    }
    33% { 
        transform: scale(1.08) translate3d(calc(var(--fc-motion-intensity, 5) * 0.2%), calc(var(--fc-motion-intensity, 5) * -0.3%), 0); 
    }
    66% { 
        transform: scale(1.08) translate3d(calc(var(--fc-motion-intensity, 5) * -0.2%), calc(var(--fc-motion-intensity, 5) * 0.2%), 0); 
    }
}

/* === CINEMATIC PAN === */
.beezwoo-fc-motion-cinematic-pan .beezwoo-fc-image img {
    animation: beezwoo-motion-cinematic var(--motion-duration, 12s) ease-in-out infinite;
    transform-origin: left center;
}

@keyframes beezwoo-motion-cinematic {
    0% { 
        transform: scale(1.15) translateX(0); 
        transform-origin: left center;
    }
    50% { 
        transform: scale(1.15) translateX(calc(var(--fc-motion-intensity, 5) * -1%));
        transform-origin: right center;
    }
    100% { 
        transform: scale(1.15) translateX(0); 
        transform-origin: left center;
    }
}

/* === EDITORIAL DRIFT === */
.beezwoo-fc-motion-editorial-drift .beezwoo-fc-image img {
    animation: beezwoo-motion-editorial var(--motion-duration, 12s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes beezwoo-motion-editorial {
    0%, 100% { 
        transform: scale(1.06) translate(0, 0) rotate(0deg); 
    }
    20% { 
        transform: scale(1.08) translate(calc(var(--fc-motion-intensity, 5) * 0.15%), calc(var(--fc-motion-intensity, 5) * -0.1%)) rotate(0.2deg); 
    }
    40% { 
        transform: scale(1.05) translate(calc(var(--fc-motion-intensity, 5) * -0.1%), calc(var(--fc-motion-intensity, 5) * 0.15%)) rotate(-0.1deg); 
    }
    60% { 
        transform: scale(1.07) translate(calc(var(--fc-motion-intensity, 5) * 0.1%), calc(var(--fc-motion-intensity, 5) * 0.1%)) rotate(0.15deg); 
    }
    80% { 
        transform: scale(1.04) translate(calc(var(--fc-motion-intensity, 5) * -0.15%), calc(var(--fc-motion-intensity, 5) * -0.05%)) rotate(-0.2deg); 
    }
}

/* === FASHION PULSE === */
.beezwoo-fc-motion-fashion-pulse .beezwoo-fc-image img {
    animation: beezwoo-motion-fashion var(--motion-duration, 12s) ease-in-out infinite;
}

@keyframes beezwoo-motion-fashion {
    0%, 100% { 
        transform: scale(1); 
        filter: brightness(1) contrast(1);
    }
    25% { 
        transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.008)); 
        filter: brightness(1.02) contrast(1.02);
    }
    50% { 
        transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.015)); 
        filter: brightness(1.05) contrast(1.03);
    }
    75% { 
        transform: scale(calc(1 + var(--fc-motion-intensity, 5) * 0.008)); 
        filter: brightness(1.02) contrast(1.02);
    }
}

/* ==========================================================================
   PARTICLES EFFECTS - Premium Quality
   ========================================================================== */

/* Particles container */
.beezwoo-fc-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    border-radius: inherit;
}

/* Base particle style */
.beezwoo-fc-particle {
    position: absolute;
    pointer-events: none;
}

/* === SPARKLE (Brillantini a stella) === */
.beezwoo-fc-particles-sparkle .beezwoo-fc-particle {
    width: 0;
    height: 0;
    background: transparent;
    animation: beezwoo-sparkle 3s ease-in-out infinite;
    opacity: 0;
}

/* Stella a 4 punte con pseudo-elementi */
.beezwoo-fc-particles-sparkle .beezwoo-fc-particle::before,
.beezwoo-fc-particles-sparkle .beezwoo-fc-particle::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.beezwoo-fc-particles-sparkle .beezwoo-fc-particle::before {
    width: 2px;
    height: 12px;
    top: -6px;
    left: -1px;
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.8);
}

.beezwoo-fc-particles-sparkle .beezwoo-fc-particle::after {
    width: 12px;
    height: 2px;
    top: -1px;
    left: -6px;
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.8);
}

@keyframes beezwoo-sparkle {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0) rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1) rotate(45deg); 
    }
}

/* === DUST (Polvere Luminosa) === */
.beezwoo-fc-particles-dust .beezwoo-fc-particle {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    animation: beezwoo-dust 8s linear infinite;
    box-shadow: 0 0 3px rgba(255,255,255,0.5);
}

@keyframes beezwoo-dust {
    0% { 
        transform: translateY(100%) translateX(0); 
        opacity: 0; 
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { 
        transform: translateY(-20%) translateX(20px); 
        opacity: 0; 
    }
}

/* === BOKEH (Luci Sfocate Premium) === */
.beezwoo-fc-particles-bokeh .beezwoo-fc-particle {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.15) 0%, 
        rgba(255,255,255,0.08) 40%,
        rgba(255,255,255,0) 70%
    );
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    animation: beezwoo-bokeh 10s ease-in-out infinite;
}

@keyframes beezwoo-bokeh {
    0%, 100% { 
        transform: scale(0.5) translateY(0); 
        opacity: 0.2; 
    }
    50% { 
        transform: scale(1.3) translateY(-40px); 
        opacity: 0.6; 
    }
}

/* === SNOW (Neve Elegante) === */
.beezwoo-fc-particles-snow .beezwoo-fc-particle {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, 
        rgba(255,255,255,1) 0%, 
        rgba(255,255,255,0.8) 40%,
        rgba(255,255,255,0) 70%
    );
    border-radius: 50%;
    animation: beezwoo-snow 6s linear infinite;
}

@keyframes beezwoo-snow {
    0% { 
        transform: translateY(-10%) translateX(0) rotate(0deg); 
        opacity: 0; 
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { 
        transform: translateY(110%) translateX(30px) rotate(360deg); 
        opacity: 0; 
    }
}

/* === FIREFLIES (Lucciole Premium) === */
.beezwoo-fc-particles-fireflies .beezwoo-fc-particle {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, 
        rgba(255,250,180,1) 0%, 
        rgba(255,230,100,0.6) 30%,
        rgba(255,200,50,0) 70%
    );
    border-radius: 50%;
    animation: beezwoo-firefly 4s ease-in-out infinite;
}

/* Glow separato per evitare box rettangolari */
.beezwoo-fc-particles-fireflies .beezwoo-fc-particle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, 
        rgba(255,250,150,0.4) 0%, 
        rgba(255,230,100,0) 70%
    );
    border-radius: 50%;
    pointer-events: none;
}

@keyframes beezwoo-firefly {
    0%, 100% { 
        opacity: 0.3; 
        transform: translate(0, 0) scale(0.8); 
    }
    25% { 
        opacity: 1; 
        transform: translate(10px, -15px) scale(1); 
    }
    50% { 
        opacity: 0.5; 
        transform: translate(-5px, -25px) scale(0.9); 
    }
    75% { 
        opacity: 1; 
        transform: translate(15px, -10px) scale(1.1); 
    }
}

/* === GOLD SHIMMER (Extra Premium) === */
.beezwoo-fc-particles-shimmer .beezwoo-fc-particle {
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, 
        rgba(255,215,0,1) 0%, 
        rgba(255,240,180,1) 50%,
        rgba(255,200,100,1) 100%
    );
    border-radius: 50%;
    animation: beezwoo-shimmer 2.5s ease-in-out infinite;
}

.beezwoo-fc-particles-shimmer .beezwoo-fc-particle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes beezwoo-shimmer {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0) translateY(0); 
    }
    25% { 
        opacity: 1; 
        transform: scale(1) translateY(-10px); 
    }
    75% { 
        opacity: 0.8; 
        transform: scale(0.8) translateY(-20px); 
    }
}

/* ==========================================================================
   PERFORMANCE & ACCESSIBILITY
   ========================================================================== */

/* GPU acceleration for all animated elements */
.beezwoo-fc-item,
.beezwoo-fc-image img {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .beezwoo-fc-item.is-leaving,
    .beezwoo-fc-item.is-entering {
        animation: beezwoo-fc-fade-out 0.3s ease-out forwards,
                   beezwoo-fc-fade-in 0.3s ease-out forwards !important;
    }
    
    .beezwoo-fc-image img {
        transition: none !important;
    }
}

/* Print - hide animations */
@media print {
    .beezwoo-fc-item {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   RESPONSIVE - CONTENIMENTO TOTALE
   ========================================================================== */

/* Regole globali per tutti i breakpoint */
.beezwoo-fashion-carousel,
.beezwoo-fashion-carousel *,
.beezwoo-fashion-carousel *::before,
.beezwoo-fashion-carousel *::after {
    box-sizing: border-box !important;
}

/* FIX: Elementor flex-wrap:wrap + flex-direction:column height bug
   On mobile, Elementor sets --flex-wrap-mobile:wrap on e-con containers.
   Combined with flex-direction:column, Chrome doesn't calculate the
   container height correctly, causing the carousel to overflow/overlap.
   Override both the CSS custom property AND the property itself. */
@media screen and (max-width: 767px) {
    .e-con:has(.beezwoo-fashion-carousel) {
        --flex-wrap: nowrap !important;
        --flex-wrap-mobile: nowrap !important;
        flex-wrap: nowrap !important;
    }
}

/* Mobile: massimo contenimento */
@media screen and (max-width: 767px) {
    .elementor-widget-beezwoo-fashion-carousel,
    .elementor-widget-beezwoo-fashion-carousel .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    
    .beezwoo-fashion-carousel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    
    .beezwoo-fc-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    
    .beezwoo-fc-slot {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    .beezwoo-fc-item {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .beezwoo-fc-link {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .beezwoo-fc-image {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* IMPORTANTE: Filtri devono funzionare anche su mobile */
    .beezwoo-fc-image[class*="beezwoo-filter-"] {
        position: relative !important;
        overflow: visible !important;
    }
    
    .beezwoo-fc-image[class*="beezwoo-filter-"]::after {
        display: block !important;
        opacity: var(--fc-vignette-intensity, 1) !important;
    }
    
    .beezwoo-fc-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    /* Reduce motion intensity on mobile for performance */
    .beezwoo-fashion-carousel[class*="beezwoo-fc-motion-"] .beezwoo-fc-image img {
        --motion-duration: 15s;
    }
    
    /* Reduce particles on mobile */
    .beezwoo-fc-particles .beezwoo-fc-particle:nth-child(n+10) {
        display: none;
    }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-beezwoo-fashion-carousel,
    .elementor-widget-beezwoo-fashion-carousel .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    .beezwoo-fc-grid {
        overflow: visible !important;
    }
}

/* ==========================================================================
   ELEMENTOR EDITOR FIXES
   ========================================================================== */

/* Fix per preview nell'editor Elementor */
.elementor-editor-active .beezwoo-fashion-carousel {
    overflow: visible !important;
}

.elementor-editor-preview .beezwoo-fashion-carousel {
    overflow: visible !important;
}

.elementor-editor-active .beezwoo-fc-grid,
.elementor-editor-preview .beezwoo-fc-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Nascondi pool e template */
.beezwoo-fc-product-pool,
.beezwoo-fc-item-tpl,
.beezwoo-fc-slot-tpl {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   WOODMART THEME OVERRIDES
   ========================================================================== */

/* Override WoodMart global styles che potrebbero causare overflow */
.woodmart-container .beezwoo-fashion-carousel,
.wd-section .beezwoo-fashion-carousel,
.container .beezwoo-fashion-carousel {
    max-width: 100% !important;
    overflow: visible !important;
}

.woodmart-container .beezwoo-fc-grid,
.wd-section .beezwoo-fc-grid,
.container .beezwoo-fc-grid {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Override per immagini WoodMart */
.beezwoo-fashion-carousel img {
    max-width: 100% !important;
}

/* ==========================================================================
   POSITION ABSOLUTE MOBILE
   ========================================================================== */

/* La classe viene attivata solo quando l'utente abilita l'opzione */
/* Le proprietà specifiche (top, left, width, etc.) sono gestite dai selectors Elementor */
@media screen and (max-width: 767px) {
    .beezwoo-fashion-carousel.beezwoo-fc-position-mobile-absolute {
        position: absolute;
    }
}

/* ==========================================================================
   ELEMENTOR EDITOR PREVIEW STYLES
   ========================================================================== */

/* Preview Info Panel - visibile solo in editor */
.beezwoo-fc-preview-info,
.beezwoo-fc-current-device {
    display: none !important;
}

.elementor-editor-active .beezwoo-fc-editor-preview .beezwoo-fc-preview-info,
.elementor-editor-active .beezwoo-fc-editor-preview .beezwoo-fc-current-device {
    display: flex !important;
}

.elementor-editor-active .beezwoo-fc-editor-preview .beezwoo-fc-current-device {
    display: block !important;
}

/* Device indicator highlighting */
.elementor-device-desktop .beezwoo-fc-device-ind[data-device="desktop"],
.elementor-device-tablet .beezwoo-fc-device-ind[data-device="tablet"],
.elementor-device-mobile .beezwoo-fc-device-ind[data-device="mobile"] {
    background: rgba(102, 126, 234, 0.3) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

/* Radius info switching */
.elementor-device-desktop .beezwoo-fc-radius-info .radius-desktop { display: inline !important; }
.elementor-device-desktop .beezwoo-fc-radius-info .radius-tablet,
.elementor-device-desktop .beezwoo-fc-radius-info .radius-mobile { display: none !important; }

.elementor-device-tablet .beezwoo-fc-radius-info .radius-tablet { display: inline !important; }
.elementor-device-tablet .beezwoo-fc-radius-info .radius-desktop,
.elementor-device-tablet .beezwoo-fc-radius-info .radius-mobile { display: none !important; }

.elementor-device-mobile .beezwoo-fc-radius-info .radius-mobile { display: inline !important; }
.elementor-device-mobile .beezwoo-fc-radius-info .radius-desktop,
.elementor-device-mobile .beezwoo-fc-radius-info .radius-tablet { display: none !important; }

/* Fallback radius (when tablet/mobile not set, show desktop) */
.elementor-device-tablet .beezwoo-fc-radius-info:not(:has(.radius-tablet)) .radius-desktop { display: inline !important; }
.elementor-device-mobile .beezwoo-fc-radius-info:not(:has(.radius-mobile)) .radius-desktop { display: inline !important; }

/* ==========================================================================
   FILTRI IMMAGINE - REGOLE PRIORITARIE (FINE FILE)
   Queste regole hanno la massima specificità per garantire che i filtri
   funzionino sempre, su tutti i device e durante le transizioni.
   ========================================================================== */

/* Forza i filtri su TUTTI i device - Desktop */
.beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"] {
    position: relative !important;
    overflow: visible !important;
}

.beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"] img {
    position: relative !important;
    z-index: 1 !important;
}

.beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"]::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    opacity: var(--fc-vignette-intensity, 1) !important;
}

/* Forza i filtri su Mobile - MASSIMA SPECIFICITÀ */
@media screen and (max-width: 767px) {
    html body .beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"] {
        position: relative !important;
        overflow: visible !important;
    }
    
    html body .beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"] img {
        position: relative !important;
        z-index: 1 !important;
    }
    
    html body .beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"]::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        opacity: var(--fc-vignette-intensity, 1) !important;
    }
}

/* Forza i filtri su Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    html body .beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"] {
        position: relative !important;
        overflow: visible !important;
    }
    
    html body .beezwoo-fashion-carousel .beezwoo-fc-image[class*="beezwoo-filter-"]::after {
        content: '' !important;
        display: block !important;
        opacity: var(--fc-vignette-intensity, 1) !important;
    }
}

/* Debug: rendi visibile il filtro durante le transizioni */
.beezwoo-fashion-carousel .beezwoo-fc-item.is-transitioning .beezwoo-fc-image[class*="beezwoo-filter-"]::after,
.beezwoo-fashion-carousel .beezwoo-fc-item.is-entering .beezwoo-fc-image[class*="beezwoo-filter-"]::after,
.beezwoo-fashion-carousel .beezwoo-fc-item.is-leaving .beezwoo-fc-image[class*="beezwoo-filter-"]::after {
    opacity: var(--fc-vignette-intensity, 1) !important;
}