.lf-slider{position:relative;overflow:hidden;user-select:none;-webkit-user-drag:none}
.lf-slider, .lf-slider .lf-stage{width:100%;height:100%}
.lf-slider .lf-stage{position:relative}
.lf-slide{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform:translate3d(0,0,0);will-change:transform,opacity}
.lf-slide img{width:100%;height:100%;object-fit:cover;display:block}
.lf-slide.lf-active{opacity:1;z-index:2}
.lf-slide.lf-out{z-index:1}

/* arrows */
.lf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5}
.lf-arrow:hover{background:rgba(0,0,0,.55)}
.lf-prev{left:10px} .lf-next{right:10px}

/* bullets */
.lf-bullets{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:5}
.lf-bullet{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.lf-bullet.lf-on{background:#fff}

/* --- EFFECTS (CSS animations) --- */
@keyframes lf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes lf-fade-out{from{opacity:1}to{opacity:0}}

@keyframes lf-slide-left-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes lf-slide-left-out{from{transform:translateX(0)}to{transform:translateX(-20%);opacity:0}}

@keyframes lf-slide-right-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes lf-slide-right-out{from{transform:translateX(0)}to{transform:translateX(20%);opacity:0}}

@keyframes lf-zoom-in{from{transform:scale(1.2);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes lf-zoom-out{from{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}

@keyframes lf-rotate-in{from{transform:scale(1.1) rotate(-6deg);opacity:.2}to{transform:scale(1) rotate(0)}}
@keyframes lf-rotate-out{from{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.9) rotate(6deg);opacity:0}}

@keyframes lf-clip-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lf-clip-out{from{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(100% 0 0 0);opacity:0}}

.lf-anim-fade-in{animation:lf-fade-in .8s ease both}
.lf-anim-fade-out{animation:lf-fade-out .6s ease both}
.lf-anim-left-in{animation:lf-slide-left-in .7s ease both}
.lf-anim-left-out{animation:lf-slide-left-out .6s ease both}
.lf-anim-right-in{animation:lf-slide-right-in .7s ease both}
.lf-anim-right-out{animation:lf-slide-right-out .6s ease both}
.lf-anim-zoom-in{animation:lf-zoom-in .8s ease both}
.lf-anim-zoom-out{animation:lf-zoom-out .6s ease both}
.lf-anim-rotate-in{animation:lf-rotate-in .8s ease both}
.lf-anim-rotate-out{animation:lf-rotate-out .6s ease both}
.lf-anim-clip-in{animation:lf-clip-in .8s ease both}
.lf-anim-clip-out{animation:lf-clip-out .6s ease both}