.scene-theatre{
position:relative;
height:260px;
background:radial-gradient(circle at center,#2b2b2b 0%,#000 70%);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
font-family:Georgia, serif;
}

/* lumière de scène */

.lights{
position:absolute;
top:-120px;
width:600px;
height:400px;
background:radial-gradient(ellipse at center,rgba(255,240,200,0.5) 0%,rgba(255,240,200,0.2) 40%,transparent 70%);
z-index:1;
}

/* scène */

.stage{
position:absolute;
bottom:0;
width:100%;
height:110px;
background:linear-gradient(#6b4520,#3a220f);
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}

/* titre */

.stage h1{
color:#fff6d5;
font-size:44px;
letter-spacing:2px;
text-align:center;
text-shadow:
0 0 10px rgba(255,220,120,0.8),
3px 3px 10px rgba(0,0,0,0.9);
opacity:0;
animation:showTitle 2s forwards;
animation-delay:2s;
}

/* rideaux velours */

.curtain{
position:absolute;
top:0;
width:50%;
height:100%;
z-index:4;

background:
repeating-linear-gradient(
90deg,
#5c0000,
#8b0000 20px,
#4a0000 40px
);

box-shadow:
inset -20px 0 40px rgba(0,0,0,0.8),
0 0 30px rgba(0,0,0,0.6);
}

.curtain-left{
left:0;
animation:openLeft 3.5s ease forwards;
}

.curtain-right{
right:0;
animation:openRight 3.5s ease forwards;
}

/* animations */

@keyframes openLeft{
0%{transform:translateX(0)}
100%{transform:translateX(-105%)}
}

@keyframes openRight{
0%{transform:translateX(0)}
100%{transform:translateX(105%)}
}

@keyframes showTitle{
0%{
opacity:0;
transform:scale(0.8);
}
100%{
opacity:1;
transform:scale(1);
}
}

/* bandeau image */

.bandeau-theatre-image{
position:relative;
height:260px;
background-image:url("/joomla/images/bandeau_theatre.jpg");
background-size:cover;
background-position:center;
overflow:hidden;
}

/* rideaux */

.rideau{
position:absolute;
top:0;
width:50%;
height:100%;
z-index:5;

background:
repeating-linear-gradient(
90deg,
#7a0000,
#a00000 20px,
#6a0000 40px
);

box-shadow: inset -20px 0 40px rgba(0,0,0,0.8);
}

.rideau.gauche{
left:0;
animation:ouvrirGauche 3s ease forwards;
}

.rideau.droite{
right:0;
animation:ouvrirDroite 3s ease forwards;
}

@keyframes ouvrirGauche{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}

@keyframes ouvrirDroite{
0%{transform:translateX(0);}
100%{transform:translateX(100%);}
}