/* ── Wrapper ── */
.is-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

/* ── Timeline nav ── */
.is-nav-timeline {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background: rgba(0,0,0,0.25);
    z-index: 9;
}
.is-nav-list {
    position: absolute;
    right: 36px; /* adjusted to align icon with the line */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 70%;
    align-items: flex-end;
}
.is-nav-item {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.is-nav-text {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0,0,0,0.45);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.is-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 5px;
    transition: all 0.3s ease;
    color: var(--nav-icon-color, #999);
}
.is-nav-icon svg, .is-nav-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    fill: currentColor;
    transition: fill 0.3s ease, color 0.3s ease;
}
.is-nav-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* Optional: if you want the image color to match icon colors via CSS filters (can be complex, but basic approach) */
.is-nav-item.is-active .is-nav-text { color: #8db53e; }
.is-nav-item.is-active .is-nav-icon { color: var(--nav-icon-active-color, #8db53e); }
.is-nav-item:hover .is-nav-icon { color: var(--nav-icon-hover-color, #8db53e); }


/* ── Slide container ── */
.is-slider-container { position: relative; width: 100%; height: 100%; }
.is-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none; /* Let clicks pass to active slide */
}
.is-slide.is-active {
    z-index: 2;
    pointer-events: auto;
}

/* ── Background layer ── */
.is-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.is-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Inner layout ── */
.is-slide-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15% 0 10%;
    box-sizing: border-box;
}
.is-slide-content {
    flex: 1;
    max-width: 500px;
    color: #fff;
    padding-right: 40px;
    z-index: 4;
}
.is-title  { font-size: 3rem;  margin: 0 0 20px; color: #fff; line-height: 1.2; }
.is-desc   { font-size: 1.1rem; line-height: 1.6; color: #eee; margin-bottom: 25px; }
.is-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: #8db53e;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.is-btn:hover { transform: translateY(-2px); background: #7a9c35; }
.is-btn svg   { width: 1em; height: 1em; fill: currentColor; transition: fill 0.3s; }
.is-product-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.is-product-image img { max-width: 100%; height: auto; object-fit: contain; max-height: 80vh; }

/* ════════════════════════════════════════════
   LAYER TRANSITION SYSTEM
   Each layer (.is-slide-bg, .is-slide-content, .is-product-image)
   gets a class  layer-fx-{effect}  applied in PHP.
   JS adds/removes  .is-layer-in  to trigger the active state.
   ════════════════════════════════════════════ */

/* --- fade --- */
.layer-fx-fade                { opacity: 0;    transition: opacity 0.85s ease, visibility 0.85s ease; visibility: hidden; }
.layer-fx-fade.is-layer-in    { opacity: 1;    visibility: visible; }

/* --- slide-up --- */
.layer-fx-slide-up              { opacity: 0; transform: translateY(60px);  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,1,0.5,1), visibility 0.75s; visibility: hidden; }
.layer-fx-slide-up.is-layer-in  { opacity: 1; transform: translateY(0);     visibility: visible; }

/* --- slide-down --- */
.layer-fx-slide-down              { opacity: 0; transform: translateY(-60px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,1,0.5,1), visibility 0.75s; visibility: hidden; }
.layer-fx-slide-down.is-layer-in  { opacity: 1; transform: translateY(0);     visibility: visible; }

/* --- slide-left --- */
.layer-fx-slide-left              { opacity: 0; transform: translateX(80px);  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,1,0.5,1), visibility 0.75s; visibility: hidden; }
.layer-fx-slide-left.is-layer-in  { opacity: 1; transform: translateX(0);     visibility: visible; }

/* --- slide-right --- */
.layer-fx-slide-right              { opacity: 0; transform: translateX(-80px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,1,0.5,1), visibility 0.75s; visibility: hidden; }
.layer-fx-slide-right.is-layer-in  { opacity: 1; transform: translateX(0);     visibility: visible; }

/* --- zoom-in --- */
.layer-fx-zoom-in              { opacity: 0; transform: scale(0.8);  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,1,0.5,1), visibility 0.8s; visibility: hidden; }
.layer-fx-zoom-in.is-layer-in  { opacity: 1; transform: scale(1);    visibility: visible; }

/* --- zoom-out --- */
.layer-fx-zoom-out              { opacity: 0; transform: scale(1.2);  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,1,0.5,1), visibility 0.8s; visibility: hidden; }
.layer-fx-zoom-out.is-layer-in  { opacity: 1; transform: scale(1);    visibility: visible; }

/* --- parallax-blur (bg only) --- */
.layer-fx-parallax-blur              { opacity: 0; filter: blur(18px); transform: translateY(12%) scale(1.08); transition: opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(0.25,1,0.5,1), visibility 1s; visibility: hidden; }
.layer-fx-parallax-blur.is-layer-in  { opacity: 1; filter: blur(0);    transform: translateY(0) scale(1);     visibility: visible; }

/* --- flip-x --- */
.layer-fx-flip-x              { opacity: 0; transform: perspective(600px) rotateX(45deg); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,1,0.5,1), visibility 0.8s; visibility: hidden; }
.layer-fx-flip-x.is-layer-in  { opacity: 1; transform: perspective(600px) rotateX(0deg); visibility: visible; }

/* --- flip-y --- */
.layer-fx-flip-y              { opacity: 0; transform: perspective(600px) rotateY(60deg); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,1,0.5,1), visibility 0.8s; visibility: hidden; }
.layer-fx-flip-y.is-layer-in  { opacity: 1; transform: perspective(600px) rotateY(0deg); visibility: visible; }

/* --- rotate --- */
.layer-fx-rotate              { opacity: 0; transform: rotate(-12deg) scale(0.9); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,1,0.5,1), visibility 0.8s; visibility: hidden; }
.layer-fx-rotate.is-layer-in  { opacity: 1; transform: rotate(0deg)   scale(1);   visibility: visible; }

/* --- none --- */
.layer-fx-none              { opacity: 0; visibility: hidden; transition: opacity 0.01s, visibility 0.01s; }
.layer-fx-none.is-layer-in  { opacity: 1; visibility: visible; }

/* Content stagger delays */
.is-slide-content.is-layer-in { transition-delay: 0.15s; }
.is-product-image.is-layer-in { transition-delay: 0.05s; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .is-slide-inner    { flex-direction: column; padding: 60px 10% 20px; }
    .is-slide-content  { padding-right: 0; margin-bottom: 24px; text-align: center; max-width: 100%; }
    .is-nav-list, .is-nav-timeline { display: none; }
    .is-title { font-size: 2rem; }
}