/* =========================================
   ULTRA FUTURISTIC SHOWCASE SECTION
========================================= */

.editor-showcase-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:
        radial-gradient(circle at top left,
        rgba(124,58,237,.18),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(0,212,255,.14),
        transparent 35%),

        #050816;
}

/* =========================
   WRAPPER
========================= */

.showcase-wrapper{

    position:relative;

    border-radius:38px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.94),
            rgba(5,8,22,.98)
        );

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(30px);

    box-shadow:
        0 30px 90px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* =========================
   CYBER GRID
========================= */

.showcase-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.5),
            transparent
        );

    pointer-events:none;
}

/* =========================
   TOPBAR
========================= */

.showcase-topbar{

    position:relative;

    z-index:5;

    height:92px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 35px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.02);

    backdrop-filter:
        blur(20px);
}

/* =========================
   LOGO
========================= */

.showcase-logo{

    display:flex;
    align-items:center;

    gap:16px;

    color:#fff;

    font-size:1.05rem;
    font-weight:700;

    letter-spacing:.5px;
}

.showcase-logo-icon{

    position:relative;

    width:58px;
    height:58px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #7C3AED,
            #00D4FF
        );

    box-shadow:
        0 0 35px rgba(124,58,237,.45);

    overflow:hidden;
}

.showcase-logo-icon::before{

    content:"";

    position:absolute;

    width:180%;
    height:180%;

    background:
        conic-gradient(
            transparent,
            rgba(255,255,255,.5),
            transparent
        );

    animation:
        spinGlow 4s linear infinite;
}

.showcase-logo-icon i{

    position:relative;

    z-index:2;

    font-size:1.2rem;
}

/* =========================
   TOP ACTIONS
========================= */

.showcase-top-actions{

    display:flex;
    align-items:center;

    gap:16px;
}

.showcase-circle-btn{

    width:54px;
    height:54px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    cursor:pointer;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    transition:
        all .35s ease;
}

.showcase-circle-btn:hover{

    transform:
        translateY(-5px);

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.3),
            rgba(0,212,255,.25)
        );

    box-shadow:
        0 12px 25px rgba(124,58,237,.35);
}

.showcase-start-btn{

    height:56px;

    padding:0 28px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

    font-size:1rem;
    font-weight:700;

    display:flex;
    align-items:center;

    gap:12px;

    background:
        linear-gradient(
            135deg,
            #7C3AED,
            #00D4FF
        );

    box-shadow:
        0 15px 40px rgba(124,58,237,.4);

    transition:
        all .35s ease;
}

.showcase-start-btn:hover{

    transform:
        translateY(-5px) scale(1.02);
}

/* =========================
   EDITOR AREA
========================= */

.showcase-editor{

    position:relative;

    display:grid;

    grid-template-columns:
        100px
        1fr
        110px;

    gap:30px;

    min-height:700px;

    padding:35px;
}

/* =========================
   LEFT SIDEBAR
========================= */

.showcase-sidebar{

    display:flex;
    flex-direction:column;

    gap:18px;
}

.showcase-tool{

    position:relative;

    width:100%;
    height:78px;

    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    cursor:pointer;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    transition:
        all .35s ease;

    overflow:hidden;
}

.showcase-tool::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.25),
            rgba(0,212,255,.18)
        );

    opacity:0;

    transition:.35s;
}

.showcase-tool i{

    position:relative;

    z-index:2;

    font-size:1.3rem;
}

.showcase-tool:hover,
.showcase-tool.active{

    transform:
        translateY(-6px);

    border-color:
        rgba(0,212,255,.4);

    box-shadow:
        0 15px 35px rgba(124,58,237,.35);
}

.showcase-tool:hover::before,
.showcase-tool.active::before{

    opacity:1;
}

/* =========================
   MAIN SHOWCASE
========================= */

.showcase-main{

    position:relative;
}

/* =========================
   IMAGE AREA
========================= */

.showcase-image{

    position:relative;

    height:100%;

    min-height:620px;

    border-radius:34px;

    overflow:hidden;

    background:
        radial-gradient(circle at top,
        rgba(124,58,237,.3),
        transparent 35%),

        linear-gradient(
            135deg,
            #111827,
            #0F172A,
            #020617
        );

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 30px 80px rgba(0,0,0,.55);
}

/* =========================
   GRID OVERLAY
========================= */

.showcase-image::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    opacity:.4;
}

/* =========================
   CENTER GLOW
========================= */

.showcase-glow{

    position:absolute;

    top:50%;
    left:50%;

    width:500px;
    height:500px;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,.4),
            rgba(0,212,255,.15),
            transparent 70%
        );

    filter:
        blur(20px);

    animation:
        pulseGlow 5s ease infinite;
}

/* =========================
   AI WAVE
========================= */

.showcase-wave{

    position:absolute;

    left:50%;
    top:50%;

    width:65%;
    height:4px;

    transform:
        translate(-50%,-50%);

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00D4FF,
            #7C3AED,
            transparent
        );

    box-shadow:
        0 0 25px rgba(0,212,255,.7);
}

.showcase-wave::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:-120px;
    bottom:-120px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='260'%3E%3Cpath d='M0 130 C120 40 220 220 340 130 S560 40 680 130 S840 220 900 130' stroke='%2300D4FF' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
        center/contain no-repeat;

    opacity:.9;

    animation:
        waveMove 6s linear infinite;
}

/* =========================
   FLOATING STATUS
========================= */

.showcase-status{

    position:absolute;

    top:30px;
    right:30px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:18px;

    background:
        rgba(0,0,0,.45);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(15px);

    color:#fff;

    z-index:4;
}

.showcase-status-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#00ff9d;

    box-shadow:
        0 0 15px #00ff9d;
}

/* =========================
   FLOATING CARDS
========================= */

.showcase-floating-card{

    position:absolute;

    padding:16px 18px;

    border-radius:20px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(15px);

    color:#fff;

    font-size:.9rem;
    font-weight:600;

    display:flex;
    align-items:center;

    gap:12px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);
}

.showcase-floating-card i{

    color:#00D4FF;
}

.card-1{

    left:30px;
    bottom:30px;
}

.card-2{

    right:30px;
    bottom:30px;
}

/* =========================
   RIGHTBAR
========================= */

.showcase-rightbar{

    display:flex;
    flex-direction:column;

    gap:18px;
}

.showcase-right-tool{

    height:78px;

    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    cursor:pointer;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    transition:
        all .35s ease;
}

.showcase-right-tool:hover{

    transform:
        translateY(-5px);

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.3),
            rgba(0,212,255,.2)
        );
}

/* =========================
   ANIMATIONS
========================= */

@keyframes pulseGlow{

    0%,100%{

        transform:
            translate(-50%,-50%) scale(1);

        opacity:.9;
    }

    50%{

        transform:
            translate(-50%,-50%) scale(1.12);

        opacity:1;
    }
}

@keyframes waveMove{

    from{

        transform:
            translateX(-20px);
    }

    to{

        transform:
            translateX(20px);
    }
}

@keyframes spinGlow{

    from{

        transform:
            rotate(0deg);
    }

    to{

        transform:
            rotate(360deg);
    }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .showcase-editor{

        grid-template-columns:
            90px
            1fr;
    }

    .showcase-rightbar{

        display:none;
    }
}

@media(max-width:768px){

    .showcase-editor{

        grid-template-columns:1fr;
    }

    .showcase-sidebar{

        flex-direction:row;
    }

    .showcase-tool{

        height:65px;
    }

    .showcase-image{

        min-height:450px;
    }

    .showcase-topbar{

        padding:0 20px;
    }

    .showcase-start-btn{

        padding:0 18px;
    }
}

@media(max-width:580px){

    .showcase-topbar{

        flex-direction:column;

        justify-content:center;

        gap:14px;

        height:auto;

        padding:20px;
    }

    .showcase-editor{

        padding:18px;
    }

    .showcase-image{

        min-height:340px;
    }

    .showcase-floating-card{

        display:none;
    }
}