/*==================================================
RYAN ROSEAU PROJECT LAB
==================================================*/

.elementor-editor-active .rr-project-card{
    opacity:1 !important;
    transform:none !important;
}

.elementor-editor-active .rr-bg-grid,
.elementor-editor-active .rr-cursor-glow{
    display:none !important;
}

body{
    background:#050505;
}


.rr-projects-lab{

position:relative;

overflow:hidden;

padding:140px 0;

background:#050505;

color:#fff;

}

.rr-bg-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:80px 80px;

mask-image:radial-gradient(circle,#000 35%,transparent 90%);

pointer-events:none;

z-index:0;

}

.rr-bg-glow{

position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.18;

pointer-events:none;

}

.rr-glow1{

width:500px;

height:500px;

background:#e8c66a;

top:0;

left:-200px;

}

.rr-glow2{

width:550px;

height:550px;

background:#8d2d2d;

bottom:-150px;

right:-180px;

}

.rr-hero{

position:relative;

z-index:2;

width:min(1300px,90%);

margin:auto;

text-align:center;

margin-bottom:0px;

}

.rr-subtitle{

display:inline-block;

padding:10px 22px;

border:1px solid rgba(232,198,106,.25);

border-radius:50px;

letter-spacing:4px;

font-size:13px;

color:#E8C66A;

margin-bottom:35px;

backdrop-filter:blur(20px);

}

.rr-hero h1{

font-size:clamp(70px,9vw,160px);

line-height:.95;

font-weight:900;

margin-bottom:35px;

}

.rr-hero p{

max-width:760px;

margin:auto;

font-size:21px;

line-height:1.9;

opacity:.7;

}

.rr-scroll{

margin:90px auto 0;

width:32px;

height:70px;

border:2px solid rgba(232,198,106,.35);

border-radius:30px;

display:flex;

justify-content:center;

padding-top:12px;

}

.rr-scroll span{

width:7px;

height:7px;

border-radius:50%;

background:#E8C66A;

animation:rrScrollDown 1.8s infinite;

}

@keyframes rrScrollDown{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(28px);

opacity:0;

}

}

/*==================================================
TIMELINE
==================================================*/

.rr-timeline{

position:relative;

width:min(1500px,92%);

margin:auto;

z-index:2;

}

.rr-timeline-line{

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:2px;

height:100%;

background:linear-gradient(

180deg,

transparent,

#E8C66A,

transparent

);

opacity:.4;

}

/*==================================================
PROJECT CARD
==================================================*/

.rr-project-card{

position:relative;

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

margin:10px 0;

opacity:0;

transform:translateY(120px);

transition:

opacity .8s ease,

transform .8s ease;

}

.rr-project-card.rr-show{

opacity:1;

transform:translateY(0);

}

.rr-project-card.rr-left{

flex-direction:row;

}

.rr-project-card.rr-right{

flex-direction:row-reverse;

}

/*==================================================
NUMÉRO
==================================================*/

.rr-project-number{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

font-size:170px;

font-weight:900;

color:rgba(232,198,106,.12);

pointer-events:none;

user-select:none;

z-index:15;

transition:.35s;

}

.rr-project-card:hover .rr-project-number{

color:rgba(232,198,106,.08);

}

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

.rr-project-image{

width:48%;

height:520px;

position:relative;

z-index:5;

perspective:1200px;

display:flex;

align-items:center;

justify-content:center;

transition:.45s;

overflow:visible;

}

.rr-project-image img{

width:100%;

height:100%;

object-fit:contain;

display:block;

border:none;

border-radius:0;

background:transparent;

box-shadow:none;

transition:.45s;

}

.rr-project-card:hover .rr-project-image{

transform:

rotateY(10deg)

translateY(-12px);

}

.rr-project-card.rr-right:hover .rr-project-image{

transform:

rotateY(-10deg)

translateY(-12px);

}


/*==================================================
CONTENU
==================================================*/

.rr-project-content{

width:42%;

position:relative;

z-index:20;

}

.rr-project-content span{

display:inline-flex;

align-items:center;

padding:10px 20px;

border-radius:50px;

background:rgba(232,198,106,.08);

border:1px solid rgba(232,198,106,.15);

color:#E8C66A;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:25px;

}

.rr-project-content h2{

font-size:58px;

font-weight:800;

line-height:1;

margin-bottom:25px;

color:#fff;

transition:.35s;

}

.rr-project-card:hover .rr-project-content h2{

color:#E8C66A;

}

.rr-project-content p{

font-size:18px;

line-height:1.9;

opacity:.72;

margin-bottom:40px;

}

/*==================================================
TECHNOLOGIES
==================================================*/

.rr-tech{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:45px;

}

.rr-tech div{

padding:12px 22px;

border-radius:50px;

background:#111;

border:1px solid rgba(232,198,106,.15);

font-size:14px;

transition:.35s;

cursor:default;

}

.rr-tech div:hover{

background:#E8C66A;

color:#050505;

transform:translateY(-6px);

box-shadow:

0 10px 30px rgba(232,198,106,.25);

}

/*==================================================
BOUTON
==================================================*/

.rr-project-content a{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 34px;

border-radius:60px;

background:#E8C66A;

color:#050505;

font-size:16px;

font-weight:700;

text-decoration:none;

border:none;

box-shadow:0 12px 35px rgba(232,198,106,.28);

transition:.35s;

position:relative;

overflow:hidden;

}

.rr-project-content a::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.55s;

}

.rr-project-content a:hover::before{

left:120%;

}

.rr-project-content a:hover{

background:#f5d47a;

color:#050505;

transform:translateY(-6px) scale(1.03);

box-shadow:0 20px 45px rgba(232,198,106,.45);

}

/*==================================================
ANIMATIONS
==================================================*/

.rr-project-card::before{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:70px;

height:70px;

border-radius:50%;

border:1px solid rgba(232,198,106,.20);

animation:rrPulse 3s infinite;

pointer-events:none;

}

.rr-project-card::after{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:18px;

height:18px;

border-radius:50%;

background:#E8C66A;

box-shadow:

0 0 20px rgba(232,198,106,.7),

0 0 60px rgba(232,198,106,.4);

pointer-events:none;

}

@keyframes rrPulse{

0%{

transform:translate(-50%,-50%) scale(.7);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(1.8);

opacity:0;

}

}

/*==================================================
CURSEUR LUMINEUX
==================================================*/

.rr-cursor-glow{

position:fixed;

left:0;

top:0;

width:300px;

height:300px;

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

background:radial-gradient(

circle,

rgba(232,198,106,.12),

transparent 70%

);

filter:blur(35px);

z-index:0;

transition:

left .08s linear,

top .08s linear;

}

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

@media(max-width:1100px){

.rr-project-card,

.rr-project-card.rr-left,

.rr-project-card.rr-right{

flex-direction:column;

text-align:center;

gap:50px;

}

.rr-project-image,

.rr-project-content{

width:100%;

}

.rr-project-number{

font-size:110px;

top:35%;

}

.rr-timeline-line{

left:35px;

}

.rr-project-card::before,

.rr-project-card::after{

left:35px;

}

.rr-tech{

justify-content:center;

}

}

@media(max-width:768px){

/*==============================
HERO
==============================*/

.rr-hero{

padding:0 20px;

}

.rr-hero h1{

font-size:48px;
line-height:1.05;
margin-bottom:20px;

}

.rr-hero p{

font-size:17px;
line-height:1.7;
max-width:100%;

}

/*==============================
PROJECT CARD
==============================*/

.rr-project-card{

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;

gap:25px;

margin:90px 0;

text-align:center;

}

.rr-project-number{

font-size:95px;

top:29%;

}

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

.rr-project-image{

width:100%;

height:145px;

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

}

.rr-project-image img{

max-width:100%;
max-height:220px;

object-fit:contain;

}

/*==============================
CONTENU
==============================*/

.rr-project-content{

width:92%;

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

}

/*==============================
BADGE
==============================*/

.rr-project-content span{

padding:8px 18px;

font-size:11px;

letter-spacing:1px;

margin-bottom:18px;

}

/*==============================
TITRE
==============================*/

.rr-project-content h2{

font-size:48px;

line-height:.95;

margin-bottom:18px;

min-height:105px;

display:flex;

align-items:center;

justify-content:center;

}

/*==============================
DESCRIPTION
==============================*/

.rr-project-content p{

font-size:16px;

line-height:1.6;

opacity:.72;

min-height:85px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:22px;

}

/*==============================
TECH
==============================*/

.rr-tech{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

min-height:90px;

margin-bottom:25px;

}

.rr-tech div{

padding:10px 16px;

font-size:13px;

}

/*==============================
BOUTON
==============================*/

.rr-project-content a{

padding:15px 28px;

font-size:15px;

}

}

/*==================================================
PROJECT VIEWER
==================================================*/

.rr-project-viewer{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(5,5,5,.92);

backdrop-filter:blur(20px);

opacity:0;

visibility:hidden;

transition:.45s;

z-index:999999;

}

.rr-project-viewer.show{

opacity:1;

visibility:visible;

}

.rr-project-viewer-content{

width:min(1500px,92%);

height:min(850px,90vh);

display:grid;

grid-template-columns:1.2fr 1fr;

background:#0b0b0b;

border-radius:35px;

overflow:hidden;

border:1px solid rgba(232,198,106,.15);

transform:scale(.9);

transition:.45s;

}

.rr-project-viewer.show .rr-project-viewer-content{

transform:scale(1);

}

.rr-project-viewer-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.rr-project-viewer-info{

padding:70px;

display:flex;

flex-direction:column;

justify-content:center;

}

.rr-project-viewer-info span{

color:#E8C66A;

letter-spacing:3px;

font-size:13px;

margin-bottom:20px;

text-transform:uppercase;

}

.rr-project-viewer-info h2{

font-size:58px;

margin-bottom:25px;

}

.rr-project-viewer-info p{

line-height:1.9;

opacity:.72;

margin-bottom:35px;

}

.rr-viewer-tech{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:35px;

}

.rr-viewer-tech div{

padding:12px 20px;

background:#141414;

border-radius:50px;

border:1px solid rgba(232,198,106,.15);

}

.rr-project-close{

position:absolute;

right:30px;

top:30px;

width:58px;

height:58px;

border:none;

background:#141414;

color:#fff;

border-radius:50%;

cursor:pointer;

font-size:22px;

transition:.35s;

}

.rr-project-close:hover{

background:#E8C66A;

color:#050505;

transform:rotate(90deg);

}

.rr-projects-lab{

padding:0px 0;

}

/* ==================================================
   CORRECTION DES CLICS SUR LES LIENS DES PROJETS
   ================================================== */

.rr-projects-lab {
    position: relative;
}

.rr-bg-grid,
.rr-bg-glow,
.rr-timeline-line {
    pointer-events: none !important;
}

.rr-project-card {
    position: relative;
    z-index: 10;
}

.rr-project-content {
    position: relative;
    z-index: 20;
}

.rr-project-content a {
    position: relative;
    z-index: 30;
    pointer-events: auto !important;
    cursor: pointer;
}