/* Filter Tabs Styling */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3rem auto 1.5rem;
    flex-wrap: wrap;
    z-index: 10;
    position: relative;
    max-width: 680px;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(227, 214, 195, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.filter-tab {
    background: transparent;
    border: 0;
    color: var(--text-soft);
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filter-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.filter-tab.is-active {
    color: var(--bg);
    background: var(--accent);
    box-shadow: 0 8px 24px rgba(215, 190, 147, 0.28);
    font-weight: 600;
}

.stack-cards-column {
    display: grid;
    gap: 1rem;
}

.stack-cards-wrap {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 1.4rem;
    border: 1px solid rgba(227, 214, 195, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.08));
}

.stack-media-card {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: #000;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transition: transform 420ms ease, opacity 420ms ease, filter 420ms ease;
}

.stack-media-card video,
.stack-media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-play-overlay {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    backdrop-filter: blur(8px);
}

.stack-progress-bar {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.stack-progress-line {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(215, 190, 147, 0.2), rgba(255, 237, 203, 0.95), rgba(215, 190, 147, 0.2));
    transition: width 350ms ease;
}

.hover-tip-hint {
    justify-self: end;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.stack-pos-0 {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 4;
}

.stack-pos-1 {
    opacity: 0.62;
    transform: translateX(4.5%) scale(0.96);
    z-index: 3;
    filter: blur(0.25px);
}

.stack-pos-2 {
    opacity: 0.36;
    transform: translateX(8.5%) scale(0.92);
    z-index: 2;
    filter: blur(0.6px);
}

.stack-pos-3,
.stack-pos-out,
.stack-pos-prev {
    opacity: 0;
    transform: translateX(12%) scale(0.88);
    z-index: 1;
    pointer-events: none;
}

.stack-info-block.active .stack-action-btn {
    background: rgba(215, 190, 147, 0.08);
    color: var(--text);
}

@media (max-width: 1100px) {
    .feature-metrics,
    .gallery-grid,
    .template-stack-section {
        grid-template-columns: 1fr;
    }

    .stack-cards-wrap {
        min-height: 420px;
    }

    .showcase-text-side {
        width: 55%;
    }
}

@media (max-width: 720px) {
    .feature-metrics {
        grid-template-columns: 1fr;
    }

    .spec-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .title-group {
        padding-left: 2.4rem;
    }

    .bg-watermark-num {
        font-size: 1.9rem;
    }

    .stack-controls {
        flex-wrap: wrap;
    }

    /* Showcase mobile overrides */
    .showcase-container {
        aspect-ratio: auto;
        min-height: 460px;
    }

    .showcase-text-side {
        width: 100%;
        padding: 2.5rem 1.5rem;
        justify-content: center;
        background: rgba(5, 5, 5, 0.88);
    }

    .poetic-text-block {
        text-align: center;
        gap: 0.8rem;
    }

    .carousel-slide {
        align-items: center;
        right: 50%;
        transform: translate(50%, -50%);
    }

    .arc-line {
        transform: translateX(0) translateY(15px) !important;
        transition-delay: calc(var(--line-idx, 0) * 0.05s) !important;
    }

    .carousel-slide.active .arc-line {
        transform: translateX(0) translateY(0) !important;
    }

    .title-line {
        transform: translateY(10px) !important;
    }

    .carousel-slide.active .title-line {
        transform: translateY(0) !important;
    }

    .hover-tip-hint {
        right: 50%;
        transform: translateX(50%);
        bottom: 1.5rem;
        justify-self: center;
    }

    .showcase-text-side.is-hovered ~ .hover-tip-hint,
    .showcase-text-side:hover ~ .hover-tip-hint {
        opacity: 0;
        transform: translate(50%, 10px);
    }

    .stack-cards-wrap {
        min-height: 360px;
    }

    .template-stack {
        min-height: 620px;
    }

    .template-card-main {
        width: min(84vw, 640px);
    }

    .template-card-layer-1 {
        width: min(60vw, 420px);
        transform: translate(calc(-50% + 14vw), -50%);
    }

    .template-card-layer-2 {
        width: min(52vw, 360px);
        transform: translate(calc(-50% + 28vw), -50%);
    }

    .template-card-layer-3 {
        width: min(46vw, 320px);
        transform: translate(calc(-50% + 40vw), -50%);
    }
}

/* Custom typography optimization for workflow template stack */
.layered-template-stack {
    margin-top: 3.5rem;
}

.layered-template-stack .stack-info-block {
    padding: 0;
    gap: 1.1rem;
}

.layered-template-stack .stack-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.24em;
}

.layered-template-stack .title-group h3 {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    letter-spacing: 0.16em;
}

.layered-template-stack .title-sub-credit {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
}

.layered-template-stack .template-desc {
    font-size: 0.76rem;
    line-height: 2.1;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

.layered-template-stack .spec-label {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
}

.layered-template-stack .spec-value {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

/* --- OVERRIDES FOR THE LAYERED STACK LAYOUT --- */

/* Make wrapper transparent and overflow visible to let cards float to the right */
.layered-template-stack .stack-cards-wrap {
    min-height: 480px; /* Shrunk down from 520px */
    border: none;
    background: transparent;
    overflow: visible;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Card base styling: absolute center positioning instead of inset:0 */
.layered-template-stack .stack-media-card {
    position: absolute;
    top: 50%;
    left: 22%; /* Shift center further left to close the middle black gap */
    bottom: auto;
    right: auto;
    border-radius: 1.15rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.3, 1), 
                opacity 0.65s cubic-bezier(0.25, 1, 0.3, 1), 
                filter 0.65s cubic-bezier(0.25, 1, 0.3, 1);
    cursor: pointer;
}

/* Pos 0: Active / Main Card (3:4 ratio) */
.layered-template-stack .stack-pos-0 {
    width: min(34vw, 360px);
    aspect-ratio: 0.75;
    z-index: 10;
    transform: translate3d(-50%, -50%, 60px) scale(1) rotateY(0deg);
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* Pos 1: Second Card (3:4 ratio) - smaller size difference & looser spacing */
.layered-template-stack .stack-pos-1 {
    width: min(32vw, 330px);
    aspect-ratio: 0.75;
    z-index: 8;
    transform: translate3d(calc(-50% + 13.5vw), -50%, 15px) scale(1) rotateY(-15deg);
    opacity: 0.68;
    filter: blur(0.15px);
}

/* Pos 2: Third Card (3:4 ratio) - smaller size difference & looser spacing */
.layered-template-stack .stack-pos-2 {
    width: min(30vw, 300px);
    aspect-ratio: 0.75;
    z-index: 6;
    transform: translate3d(calc(-50% + 24.5vw), -50%, -25px) scale(1) rotateY(-22deg);
    opacity: 0.42;
    filter: blur(0.4px);
}

/* Pos 3: Fourth Card (3:4 ratio) - smaller size difference & looser spacing */
.layered-template-stack .stack-pos-3 {
    width: min(28vw, 270px);
    aspect-ratio: 0.75;
    z-index: 4;
    transform: translate3d(calc(-50% + 33.5vw), -50%, -60px) scale(1) rotateY(-28deg);
    opacity: 0.26;
    filter: blur(0.6px);
}

/* Out / Prev position (3:4 ratio) */
.layered-template-stack .stack-pos-out,
.layered-template-stack .stack-pos-prev {
    width: min(26vw, 250px);
    aspect-ratio: 0.75;
    z-index: 0;
    transform: translate3d(calc(-50% + 40vw), -50%, -100px) scale(1) rotateY(-34deg);
    opacity: 0;
    pointer-events: none;
}

/* Card Text Overlay Styling */
.layered-template-stack .card-text-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 75%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    padding-right: 3.8rem; /* Make room for the play button at bottom-right */
    pointer-events: none;
    z-index: 2;
    transition: opacity 300ms ease;
    opacity: 0;
}

.layered-template-stack .stack-pos-0 .card-text-overlay {
    opacity: 1;
}

.layered-template-stack .stack-pos-1 .card-text-overlay,
.layered-template-stack .stack-pos-2 .card-text-overlay,
.layered-template-stack .stack-pos-3 .card-text-overlay {
    opacity: 0.35;
}

.layered-template-stack .card-kicker {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.layered-template-stack .card-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #ffffff;
    margin: 0 0 0.2rem 0;
}

.layered-template-stack .card-subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Play button at bottom-right corner for all cards */
.layered-template-stack .card-play-overlay {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
    top: auto;
    transform: none;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    z-index: 3;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease, background-color 300ms ease;
}

.layered-template-stack .card-play-overlay svg {
    width: 0.9rem;
    height: 0.9rem;
    transform: translateX(1px); /* optical alignment */
}

.layered-template-stack .stack-pos-0 .card-play-overlay {
    opacity: 0.95;
}

.layered-template-stack .stack-media-card:hover .card-play-overlay {
    opacity: 1;
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.7);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
    .layered-template-stack .stack-cards-wrap {
        min-height: 380px;
    }
    .layered-template-stack .stack-media-card {
        left: 45%; /* Shift center left to leave room for the stack on the right when centered */
    }
    .layered-template-stack .stack-pos-0 {
        width: min(38vw, 300px);
        transform: translate3d(-50%, -50%, 60px) rotateY(0deg);
    }
    .layered-template-stack .stack-pos-1 {
        width: min(35vw, 275px);
        transform: translate3d(calc(-50% + 15vw), -50%, 15px) rotateY(-15deg);
    }
    .layered-template-stack .stack-pos-2 {
        width: min(32vw, 250px);
        transform: translate3d(calc(-50% + 27vw), -50%, -25px) rotateY(-22deg);
    }
    .layered-template-stack .stack-pos-3 {
        width: min(29vw, 225px);
        transform: translate3d(calc(-50% + 36vw), -50%, -60px) rotateY(-28deg);
    }
}

@media (max-width: 768px) {
    .layered-template-stack .stack-cards-wrap {
        min-height: 320px;
    }
    .layered-template-stack .stack-media-card {
        left: 40%; /* Shift slightly left for very small mobile screens */
    }
    .layered-template-stack .stack-pos-0 {
        width: min(50vw, 220px);
        transform: translate3d(-50%, -50%, 40px) rotateY(0deg);
    }
    .layered-template-stack .stack-pos-1 {
        width: min(46vw, 200px);
        transform: translate3d(calc(-50% + 18vw), -50%, 10px) rotateY(-15deg);
    }
    .layered-template-stack .stack-pos-2 {
        width: min(42vw, 180px);
        transform: translate3d(calc(-50% + 32vw), -50%, -20px) rotateY(-22deg);
    }
    .layered-template-stack .stack-pos-3 {
        width: min(38vw, 160px);
        transform: translate3d(calc(-50% + 43vw), -50%, -40px) rotateY(-28deg);
    }
}

/* ==========================================================================
   Card Entrance Animations (Right-to-Left Stagger, Leftmost Card First)
   ========================================================================== */

/* 1. keyframes for workflow template stack (centered layout) */
@keyframes workflowCardEnter {
    0% {
        transform: translate3d(85vw, -50%, -200px) scale(0.65) rotateY(-48deg);
        opacity: 0;
        filter: blur(8px);
    }
}

/* Enable 3D context on the generic stacks as well for high-quality rotations */
.layered-template-stack .stack-cards-wrap {
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Temporarily disable clipping boundaries so cards can fly in from off-screen */
.layered-template-stack:not(.interacted) .stack-cards-wrap {
    overflow: visible !important;
}

/* Base entrance transition rules when scrolled into view (but not yet interacted) */
.layered-template-stack.is-visible:not(.interacted) .stack-media-card {
    animation: workflowCardEnter 1.4s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/* Staggered Delays: Leftmost card enters first (delay 100ms), and subsequent cards to the right follow */
.layered-template-stack:not(.interacted) .stack-media-card:nth-child(1) {
    animation-delay: 100ms;
}
.layered-template-stack:not(.interacted) .stack-media-card:nth-child(2) {
    animation-delay: 220ms;
}
.layered-template-stack:not(.interacted) .stack-media-card:nth-child(3) {
    animation-delay: 340ms;
}
.layered-template-stack:not(.interacted) .stack-media-card:nth-child(4) {
    animation-delay: 460ms;
}
.layered-template-stack:not(.interacted) .stack-media-card:nth-child(5) {
    animation-delay: 580ms;
}