/* Eye-C-You Sound & Vibe Layer */

.ecy-sound-vibe,
.ecy-sound-vibe *{
    box-sizing:border-box;
}

.ecy-sound-vibe{
    position:relative;
    overflow:hidden;
    padding:50px 24px 70px;
    color:#fff;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,45,55,.30), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(148,0,255,.20), transparent 26%),
        linear-gradient(145deg,#050505,#111827 55%,#050505);
    border-radius:28px;
    margin-top:30px;
}

.ecy-sound-vibe:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.16;
    pointer-events:none;
}

.ecy-sound-vibe > *{
    position:relative;
    z-index:2;
}

.ecy-sound-hero{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:40px;
    align-items:center;
    max-width:1200px;
    margin:0 auto 55px;
}

.ecy-sound-pill{
    display:inline-flex;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,45,55,.18);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-weight:900;
    font-size:13px;
    letter-spacing:.8px;
    margin-bottom:16px;
}

.ecy-sound-copy h2{
    margin:0 0 16px;
    font-size:54px;
    line-height:1.02;
    text-transform:uppercase;
    font-weight:950;
}

.ecy-sound-copy p{
    max-width:720px;
    color:rgba(255,255,255,.84);
    font-size:20px;
    line-height:1.6;
}

.ecy-equalizer{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:32px;
    background:
        radial-gradient(circle at center, rgba(255,45,55,.26), transparent 45%),
        rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 60px rgba(0,0,0,.32);
}

.ecy-equalizer span{
    width:14px;
    height:60px;
    border-radius:999px;
    background:linear-gradient(to top,#c90d20,#ff4f46);
    animation:eqMove 1.2s ease-in-out infinite;
}

.ecy-equalizer span:nth-child(2){animation-delay:.1s}
.ecy-equalizer span:nth-child(3){animation-delay:.2s}
.ecy-equalizer span:nth-child(4){animation-delay:.3s}
.ecy-equalizer span:nth-child(5){animation-delay:.4s}
.ecy-equalizer span:nth-child(6){animation-delay:.5s}
.ecy-equalizer span:nth-child(7){animation-delay:.6s}
.ecy-equalizer span:nth-child(8){animation-delay:.7s}
.ecy-equalizer span:nth-child(9){animation-delay:.8s}
.ecy-equalizer span:nth-child(10){animation-delay:.9s}

@keyframes eqMove{
    0%,100%{height:44px;opacity:.65}
    50%{height:145px;opacity:1}
}

.ecy-trending-sounds{
    max-width:1200px;
    margin:0 auto 60px;
}

.ecy-sound-title{
    font-size:34px;
    font-weight:950;
    text-transform:uppercase;
    margin-bottom:24px;
}

.ecy-sound-strip{
    display:flex;
    gap:22px;
    overflow-x:auto;
    padding-bottom:12px;
}

.ecy-sound-strip::-webkit-scrollbar{
    height:8px;
}

.ecy-sound-strip::-webkit-scrollbar-thumb{
    background:#c90d20;
    border-radius:999px;
}

.ecy-sound-card{
    min-width:270px;
    padding:24px;
    border-radius:30px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    transition:.25s ease;
}

.ecy-sound-card:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:rgba(255,45,55,.5);
    box-shadow:0 24px 64px rgba(255,45,55,.20);
}

.ecy-sound-disc{
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.16), transparent 55%),
        linear-gradient(135deg,#ff382f,#c90d20);
    font-size:32px;
    margin-bottom:20px;
    box-shadow:0 12px 34px rgba(255,45,55,.32);
    animation:discPulse 3s ease infinite;
}

@keyframes discPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.06)}
}

.ecy-sound-card h3{
    margin:0 0 10px;
    font-size:24px;
    text-transform:uppercase;
}

.ecy-sound-card p{
    color:rgba(255,255,255,.78);
    line-height:1.5;
    font-size:15px;
}

.ecy-sound-card span{
    display:inline-flex;
    margin-top:14px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.ecy-wave{
    display:flex;
    align-items:end;
    gap:5px;
    height:42px;
    margin-top:18px;
}

.ecy-wave i{
    display:block;
    width:8px;
    border-radius:999px;
    background:#ff2d38;
    animation:waveMove 1.1s ease-in-out infinite;
}

.ecy-wave i:nth-child(1){height:16px}
.ecy-wave i:nth-child(2){height:28px;animation-delay:.1s}
.ecy-wave i:nth-child(3){height:40px;animation-delay:.2s}
.ecy-wave i:nth-child(4){height:24px;animation-delay:.3s}
.ecy-wave i:nth-child(5){height:34px;animation-delay:.4s}

@keyframes waveMove{
    0%,100%{transform:scaleY(.6)}
    50%{transform:scaleY(1.2)}
}

.ecy-vibe-grid{
    max-width:1200px;
    margin:0 auto 60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.ecy-vibe-card{
    min-height:170px;
    padding:22px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    transition:.25s ease;
}

.ecy-vibe-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,45,55,.5);
}

.ecy-vibe-card strong{
    display:block;
    font-size:20px;
    margin-bottom:12px;
}

.ecy-vibe-card span{
    color:rgba(255,255,255,.76);
    line-height:1.45;
}

.ecy-sound-cta{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
    padding:44px;
    border-radius:34px;
    background:
        radial-gradient(circle at top left, rgba(255,45,55,.30), transparent 30%),
        rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
}

.ecy-sound-cta h2{
    margin:0 0 14px;
    font-size:42px;
    text-transform:uppercase;
}

.ecy-sound-cta p{
    margin:0 auto;
    max-width:760px;
    color:rgba(255,255,255,.82);
    font-size:18px;
    line-height:1.6;
}

@media(max-width:980px){

    .ecy-sound-hero{
        grid-template-columns:1fr;
    }

    .ecy-vibe-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:680px){

    .ecy-sound-vibe{
        border-radius:0;
        padding:36px 16px 50px;
    }

    .ecy-sound-copy h2{
        font-size:38px;
    }

    .ecy-sound-copy p{
        font-size:16px;
    }

    .ecy-equalizer{
        height:170px;
    }

    .ecy-sound-title{
        font-size:26px;
    }

    .ecy-sound-card{
        min-width:230px;
    }

    .ecy-vibe-grid{
        grid-template-columns:1fr;
    }

    .ecy-sound-cta{
        padding:32px 20px;
    }

    .ecy-sound-cta h2{
        font-size:30px;
    }

}