<style>
/* 1. NEURAL CANVAS */
#wismo-neural-canvas { opacity: 0; transition: opacity 1.5s ease; pointer-events: none;}
#wismo-neural-canvas.is-active { opacity: 1;}

/* 2. LAYOUT & CLS */
.animation-wrapper { 
    position: relative; 
    min-height: 550px; /* Mobile Height */
    contain: paint layout; 
}
@media (min-width: 768px) { .animation-wrapper { min-height: 350px; } }

/* 4. BASE STYLES */
.ani-box {
  background: #16223499; border: 1px solid #60607C99; border-radius: 12px;
  transform: scale(.85); transform-origin: top left;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 15px rgba(0,0,0,.3);
  will-change: transform, opacity; backface-visibility: hidden;
}
.ani-box .elementor-icon-list-text, .ani-box .elementor-icon-list-text span { color: #fff !important; }
.ani-box p span { display: inline-block; position: relative; border: 1px solid #B6C8FC39; background: #B6C8FC30; border-radius: 8px; color: #fff; padding: 0 3px; margin-bottom: 1px; }
.ani-box p span span { margin: 1px 0; border: 1px solid #B6C8FC66; background: #B6C8FC40; border-radius: 6px; }

/* 5. ANIM UTILS */
.anim-hide { display:none !important; opacity:0; }
.anim-show { display:flex !important; opacity:1; transition:opacity .5s ease; }
.anim-fading-out { opacity:0; transition:opacity .5s ease; }

.w-anim {
  --ani-duration: 300ms; --ani-opacity: 1; --ani-x: 0px; --ani-y: 0px; --ani-scale: 1;
  --ani-ease-in: cubic-bezier(.25,1,.5,1); --ani-ease-out: cubic-bezier(.5,0,.75,0); --ani-ease-current: var(--ani-ease-in);
  opacity: var(--ani-opacity); 
  transform: translate3d(var(--ani-x), var(--ani-y), 0) scale(var(--ani-scale));
  transition: opacity var(--ani-duration) var(--ani-ease-current), transform var(--ani-duration) var(--ani-ease-current);
}
.ani-box.w-anim { transform: scale(.85) translate3d(var(--ani-x), var(--ani-y), 0) scale(var(--ani-scale)); }

/* 6. INDICATORS */
.indicators-container { 
    display: flex; gap: 12px; align-items: center; position: relative; z-index: 20; padding-top: 10px; 
    transition: opacity 0.5s ease;
}
/* Hide indicators while Loader (Slide 0) is active */
.animation-wrapper[data-slide="0"] .indicators-container { opacity: 0; pointer-events: none; }

.indicator-item { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .5; transition: opacity .3s ease; touch-action: manipulation; }
.indicator-item.is-active, .indicator-item:hover { opacity: 1; }

.indi-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; transition: all .3s cubic-bezier(.175,.885,.32,1.275); position: relative; }
.indicator-item.is-active .indi-dot { width: 12px; height: 12px; box-shadow: 0 0 10px rgba(255,255,255,.5); }

/* Accessibility: Focus Ring for Indicators */
.indicator-item:focus {
    outline: none;
}
.indicator-item:focus .indi-dot {
    /* Creates a focus ring using the specific blue form the design */
    box-shadow: 0 0 0 4px rgba(182, 200, 252, 0.6); 
}

/* Pause Bars */
.indi-dot::before, .indi-dot::after { content: ""; position: absolute; top: 0; width: 3px; height: 100%; background: #FFEDCB; border-radius: 2px; opacity: 0; transform: scaleY(.5); transition: all .2s ease; }
.indi-dot::before { left: 0; } .indi-dot::after { right: 0; }

/* Hover: Pause */
.animation-wrapper:not(.is-paused) .indicator-item.is-active:hover .indi-dot { background: transparent; box-shadow: none; width: 10px; height: 10px; }
.animation-wrapper:not(.is-paused) .indicator-item.is-active:hover .indi-dot::before, 
.animation-wrapper:not(.is-paused) .indicator-item.is-active:hover .indi-dot::after { opacity: 1; transform: scaleY(1); }

/* Paused: Play Triangle */
.animation-wrapper.is-paused .indicator-item.is-active .indi-dot {
    width: 0; height: 0; background: transparent; box-shadow: none;
    border: 5px solid transparent; border-left: 9px solid #FFEDCB; border-right: 0;
    border-radius: 0; transform: translateX(1px);
}
.animation-wrapper.is-paused .indicator-item.is-active .indi-dot::before, 
.animation-wrapper.is-paused .indicator-item.is-active .indi-dot::after { opacity: 0; }

.indi-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.indicator-item.is-active .indi-ring { opacity: 1; }
.indi-ring circle { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 63; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke .3s ease; }

/* 7. DYNAMIC BACKGROUND LAYERS */
[class*="bg-slide-"] {
    filter: opacity(0);
    visibility: hidden;
    transition: filter 0.8s ease, visibility 0s linear 0.8s;
}

[class*="bg-slide-"].is-active {
    filter: opacity(1);
    visibility: visible;
    transition: filter 0.8s ease, visibility 0s;
}

/* SMART PAUSING */
.animation-wrapper.is-paused [class*="bg-slide-"]::before {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

/* 8. WISMO HUB CONTROLLER (Logo/Glow Visibility) */
/* 
   Logic: The Hub is visible by default (Slides 1, 2, 3...).
   It is hidden ONLY during the specific conditions defined below.
*/
.wismo-hub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1.0s ease; 
}

.animation-wrapper[data-slide="0"] .wismo-hub,
.animation-wrapper:not(.is-ready) .wismo-hub {
    opacity: 0 !important;
    pointer-events: none;
    transition: none;
}
</style>