/* Showcase Section (Zig-Zag Layout) */
.showcase-section {
    position: relative;
    padding: 120px 0;
    background-color: transparent;
    overflow: hidden;
}

.showcase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 150px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.showcase-row.visible {
    opacity: 1;
    transform: translateY(0);
}

.showcase-row:last-child {
    margin-bottom: 0;
}

/* Alternating Direction */
.showcase-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* Image Styling */
.showcase-image {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.showcase-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease;
}

.showcase-image:hover img {
    transform: scale(1.05);
}


/* Content Styling */
.showcase-content {
    flex: 1;
    padding: 20px;
}

.showcase-tag {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(123, 63, 242, 0.15);
    border: 1px solid rgba(123, 63, 242, 0.3);
    border-radius: 50px;
    color: #a855f7;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.showcase-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

.showcase-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* New Custom Button Style (Skew Sweep) */
.showcase-link {
    display: inline-flex;
    /* Changed from inline-block for centering if needed */
    align-items: center;
    /* Center text/icon vertically */
    justify-content: center;
    padding: 0.7em 1.5em;
    /* Auto width based on content */
    margin-top: 20px;

    background: black;
    color: white;
    border: none;
    border-radius: 0.625em;
    font-size: 18px;
    /* Slightly smaller than 20px for better fit */
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
    /* Remove underline */

    /* Ensure shadows/dimensions match theme */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.showcase-link:hover {
    color: black;
}

.showcase-link::after {
    content: "";
    background: white;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
}

.showcase-link:hover::after {
    transform: skewX(-45deg) scale(1, 1);
}

/* Light Mode Overrides for Button */
[data-theme="light"] .showcase-link {
    background: #f0f0f0;
    /* Subtle grey for light mode */
    color: black;
    border: 1px solid #ddd;
}

[data-theme="light"] .showcase-link:hover {
    color: white;
}

[data-theme="light"] .showcase-link::after {
    background: black;
    /* Invert sweep color */
}

/* =========================================
   Text Animations (Load, Scroll, Hover)
   ========================================= */

/* 1. Initial State for Text Elements (Hidden for Scroll Reveal) */
.showcase-content .showcase-tag,
.showcase-content .showcase-title,
.showcase-content .showcase-desc,
.showcase-content .showcase-link {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Scroll Reveal Trigger (Staggered) */
.showcase-row.visible .showcase-content .showcase-tag {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.showcase-row.visible .showcase-content .showcase-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.showcase-row.visible .showcase-content .showcase-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.showcase-row.visible .showcase-content .showcase-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* 3. Hover Animation (Container Effect) */
/* 3. Hover Animation (Container Effect) */
.showcase-content {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy feel */
    padding: 0;
    /* Removed padding to avoid card feel in dark mode */
}

.showcase-content:hover {
    transform: translateY(-5px) scale(1.02);
    /* Subtle Lift */
    /* Removed background and shadow for Dark Mode - Pure Text Hover */
    background: transparent;
    box-shadow: none;
}

/* Text Element Hover Reactions */
.showcase-content:hover .showcase-title {
    background: linear-gradient(90deg, #fff, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
}

.showcase-content:hover .showcase-tag {
    background: rgba(123, 63, 242, 0.25);
    border-color: rgba(123, 63, 242, 0.6);
    transform: scale(1.1);
    /* Pop the tag */
}

.showcase-content:hover .showcase-link {
    transform: translateX(10px);
    /* Slide link forward */
}

/* Mobile Responsiveness - "Editorial Wrap" Layout Optimization */
@media (max-width: 991px) {
    .showcase-row {
        display: block !important; /* Switch from flex to block for floats */
        margin-bottom: 80px;
        clear: both;
        overflow: hidden; /* Clearfix */
    }

    .showcase-image {
        float: left;
        width: 45%;
        margin-right: 20px;
        margin-bottom: 10px;
        max-width: none;
        border-radius: 12px;
    }

    .showcase-row:nth-child(even) .showcase-image {
        float: right;
        margin-right: 0;
        margin-left: 20px;
    }

    .showcase-content {
        display: block; /* Content flows around float */
        width: 100%;
        padding: 0;
    }

    .showcase-tag {
        display: inline-block;
        padding: 4px 10px;
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .showcase-title {
        font-size: 1.4rem;
        font-weight: 800;
        margin-top: 5px;
        margin-bottom: 15px;
        /* Forced to sit beside the float image if space permits */
        line-height: 1.2;
    }

    .showcase-desc {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 20px;
        color: var(--text-muted);
        /* Naturally flows underneath the floated image once it ends */
    }

    .showcase-link {
        font-size: 15px;
        padding: 0.6em 1.2em;
        margin-top: 10px;
        display: inline-block;
        clear: both; /* Ensure button doesn't float next to small images */
    }
}

/* =========================================
   Light Mode Optimizations
   ========================================= */
[data-theme="light"] .showcase-image {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    /* Softer, more diffuse shadow */
    border-color: rgba(0, 0, 0, 0.05);
}


[data-theme="light"] .showcase-content:hover {
    background: rgba(0, 0, 0, 0.03);
    /* Darken slightly on white bg */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 30px;
    /* Re-add padding ONLY for light mode card effect if needed, or remove if clean look desired */
    border-radius: 16px;
}

/* Ensure padding exists in light mode if we want the card look there,
   but since we reset it above, we should add it back for light mode specific context
   OR just keep it clean. Let's add it back for light mode to maintain the "card" look there if logical. */
[data-theme="light"] .showcase-content {
    padding: 30px;
    border-radius: 16px;
}

[data-theme="light"] .showcase-content:hover .showcase-title {
    /* Gradient from dark gray to purple, instead of white to purple */
    background: linear-gradient(90deg, #333333, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="light"] .showcase-tag {
    /* Slightly stronger border for visibility */
    background: rgba(123, 63, 242, 0.08);
    border-color: rgba(123, 63, 242, 0.3);
}