/*======================================================
  BLUEBEEWEB INTRO SCREEN
======================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:Inter,Arial,sans-serif;

    background:#000;

}

body{

    display:flex;

    justify-content:center;

    align-items:center;

}


/*======================================================
  MAIN CONTAINER
======================================================*/

.intro-container{

    position:relative;

    width:100%;
    height:100vh;

    background:#000;

    overflow:hidden;

}


/*======================================================
  SLIDER
======================================================*/

.slider{

    width:100%;
    height:100%;

    position:relative;

    overflow:hidden;

}


/*======================================================
  SLIDES
======================================================*/

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .6s ease,
        visibility .6s ease;

}

.slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}


/*======================================================
  IMAGES
======================================================*/

.slide img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    backface-visibility:hidden;

    transform:translateZ(0);

    will-change:transform;

}


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

.overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.20),
            rgba(0,0,0,.55),
            rgba(0,0,0,.75)
        );

    z-index:1;

    pointer-events:none;

}


/*======================================================
  TOP CUT / LOGO
  REMOVED COMPLETELY
======================================================*/

/*
    Aucun .slide::before

    Aucun .slide::after

    Le bloc noir supplémentaire et le logo
    BlueBeeWeb ne sont plus générés par le CSS.
*/


/*======================================================
  TEXT
======================================================*/

.content{

    position:absolute;

    left:38px;

    right:38px;

    top:150px;

    z-index:4;

    color:#fff;

}

.content h1{

    font-size:54px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:20px;

}

.content p{

    font-size:21px;

    line-height:1.55;

    color:rgba(255,255,255,.90);

    max-width:540px;

}


/*======================================================
  CONTENT ANIMATION
======================================================*/

.slide .content{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.slide.active .content{

    opacity:1;

    transform:translateY(0);

}


/*======================================================
  PAGINATION
======================================================*/

.pagination{

    position:absolute;

    top:70px;

    left:38px;

    display:flex;

    gap:14px;

    z-index:20;

    pointer-events:auto;

}

.dot{

    width:70px;

    height:8px;

    border-radius:20px;

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

    transition:
        background .3s ease,
        opacity .3s ease;

    cursor:pointer;

}

.dot.active{

    background:#fff;

}


/*======================================================
  BUTTONS
======================================================*/

.buttons{

    position:absolute !important;

    left:0 !important;

    right:0 !important;

    bottom:18px !important;

    width:100% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    z-index:50 !important;

    pointer-events:none !important;

}


.intro-container .buttons .btn{

    width:280px !important;

    min-width:280px !important;

    max-width:280px !important;

    flex:0 0 280px !important;

    height:50px !important;

    min-height:50px !important;

    max-height:50px !important;

    padding:0 !important;

    margin:0 !important;

    border-radius:13px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-sizing:border-box !important;

    text-decoration:none !important;

    font-size:17px !important;

    font-weight:700 !important;

    cursor:pointer !important;

    pointer-events:auto !important;

    user-select:none !important;

    -webkit-user-select:none !important;

    -webkit-tap-highlight-color:transparent !important;

    touch-action:manipulation !important;

    transition:
        transform .15s ease,
        opacity .15s ease !important;

}


/*======================================================
  PRIMARY BUTTON
======================================================*/

.btn-primary{

    background:
        linear-gradient(
            90deg,
            #003366,
            #ffd966
        ) !important;

    color:#ffffff !important;

}


/*======================================================
  SECONDARY BUTTON
======================================================*/

.btn-secondary{

    background:#ffffff !important;

    color:#1c2432 !important;

}


/*======================================================
  BUTTON ACTIVE
======================================================*/

.intro-container .buttons .btn:active{

    transform:scale(.97) !important;

    opacity:.9 !important;

}


/*======================================================
  MOBILE
======================================================*/

@media(max-width:600px){

    .buttons{

        bottom:18px !important;

        gap:10px !important;

    }


    .intro-container .buttons .btn{

        width:280px !important;

        min-width:280px !important;

        max-width:280px !important;

        flex-basis:280px !important;

        height:50px !important;

        min-height:50px !important;

        max-height:50px !important;

        font-size:17px !important;

        border-radius:13px !important;

    }

}


/*======================================================
  VERY SMALL PHONES
======================================================*/

@media(max-width:340px){

    .intro-container .buttons .btn{

        width:260px !important;

        min-width:260px !important;

        max-width:260px !important;

        flex-basis:260px !important;

    }

}


/*======================================================
  REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}