/*==================================================
DAYAL PARADISE V2
Live Experience
assets/css/live-experience.css
==================================================*/

/*==========================================
SECTION
==========================================*/

.live-experience{

    position:relative;
    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(180deg,#060606 0%,#111111 50%,#060606 100%);

}

//.live-experience::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    top:-450px;
    right:-250px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(216,179,106,.08),
        transparent 70%);

    pointer-events:none;//

}

//.live-experience::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    bottom:-300px;
    left:-200px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(216,179,106,.05),
        transparent 70%);

    pointer-events:none;//

}

/*==========================================
LAYOUT
==========================================*/

.experience-layout{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:70px;

    align-items:center;

    margin-top:70px;

}

/*==========================================
LED SCREEN
==========================================*/

.led-screen{

    position:relative;

    min-height:520px;

    border-radius:30px;

    overflow:hidden;

    border:2px solid rgba(216,179,106,.25);

    background:

        linear-gradient(
            135deg,
            #1a1a1a,
            #080808
        );

    box-shadow:

        0 40px 90px rgba(0,0,0,.45),
        inset 0 0 60px rgba(255,255,255,.02);

}

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

.led-screen img{

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.28;

    display:block;

}

/*==========================================
NO IMAGE FALLBACK
==========================================*/

.led-screen::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
            rgba(216,179,106,.10),
            transparent 70%
        ),

        repeating-linear-gradient(

            0deg,

            rgba(255,255,255,.015) 0px,
            rgba(255,255,255,.015) 2px,

            transparent 2px,
            transparent 6px

        );

}

/*==========================================
LED HEADER
==========================================*/

.led-header{

    position:absolute;

    left:25px;
    top:25px;

    z-index:10;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    font-size:13px;

    letter-spacing:2px;

    color:#fff;

}

/*==========================================
LIVE DOT
==========================================*/

.live-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#00ff66;

    animation:liveBlink 1s infinite;

    box-shadow:

        0 0 12px #00ff66;

}

@keyframes liveBlink{

50%{

opacity:.25;

}

}

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

.led-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:50px;

    background:

        linear-gradient(
            transparent,
            rgba(0,0,0,.88)
        );

}

.led-overlay h3{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    margin-bottom:35px;

}

/*==========================================
RESULT
==========================================*/

.led-result{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==========================================
BAR
==========================================*/

.led-bar{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    border-radius:14px;

    overflow:hidden;

    color:#fff;

    font-weight:600;

}

.led-bar span,
.led-bar strong{

    position:relative;

    z-index:2;

}

.led-bar::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:0;

    animation:voteGrow 2.5s ease forwards;

}

.led-bar.bride::before{

    width:58%;

    background:

        linear-gradient(
            90deg,
            #d8b36a,
            #f2d28b
        );

}

.led-bar.groom::before{

    width:42%;

    background:

        linear-gradient(
            90deg,
            #3a7dff,
            #64b5ff
        );

}

@keyframes voteGrow{

from{

width:0;

}

}

/*==========================================
FEATURES
==========================================*/

.experience-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:26px;

    border-radius:22px;

    background:

        rgba(255,255,255,.03);

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.feature-item:hover{

    transform:translateX(8px);

    border-color:rgba(216,179,106,.35);

    box-shadow:

        0 20px 45px rgba(0,0,0,.30);

}

.feature-icon{

    width:72px;
    height:72px;

    border-radius:50%;

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

    background:

        linear-gradient(
            135deg,
            rgba(216,179,106,.20),
            rgba(216,179,106,.05)
        );

    font-size:34px;

    flex-shrink:0;

}

.feature-item h3{

    margin-bottom:10px;

    font-size:24px;

}

.feature-item p{

    color:var(--text);

    line-height:1.8;

}

/*==========================================
LED SHINE
==========================================*/

.led-screen::after{

    content:"";

    position:absolute;

    top:0;
    left:-40%;

    width:35%;
    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.10),

            transparent

        );

    animation:ledShine 5s linear infinite;

}

@keyframes ledShine{

100%{

left:140%;

}

}

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

@media(max-width:1100px){

.experience-layout{

grid-template-columns:1fr;

}

.experience-right{

margin-top:20px;

}

}

@media(max-width:768px){

.live-experience{

padding:90px 0;

}

.led-screen{

min-height:420px;

}

.led-overlay{

padding:30px;

}

.led-overlay h3{

font-size:30px;

}

.feature-item{

padding:20px;

}

.feature-icon{

width:60px;
height:60px;

font-size:28px;

}

}

@media(max-width:480px){

.led-screen{

min-height:340px;

}

.led-overlay h3{

font-size:24px;

}

.feature-item{

flex-direction:column;

text-align:center;

align-items:center;

}

.feature-icon{

margin-bottom:8px;

}

}