/* ═══════════════════════════════════════════════════
   SHOPIKSA — SLIDER ANIMATIONS
   6 animation styles for slide content
   ═══════════════════════════════════════════════════ */

/* ── BASE: all elements start hidden ── */
.sk-slide .sk-anim-tag,
.sk-slide .sk-anim-title,
.sk-slide .sk-anim-desc,
.sk-slide .sk-anim-btn {
    opacity: 0;
    will-change: opacity, transform;
}

/* ═══════════════════════════════════════════════════
   1. FADE-UP (default)
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-fade-up .sk-anim-tag,
.sk-slide.anim-fade-up .sk-anim-title,
.sk-slide.anim-fade-up .sk-anim-desc,
.sk-slide.anim-fade-up .sk-anim-btn {
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease;
}
.sk-slide.anim-fade-up.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.08s; }
.sk-slide.anim-fade-up.active .sk-anim-title { opacity:1; transform:none; transition-delay:.22s; }
.sk-slide.anim-fade-up.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.36s; }
.sk-slide.anim-fade-up.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.50s; }

/* ═══════════════════════════════════════════════════
   2. FADE-LEFT
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-fade-left .sk-anim-tag,
.sk-slide.anim-fade-left .sk-anim-title,
.sk-slide.anim-fade-left .sk-anim-desc,
.sk-slide.anim-fade-left .sk-anim-btn {
    transform: translateX(-40px);
    transition: opacity .5s ease, transform .5s ease;
}
.sk-slide.anim-fade-left.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.05s; }
.sk-slide.anim-fade-left.active .sk-anim-title { opacity:1; transform:none; transition-delay:.18s; }
.sk-slide.anim-fade-left.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.31s; }
.sk-slide.anim-fade-left.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.44s; }

/* ═══════════════════════════════════════════════════
   3. ZOOM-IN
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-zoom-in .sk-anim-tag,
.sk-slide.anim-zoom-in .sk-anim-title,
.sk-slide.anim-zoom-in .sk-anim-desc,
.sk-slide.anim-zoom-in .sk-anim-btn {
    transform: scale(0.75);
    transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.sk-slide.anim-zoom-in.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.06s; }
.sk-slide.anim-zoom-in.active .sk-anim-title { opacity:1; transform:none; transition-delay:.18s; }
.sk-slide.anim-zoom-in.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.30s; }
.sk-slide.anim-zoom-in.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.42s; }

/* ═══════════════════════════════════════════════════
   4. SLIDE-DOWN
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-slide-down .sk-anim-tag,
.sk-slide.anim-slide-down .sk-anim-title,
.sk-slide.anim-slide-down .sk-anim-desc,
.sk-slide.anim-slide-down .sk-anim-btn {
    transform: translateY(-30px);
    transition: opacity .5s ease, transform .5s ease;
}
.sk-slide.anim-slide-down.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.1s; }
.sk-slide.anim-slide-down.active .sk-anim-title { opacity:1; transform:none; transition-delay:.24s; }
.sk-slide.anim-slide-down.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.38s; }
.sk-slide.anim-slide-down.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.52s; }

/* ═══════════════════════════════════════════════════
   5. FLIP
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-flip .sk-anim-tag,
.sk-slide.anim-flip .sk-anim-title,
.sk-slide.anim-flip .sk-anim-desc,
.sk-slide.anim-flip .sk-anim-btn {
    transform: rotateX(45deg) translateY(20px);
    transform-origin: top center;
    transition: opacity .5s ease, transform .5s ease;
    backface-visibility: hidden;
}
.sk-slide.anim-flip.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.08s; }
.sk-slide.anim-flip.active .sk-anim-title { opacity:1; transform:none; transition-delay:.22s; }
.sk-slide.anim-flip.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.36s; }
.sk-slide.anim-flip.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.50s; }

/* ═══════════════════════════════════════════════════
   6. BOUNCE
   ═══════════════════════════════════════════════════ */
.sk-slide.anim-bounce .sk-anim-tag,
.sk-slide.anim-bounce .sk-anim-title,
.sk-slide.anim-bounce .sk-anim-desc,
.sk-slide.anim-bounce .sk-anim-btn {
    transform: translateY(50px) scale(0.9);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,.68,0,1.4);
}
.sk-slide.anim-bounce.active .sk-anim-tag   { opacity:1; transform:none; transition-delay:.05s; }
.sk-slide.anim-bounce.active .sk-anim-title { opacity:1; transform:none; transition-delay:.18s; }
.sk-slide.anim-bounce.active .sk-anim-desc  { opacity:1; transform:none; transition-delay:.30s; }
.sk-slide.anim-bounce.active .sk-anim-btn   { opacity:1; transform:none; transition-delay:.42s; }

/* ═══════════════════════════════════════════════════
   BACKGROUND ANIMATION (Ken-Burns zoom — all slides)
   ═══════════════════════════════════════════════════ */
.sk-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transform: scale(1.07);
    transition: transform 8s ease;
}
.sk-slide.active .sk-slide-bg { transform: scale(1); }

/* ═══════════════════════════════════════════════════
   VIDEO SLIDE
   ═══════════════════════════════════════════════════ */
.sk-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s;
}
.sk-slide.active .sk-slide-video { opacity: 1; }

/* YouTube embed in slide */
.sk-slide-yt-wrap {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
}
.sk-slide-yt-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity .5s;
}
.sk-slide.active .sk-slide-yt-wrap iframe { opacity: 1; }