/* Container */

.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home .container {
    max-width: 1266px;
    width: 100%;
    margin: 0 auto ;
    position: relative;
    min-height: 99vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Studio Image */

.container  .studio-img {
    position: absolute;
    right: 10px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container  .studio-img img {
    position: absolute;
    filter: brightness(1.5);
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.container  .studio-img .vinyle {
    padding: 2px;
}

/* Filtre effet vinyle */

.container  .studio-img .vinyle-filter {
    z-index: 30;
    opacity: 0;
    padding: 0;
    animation: rotation2 7.2s ease-in-out infinite;
}

/* Placement Logo */

.container  .disque-image-logo{
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: hsl(230, 25%, 5%);
    z-index: 30;
    animation: rotation 5.2s linear infinite;
}

.container  .disque-image-logo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation disque */

@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation2 {
    0%{
        transform: rotate(0);
    }
    10%{
        transform: rotate(-10deg);
    }
    50%{
        transform: rotate(5deg);
    }
    70%{
        transform: rotate(-8deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

/* Css de base de l'overlay */

.home .studio-img-overlay{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: hsl(230, 25%, 5%);
    z-index: 99;
}

/* Studio Texte */

.home-text{
    z-index: 200;
    float: left;
    color: #fff;
    margin-top: 70px;
    position: absolute;
    left: 20px;
}

.home-text h6{
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 16px;
    margin: 50px 0;
}

.home-text h1 {
    text-transform: uppercase;
    font-size: 90px;
}

.home-text p {
    max-width: 500px;
    font-size: 16px;
    margin-top: 230px;
}

.home-text .name span {
    margin-right: 1px;
   display: inline-block;
}

.home-text .name span:nth-child(6){
    margin-right: 25px;
}

.home-text .name span:last-child {
    margin-right: 0;
}

/* Media Query */

@media (max-width:850px) {
    .container  .studio-img {
        left: 22%;
        width: 600px;
        height: 600px;
    }
    
    .home-text {
        left: 10px;
        margin-top: 0;
        color: #fff;
        position: absolute;
        margin-left: 10px;
    }

    .home-text h1 {
        text-transform: uppercase;
        font-size: 60px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(2, 1fr);
        row-gap: 0;
    }

    .home-text .name span.char6 {
        margin-left:-32px; 
    }

    .home-text p {
        max-width: 360px;
        margin-top: 200px;
    }
}

/* Comportement cacher par default */

.home .studio-img img,
.studio span,
.name span,
.logo,
.disque-image-logo,
.menu,
.small-intro span {
    opacity: 0;
}