/*======================================================
OLIVER RIDLEY
HOME PAGE
======================================================*/

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

.hero{

 
max-width:1400px;

min-height:calc(100vh - 100px);

margin:auto;

display:grid;

grid-template-columns:1fr 500px;

gap:100px;

align-items:center;

position:relative;

padding:70px 40px;

box-sizing:border-box;
 

}

/*======================================================
BLUE GLOW
======================================================*/

.hero::before{

 
content:"";

position:absolute;

width:700px;

height:700px;

right:-220px;

top:-120px;

background:

    radial-gradient(
        rgba(80,150,255,.35),
        transparent 70%
    );

border-radius:50%;

filter:blur(90px);

animation:floatGlow 8s ease-in-out infinite;

pointer-events:none;

z-index:0;
 

}

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

.hero-content{

 
position:relative;

z-index:2;
 

}

.hero-label{

 
margin:0 0 25px;

font-size:14px;

font-weight:400;

letter-spacing:4px;

color:#ffffff;
 

}

/*======================================================
NAME
======================================================*/

.hero h1{

 
margin:0;

display:flex;

flex-direction:column;

align-items:flex-start;

font-size:clamp(60px,8vw,115px);

line-height:.9;

font-weight:500;

letter-spacing:3px;
 

}

.hero-name-white{

 
color:#ffffff;
 

}

.hero-name-grey{

 
color:#d3d3d384;
 

}

/*======================================================
LINE UNDER NAME
======================================================*/

.hero-line{

 
width:100%;

max-width:480px;

height:2px;

background:#d3d3d3;

margin-top:22px;
 

}

/*======================================================
TAGLINE
======================================================*/

.hero-tagline{

 
margin:22px 0 0;

font-size:20px;

font-weight:300;

letter-spacing:2px;

color:#ffffff;
 

}

/*======================================================
PHOTO
======================================================*/

.hero-image{

 
display:flex;

justify-content:center;

position:relative;

z-index:2;
 

}

.hero-image img{

 
width:100%;

max-width:430px;

border-radius:30px;

border:2px solid rgba(80,150,255,.7);

transition:var(--transition);

box-shadow:

    0 25px 60px rgba(80,150,255,.25);
 

}

.hero-image img:hover{

 
transform:translateY(-8px);

box-shadow:

    0 30px 80px rgba(80,150,255,.45);
 

}

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

@media(max-width:1100px){

 
.hero{

    grid-template-columns:1fr;

    text-align:center;

}


.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}


.hero h1{

    align-items:center;

}


.hero-image{

    margin-top:20px;

}
 

}

@media(max-width:700px){

 
.hero{

    padding:60px 25px;

    gap:50px;

}


.hero h1{

    font-size:clamp(55px,16vw,90px);

}


.hero-label{

    font-size:12px;

    letter-spacing:3px;

}


.hero-tagline{

    font-size:17px;

}


.hero-line{

    width:80%;

}


.hero-image img{

    max-width:420px;

}
 

}

/*======================================================
HOME INTRO
======================================================*/

.home-intro{

 
max-width:1400px;

margin:auto;

padding:140px 40px;

position:relative;

display:flex;

justify-content:center;
 

}

.home-intro::before{

 
content:"";

position:absolute;

width:500px;

height:500px;

left:-250px;

top:50px;

background:

    radial-gradient(
        rgba(80,150,255,.18),
        transparent 70%
    );

border-radius:50%;

filter:blur(100px);

pointer-events:none;
 

}

.home-intro-content{

 
max-width:900px;

text-align:center;

position:relative;

z-index:2;
 

}

.section-label{

 
margin:0 0 25px;

font-size:13px;

font-weight:500;

letter-spacing:4px;

color:#d3d3d3;
 

}

.home-intro h2{

 
margin:0;

font-size:clamp(45px,6vw,78px);

line-height:1;

font-weight:500;

letter-spacing:-1px;

color:#ffffff;
 

}

.home-intro h2 span{

 
color:#d3d3d3;
 

}

.home-intro-text{

 
max-width:720px;

margin:35px auto 0;

font-size:18px;

line-height:1.8;

font-weight:300;

color:#bdbdbd;
 

}

.home-intro-link{

 
display:inline-block;

margin-top:35px;

color:#ffffff;

text-decoration:none;

font-size:14px;

font-weight:500;

letter-spacing:2px;

border-bottom:1px solid #ffffff;

padding-bottom:7px;

transition:var(--transition);
 

}

.home-intro-link:hover{

 
color:#6fa8ff;

border-color:#6fa8ff;

transform:translateY(-3px);
 

}

@media(max-width:700px){

 
.home-intro{

    padding:100px 25px;

}


.home-intro h2{

    font-size:clamp(38px,10vw,60px);

}


.home-intro-text{

    font-size:16px;

    line-height:1.7;

}
 

}

/*======================================================
SHOWREELS
======================================================*/

.home-showreels{

 
max-width:1400px;

margin:auto;

padding:120px 40px;

position:relative;
 

}

.showreels-heading{

 
max-width:700px;

margin-bottom:60px;
 

}

.showreels-heading h2{

 
margin:0;

font-size:clamp(45px,6vw,78px);

line-height:1;

font-weight:500;

color:#ffffff;
 

}

.showreels-heading h2 span{

 
color:#d3d3d3;
 

}

.showreels-heading > p:last-child{

 
margin-top:30px;

max-width:600px;

font-size:17px;

line-height:1.7;

font-weight:300;

color:#bdbdbd;
 

}

.showreel-grid{

 
display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;
 

}

.showreel-card{

 
display:block;

color:#ffffff;

text-decoration:none;

transition:var(--transition);
 

}

.showreel-card:hover{

 
transform:translateY(-8px);
 

}

.showreel-image{

 
position:relative;

overflow:hidden;

border-radius:25px;

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

background:#111111;
 

}

.showreel-image img{

 
width:100%;

aspect-ratio:16 / 10;

object-fit:cover;

display:block;

transition:var(--transition);
 

}

.showreel-card:hover .showreel-image img{

 
transform:scale(1.04);
 

}

.play-button{

 
position:absolute;

top:50%;

left:50%;

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

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

transition:var(--transition);
 

}

.play-button i{

 
margin-left:4px;

font-size:20px;

color:#ffffff;
 

}

.showreel-card:hover .play-button{

 
background:#6fa8ff;

border-color:#6fa8ff;

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

}

.showreel-card h3{

 
margin:22px 0 5px;

font-size:21px;

font-weight:500;
 

}

.showreel-card p{

 
margin:0;

font-size:14px;

letter-spacing:1px;

color:#999999;
 

}

@media(max-width:900px){

 
.showreel-grid{

    grid-template-columns:1fr;

    max-width:650px;

}
 

}

@media(max-width:700px){

 
.home-showreels{

    padding:100px 25px;

}

.showreels-heading{

    margin-bottom:45px;

}
 

}

/*======================================================
AMDA JOURNEY
======================================================*/

.amda-section{

 
max-width:1400px;

margin:120px auto;

padding:90px 80px;

display:grid;

grid-template-columns:1fr 420px;

gap:80px;

align-items:center;

position:relative;

overflow:hidden;

background:#0a0a0a;

border:1px solid rgba(199,125,255,.25);

border-radius:30px;

box-sizing:border-box;

transition:var(--transition);
 

}

.amda-section::before{

 
content:"";

position:absolute;

width:650px;

height:650px;

left:-300px;

bottom:-350px;

background:

    radial-gradient(
        rgba(170,70,255,.25),
        transparent 70%
    );

border-radius:50%;

filter:blur(100px);

pointer-events:none;

transition:1s ease;
 

}

.amda-section:hover{

 
border-color:rgba(199,125,255,.7);

box-shadow:

    0 0 35px rgba(170,70,255,.18),

    0 0 100px rgba(170,70,255,.12);
 

}

.amda-section:hover::before{

 
background:

    radial-gradient(
        rgba(180,70,255,.45),
        transparent 70%
    );
 

}

.amda-content{

 
position:relative;

z-index:2;
 

}

.amda-content .section-label{

 
color:#c77dff;
 

}

.amda-content h2{

 
margin:0;

font-size:clamp(55px,7vw,95px);

line-height:.9;

font-weight:500;

color:#ffffff;
 

}

.amda-content h2 span{

 
color:#c77dff;
 

}

.amda-intro{

 
max-width:700px;

margin:35px 0 0;

font-size:20px;

line-height:1.7;

font-weight:300;

color:#ffffff;
 

}

.amda-text{

 
max-width:650px;

margin:20px 0 0;

font-size:16px;

line-height:1.8;

font-weight:300;

color:#999999;
 

}

.amda-buttons{

 
display:flex;

flex-wrap:wrap;

gap:20px;

margin-top:40px;
 

}

.amda-button{

 
display:inline-block;

padding:15px 25px;

font-size:13px;

font-weight:500;

letter-spacing:1.5px;

text-decoration:none;

transition:var(--transition);
 

}

.amda-button.primary{

 
background:#c77dff;

color:#000000;
 

}

.amda-button.primary:hover{

 
background:#ffffff;

color:#000000;

transform:translateY(-3px);

box-shadow:

    0 0 25px rgba(199,125,255,.45);
 

}

.amda-button.secondary{

 
border:1px solid rgba(199,125,255,.6);

color:#c77dff;
 

}

.amda-button.secondary:hover{

 
border-color:#c77dff;

color:#ffffff;

background:rgba(199,125,255,.08);

transform:translateY(-3px);

box-shadow:

    0 0 25px rgba(199,125,255,.25);
 

}

.amda-countdown{

 
position:relative;

z-index:2;

text-align:center;

padding:40px 25px;

border:1px solid rgba(199,125,255,.25);

border-radius:25px;

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

transition:var(--transition);
 

}

.amda-countdown:hover{

 
border-color:rgba(199,125,255,.7);

box-shadow:

    0 0 30px rgba(199,125,255,.2);
 

}

.countdown-label{

 
margin:0 0 30px;

font-size:12px;

letter-spacing:4px;

font-weight:500;

color:#c77dff;
 

}

.countdown{

 
display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;
 

}

.countdown-item{

 
display:flex;

flex-direction:column;

align-items:center;
 

}

.countdown-item span{

 
font-size:42px;

line-height:1;

font-weight:500;

color:#ffffff;
 

}

.countdown-item small{

 
margin-top:8px;

font-size:10px;

letter-spacing:2px;

color:#888888;
 

}

.countdown-date{

 
margin:30px 0 0;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

font-size:12px;

letter-spacing:3px;

color:#c77dff;
 

}

@media(max-width:1000px){

 
.amda-section{

    grid-template-columns:1fr;

    padding:70px 50px;

}


.amda-countdown{

    max-width:500px;

}
 

}

@media(max-width:700px){

 
.amda-section{

    margin:80px 25px;

    padding:55px 30px;

    border-radius:25px;

}


.amda-content h2{

    font-size:clamp(50px,15vw,75px);

}


.amda-intro{

    font-size:18px;

}


.amda-buttons{

    flex-direction:column;

    align-items:flex-start;

}


.countdown-item span{

    font-size:32px;

}
 

}

/*======================================================
REPRESENT ME
======================================================*/

.represent-section{

 
max-width:1400px;

margin:120px auto;

padding:100px 80px;

display:grid;

grid-template-columns:1fr 300px;

gap:80px;

align-items:center;

position:relative;

overflow:hidden;

background:#090909;

border:1px solid rgba(80,150,255,.2);

border-radius:30px;

box-sizing:border-box;

transition:var(--transition);
 

}

.represent-section::before{

 
content:"";

position:absolute;

width:600px;

height:600px;

right:-300px;

top:-300px;

background:

    radial-gradient(
        rgba(80,150,255,.22),
        transparent 70%
    );

border-radius:50%;

filter:blur(100px);

pointer-events:none;

transition:1s ease;
 

}

.represent-section:hover{

 
border-color:rgba(80,150,255,.7);

box-shadow:

    0 0 35px rgba(80,150,255,.18),

    0 0 100px rgba(80,150,255,.12);
 

}

.represent-section:hover::before{

 
background:

    radial-gradient(
        rgba(80,150,255,.45),
        transparent 70%
    );
 

}

.represent-content{

 
position:relative;

z-index:2;
 

}

.represent-content .section-label{

 
color:#6fa8ff;
 

}

.represent-content h2{

 
margin:0;

font-size:clamp(60px,8vw,105px);

line-height:.85;

font-weight:500;

color:#ffffff;
 

}

.represent-content h2 span{

 
color:#6fa8ff;
 

}

.represent-text{

 
max-width:650px;

margin:35px 0 0;

font-size:19px;

line-height:1.8;

font-weight:300;

color:#bdbdbd;
 

}

.represent-button{

 
display:inline-block;

margin-top:40px;

padding:16px 28px;

background:#6fa8ff;

color:#000000;

text-decoration:none;

font-size:13px;

font-weight:500;

letter-spacing:2px;

transition:var(--transition);
 

}

.represent-button:hover{

 
background:#ffffff;

transform:translateY(-4px);

box-shadow:

    0 0 30px rgba(80,150,255,.45);
 

}

.represent-side{

 
position:relative;

z-index:2;

text-align:right;
 

}

.represent-side p{

 
margin:12px 0;

font-size:13px;

font-weight:400;

letter-spacing:5px;

color:#777777;

transition:var(--transition);
 

}

.represent-section:hover .represent-side p{

 
color:#6fa8ff;
 

}

@media(max-width:900px){

 
.represent-section{

    grid-template-columns:1fr;

    padding:75px 50px;

}


.represent-side{

    text-align:left;

}
 

}

@media(max-width:700px){

 
.represent-section{

    margin:80px 25px;

    padding:55px 30px;

    border-radius:25px;

}


.represent-content h2{

    font-size:clamp(55px,15vw,80px);

}


.represent-text{

    font-size:17px;

}
 

}

/*======================================================
LATEST NEWS
======================================================*/

.latest-news{

 
max-width:1400px;

margin:120px auto;

padding:100px 80px;

position:relative;

overflow:hidden;

background:#090909;

border:1px solid rgba(80,150,255,.2);

border-radius:30px;

box-sizing:border-box;

transition:var(--transition);
 

}

.latest-news::before{

 
content:"";

position:absolute;

width:600px;

height:600px;

left:-300px;

top:-300px;

background:

    radial-gradient(
        rgba(80,150,255,.2),
        transparent 70%
    );

border-radius:50%;

filter:blur(100px);

pointer-events:none;

transition:1s ease;
 

}

.latest-news:hover{

 
border-color:rgba(80,150,255,.6);

box-shadow:

    0 0 35px rgba(80,150,255,.15),

    0 0 100px rgba(80,150,255,.1);
 

}

.latest-news:hover::before{

 
background:

    radial-gradient(
        rgba(80,150,255,.4),
        transparent 70%
    );
 

}

.latest-news-content{

 
max-width:850px;

position:relative;

z-index:2;
 

}

.latest-news-content .section-label{

 
color:#6fa8ff;
 

}

.latest-news-content h2{

 
margin:0;

font-size:clamp(60px,8vw,105px);

line-height:.85;

font-weight:500;

color:#ffffff;
 

}

.latest-news-content h2 span{

 
color:#6fa8ff;
 

}

.latest-news-text{

 
max-width:700px;

margin:35px 0 0;

font-size:19px;

line-height:1.8;

font-weight:300;

color:#bdbdbd;
 

}

.newsletter-form{

 
display:flex;

max-width:700px;

margin-top:40px;
 

}

.newsletter-form input{

 
flex:1;

min-width:0;

padding:18px 20px;

background:#111111;

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

border-right:none;

border-radius:0;

outline:none;

color:#ffffff;

font-family:inherit;

font-size:14px;

transition:var(--transition);
 

}

.newsletter-form input::placeholder{

 
color:#777777;
 

}

.newsletter-form input:focus{

 
border-color:#6fa8ff;

box-shadow:

    0 0 20px rgba(80,150,255,.12);
 

}

.newsletter-form button{

 
padding:18px 25px;

border:none;

background:#6fa8ff;

color:#000000;

font-family:inherit;

font-size:12px;

font-weight:500;

letter-spacing:2px;

cursor:pointer;

transition:var(--transition);
 

}

.newsletter-form button:hover{

 
background:#ffffff;

box-shadow:

    0 0 30px rgba(80,150,255,.4);
 

}

.newsletter-note{

 
margin-top:15px;

font-size:11px;

letter-spacing:1px;

color:#666666;
 

}

@media(max-width:700px){

 
.latest-news{

    margin:80px 25px;

    padding:55px 30px;

    border-radius:25px;

}


.latest-news-content h2{

    font-size:clamp(55px,15vw,80px);

}


.latest-news-text{

    font-size:17px;

}


.newsletter-form{

    flex-direction:column;

}


.newsletter-form input{

    border-right:1px solid rgba(255,255,255,.2);

    border-bottom:none;

}


.newsletter-form button{

    padding:17px;

}
 

}

/*======================================================
HOME CONTACT
======================================================*/

.home-contact{

 
max-width:1400px;

margin:120px auto 140px;

padding:100px 80px;

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

position:relative;

background:#090909;

border:1px solid rgba(80,150,255,.2);

border-radius:30px;

box-sizing:border-box;

transition:var(--transition);
 

}

.home-contact:hover{

 
border-color:rgba(80,150,255,.6);

box-shadow:

    0 0 35px rgba(80,150,255,.15),

    0 0 100px rgba(80,150,255,.08);
 

}

.home-contact-heading{

 
position:relative;

z-index:2;
 

}

.home-contact-heading .section-label{

 
color:#6fa8ff;
 

}

.home-contact-heading h2{

 
margin:0;

font-size:clamp(60px,8vw,105px);

line-height:.85;

font-weight:500;

color:#ffffff;
 

}

.home-contact-heading h2 span{

 
color:#6fa8ff;
 

}

.home-contact-heading > p:last-child{

 
max-width:550px;

margin-top:35px;

font-size:18px;

line-height:1.8;

font-weight:300;

color:#bdbdbd;
 

}

.home-contact-form{

 
position:relative;

z-index:2;
 

}

.contact-row{

 
display:grid;

grid-template-columns:1fr 1fr;

gap:15px;
 

}

.home-contact-form input,
.home-contact-form textarea{

 
width:100%;

padding:18px 20px;

margin-bottom:15px;

box-sizing:border-box;

background:#111111;

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

color:#ffffff;

font-family:inherit;

font-size:14px;

outline:none;

border-radius:0;

transition:var(--transition);
 

}

.home-contact-form input::placeholder,
.home-contact-form textarea::placeholder{

 
color:#777777;
 

}

.home-contact-form input:focus,
.home-contact-form textarea:focus{

 
border-color:#6fa8ff;

box-shadow:

    0 0 20px rgba(80,150,255,.12);
 

}

.home-contact-form textarea{

 
min-height:170px;

resize:vertical;
 

}

.contact-submit{

 
padding:17px 28px;

border:none;

background:#6fa8ff;

color:#000000;

font-family:inherit;

font-size:12px;

font-weight:500;

letter-spacing:2px;

cursor:pointer;

transition:var(--transition);
 

}

.contact-submit:hover{

 
background:#ffffff;

transform:translateY(-3px);

box-shadow:

    0 0 30px rgba(80,150,255,.4);
 

}

@media(max-width:900px){

 
.home-contact{

    grid-template-columns:1fr;

    gap:60px;

    padding:75px 50px;

}
 

}

@media(max-width:700px){

 
.home-contact{

    margin:80px 25px 100px;

    padding:55px 30px;

    border-radius:25px;

}


.home-contact-heading h2{

    font-size:clamp(55px,15vw,80px);

}


.home-contact-heading > p:last-child{

    font-size:17px;

}


.contact-row{

    grid-template-columns:1fr;

    gap:0;

}
 

}
/* ======================================================
   CINEMATIC INTRO — FALLING GLITTER
   ====================================================== */

.intro-glitter {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9998;

    opacity: 1;

    transition:
        opacity 1s ease;

}


/* INDIVIDUAL GLITTER PARTICLES */

.intro-glitter span {

    position: absolute;

    top: -20px;

    width: 2px;
    height: 2px;

    border-radius: 50%;

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

    box-shadow:
        0 0 5px rgba(255, 255, 255, .7),
        0 0 10px rgba(120, 170, 255, .35);

    opacity: 0;

    animation:
        glitterFall linear infinite;

}


/* DIFFERENT PARTICLE SIZES */

.intro-glitter span:nth-child(3n) {

    width: 1px;
    height: 1px;

}


.intro-glitter span:nth-child(4n) {

    width: 3px;
    height: 3px;

    box-shadow:
        0 0 7px rgba(255, 255, 255, .8),
        0 0 14px rgba(120, 170, 255, .45);

}


/* SLIGHTLY DIFFERENT SHAPES */

.intro-glitter span:nth-child(5n) {

    border-radius: 0;

    transform: rotate(45deg);

}


/* FALLING MOTION */

@keyframes glitterFall {

    0% {

        transform:
            translate3d(0, -30px, 0)
            rotate(0deg);

        opacity: 0;

    }

    10% {

        opacity: .65;

    }

    50% {

        opacity: .45;

        transform:
            translate3d(35px, 50vh, 0)
            rotate(180deg);

    }

    90% {

        opacity: .25;

    }

    100% {

        transform:
            translate3d(-25px, 110vh, 0)
            rotate(360deg);

        opacity: 0;

    }

}


/* ======================================================
   INTRO END
   ====================================================== */

.intro-glitter.fade-out {

    opacity: 0;

}