/*======================================================
  OLIVER RIDLEY
  ANIMATIONS & TRANSITIONS
======================================================*/


/*======================================================
  NORMAL PAGE LOAD
======================================================*/

body{

    animation:pageFade .8s ease forwards;

}


@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*======================================================
  HOMEPAGE INTRO
======================================================*/

/*

    THEATRE OPENING

    0.0 - 0.6
    COMPLETE DARKNESS

    0.6 - 3.0
    FIRST LIGHT SEARCHES THE BACK WALL

    3.0
    FIRST LIGHT FINDS OLIVER

    3.0 - 4.0
    FIRST LIGHT HOLDS OLIVER

    2.4 - 4.7
    SECOND LIGHT SEARCHES

    4.7
    SECOND LIGHT FINDS RIDLEY

    4.7 - 5.4
    BOTH LIGHTS HOLD

    5.4
    NAME MOVES

    5.7
    SOFT IMAGE SPOTLIGHT BEGINS

    5.9
    PHOTO REVEALS

    6.9
    DETAILS REVEAL

    8.5
    INTRO COMPLETE

*/


body.home-intro-active{

    background:#000000;

    overflow:hidden;

    animation:none;

}


/*======================================================
  STOP NAVIGATION
======================================================*/

body.home-intro-active header{

    pointer-events:none;

}


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

body.home-intro-active main{

    overflow:hidden;

}


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

body.home-intro-active .hero{

    position:relative;

}


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

body.home-intro-active .hero-content{

    position:relative;

    z-index:20;

    transform:translateX(300px);

    transition:none;

}


/*======================================================
  SPOTLIGHT POOLS
======================================================*/

/*

    These are the two searching theatre lights.

    They are deliberately large and soft.

*/


body.home-intro-active .hero-content::before,
body.home-intro-active .hero-content::after{

    content:"";

    position:absolute;

    z-index:-1;

    pointer-events:none;

    width:520px;

    height:360px;

    border-radius:50%;

    background:

        radial-gradient(

            ellipse at center,

            rgba(255,255,255,.34) 0%,

            rgba(255,255,255,.24) 18%,

            rgba(255,255,255,.14) 36%,

            rgba(255,255,255,.065) 53%,

            rgba(255,255,255,.025) 67%,

            transparent 78%

        );

    filter:blur(12px);

    mix-blend-mode:screen;

    opacity:0;

}


/*======================================================
  FIRST LIGHT
======================================================*/

body.home-intro-active .hero-content::before{

    left:-470px;

    top:-210px;

    transform:

        translate3d(0,0,0)

        scale(.72)

        rotate(-8deg);

    animation:

        spotlightForOliver

        5.8s

        cubic-bezier(.22,.61,.36,1)

        .6s

        forwards;

}


/*======================================================
  SECOND LIGHT
======================================================*/

body.home-intro-active .hero-content::after{

    left:470px;

    top:260px;

    transform:

        translate3d(0,0,0)

        scale(.72)

        rotate(8deg);

    animation:

        spotlightForRidley

        5.8s

        cubic-bezier(.22,.61,.36,1)

        2.45s

        forwards;

}


/*======================================================
  FIRST LIGHT — SMOOTH SEARCH
======================================================*/

@keyframes spotlightForOliver{

    0%{

        opacity:0;

        left:-470px;

        top:-210px;

        transform:

            translate3d(0,0,0)

            scale(.72)

            rotate(-8deg);

    }


    7%{

        opacity:.25;

    }


    14%{

        opacity:.42;

        left:-400px;

        top:-145px;

        transform:

            translate3d(0,0,0)

            scale(.76)

            rotate(-2deg);

    }


    23%{

        opacity:.56;

        left:-315px;

        top:-55px;

        transform:

            translate3d(0,0,0)

            scale(.82)

            rotate(4deg);

    }


    32%{

        opacity:.64;

        left:-180px;

        top:95px;

        transform:

            translate3d(0,0,0)

            scale(.88)

            rotate(-5deg);

    }


    41%{

        opacity:.68;

        left:-10px;

        top:15px;

        transform:

            translate3d(0,0,0)

            scale(.91)

            rotate(3deg);

    }


    50%{

        opacity:.72;

        left:170px;

        top:-70px;

        transform:

            translate3d(0,0,0)

            scale(.88)

            rotate(7deg);

    }


    59%{

        opacity:.76;

        left:315px;

        top:135px;

        transform:

            translate3d(0,0,0)

            scale(.94)

            rotate(-4deg);

    }


    66%{

        opacity:.82;

        left:205px;

        top:105px;

        transform:

            translate3d(0,0,0)

            scale(.98)

            rotate(2deg);

    }


    71%{

        opacity:.90;

        left:70px;

        top:38px;

        transform:

            translate3d(0,0,0)

            scale(1.02)

            rotate(-1deg);

    }


    75%{

        opacity:.98;

        left:-5px;

        top:5px;

        transform:

            translate3d(0,0,0)

            scale(1.05)

            rotate(0deg);

    }


    84%{

        opacity:1;

        left:-5px;

        top:5px;

        transform:

            translate3d(0,0,0)

            scale(1.06)

            rotate(0deg);

    }


    92%{

        opacity:.98;

        left:-5px;

        top:5px;

        transform:

            translate3d(0,0,0)

            scale(1.06)

            rotate(0deg);

    }


    100%{

        opacity:0;

        left:40px;

        top:20px;

        transform:

            translate3d(0,0,0)

            scale(1.02)

            rotate(4deg);

    }

}


/*======================================================
  SECOND LIGHT — SMOOTH SEARCH
======================================================*/

@keyframes spotlightForRidley{

    0%{

        opacity:0;

        left:470px;

        top:260px;

        transform:

            translate3d(0,0,0)

            scale(.72)

            rotate(8deg);

    }


    7%{

        opacity:.25;

    }


    14%{

        opacity:.40;

        left:400px;

        top:195px;

        transform:

            translate3d(0,0,0)

            scale(.76)

            rotate(2deg);

    }


    23%{

        opacity:.54;

        left:315px;

        top:110px;

        transform:

            translate3d(0,0,0)

            scale(.82)

            rotate(-4deg);

    }


    32%{

        opacity:.62;

        left:175px;

        top:-45px;

        transform:

            translate3d(0,0,0)

            scale(.88)

            rotate(5deg);

    }


    41%{

        opacity:.67;

        left:0;

        top:30px;

        transform:

            translate3d(0,0,0)

            scale(.91)

            rotate(-3deg);

    }


    50%{

        opacity:.71;

        left:-175px;

        top:80px;

        transform:

            translate3d(0,0,0)

            scale(.88)

            rotate(-7deg);

    }


    59%{

        opacity:.76;

        left:-315px;

        top:-75px;

        transform:

            translate3d(0,0,0)

            scale(.94)

            rotate(4deg);

    }


    67%{

        opacity:.82;

        left:-205px;

        top:105px;

        transform:

            translate3d(0,0,0)

            scale(.98)

            rotate(-2deg);

    }


    73%{

        opacity:.91;

        left:-65px;

        top:105px;

        transform:

            translate3d(0,0,0)

            scale(1.02)

            rotate(1deg);

    }


    78%{

        opacity:.98;

        left:-5px;

        top:95px;

        transform:

            translate3d(0,0,0)

            scale(1.05)

            rotate(0deg);

    }


    87%{

        opacity:1;

        left:-5px;

        top:95px;

        transform:

            translate3d(0,0,0)

            scale(1.06)

            rotate(0deg);

    }


    94%{

        opacity:.98;

        left:-5px;

        top:95px;

        transform:

            translate3d(0,0,0)

            scale(1.06)

            rotate(0deg);

    }


    100%{

        opacity:0;

        left:-40px;

        top:115px;

        transform:

            translate3d(0,0,0)

            scale(1.02)

            rotate(-4deg);

    }

}


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

body.home-intro-active .hero-name-white,
body.home-intro-active .hero-name-grey{

    display:inline-block;

    visibility:hidden;

    opacity:0;

}


/*======================================================
  OLIVER REVEAL
======================================================*/

body.home-intro-active .hero-name-white{

    animation:

        revealOliver

        .9s

        cubic-bezier(.22,.61,.36,1)

        2.95s

        forwards;

}


@keyframes revealOliver{

    0%{

        visibility:hidden;

        opacity:0;

        filter:

            brightness(.3)

            drop-shadow(

                0 0 0 transparent

            );

    }


    20%{

        visibility:visible;

        opacity:.08;

    }


    45%{

        opacity:.40;

        filter:

            brightness(1.05)

            drop-shadow(

                0 0 10px

                rgba(255,255,255,.12)

            );

    }


    70%{

        opacity:.78;

        filter:

            brightness(1.18)

            drop-shadow(

                0 0 22px

                rgba(255,255,255,.25)

            );

    }


    100%{

        visibility:visible;

        opacity:1;

        filter:

            brightness(1)

            drop-shadow(

                0 0 8px

                rgba(255,255,255,.10)

            );

    }

}


/*======================================================
  RIDLEY REVEAL
======================================================*/

body.home-intro-active .hero-name-grey{

    animation:

        revealRidley

        .9s

        cubic-bezier(.22,.61,.36,1)

        4.35s

        forwards;

}


@keyframes revealRidley{

    0%{

        visibility:hidden;

        opacity:0;

        filter:

            brightness(.3)

            drop-shadow(

                0 0 0 transparent

            );

    }


    20%{

        visibility:visible;

        opacity:.08;

    }


    45%{

        opacity:.40;

        filter:

            brightness(1.05)

            drop-shadow(

                0 0 10px

                rgba(255,255,255,.12)

            );

    }


    70%{

        opacity:.78;

        filter:

            brightness(1.18)

            drop-shadow(

                0 0 22px

                rgba(255,255,255,.25)

            );

    }


    100%{

        visibility:visible;

        opacity:1;

        filter:

            brightness(1)

            drop-shadow(

                0 0 8px

                rgba(255,255,255,.10)

            );

    }

}


/*======================================================
  NAME MOVEMENT — SMOOTH GLIDE
======================================================*/

body.home-intro-active .hero-content{

    animation:

        heroNameMove

        1.7s

        cubic-bezier(.25,.1,.25,1)

        5.4s

        forwards;

}


@keyframes heroNameMove{

    from{

        transform:translate3d(300px,0,0);

    }


    to{

        transform:translate3d(0,0,0);

    }

}

/*======================================================
  HERO IMAGE — SOFT THEATRE GLOW
======================================================*/

body.home-intro-active .hero-image{

    position:relative;

    opacity:0;

    transform:scale(1);

    overflow:visible;

    animation:

        heroImageReveal

        1.5s

        cubic-bezier(.22,.61,.36,1)

        5.75s

        forwards;

}


/*======================================================
  SOFT IMAGE SPOTLIGHT
======================================================*/

body.home-intro-active .hero-image::before{

    content:"";

    position:absolute;

    z-index:50;

    pointer-events:none;

    width:1200px;

    height:1200px;

    left:50%;

    top:50%;

    transform:

        translate3d(-50%,-50%,0)

        scale(.35);

    border-radius:50%;

    background:

        radial-gradient(

            ellipse at center,

            rgba(255,255,255,.28) 0%,

            rgba(255,255,255,.20) 14%,

            rgba(255,255,255,.12) 28%,

            rgba(255,255,255,.065) 43%,

            rgba(255,255,255,.025) 58%,

            rgba(255,255,255,.008) 70%,

            transparent 84%

        );

    filter:blur(30px);

    mix-blend-mode:screen;

    opacity:0;

    animation:

        heroImageSpotlight

        2s

        cubic-bezier(.22,.61,.36,1)

        5.7s

        forwards;

}


/*======================================================
  GRADUAL IMAGE SPOTLIGHT
======================================================*/

@keyframes heroImageSpotlight{

    0%{

        opacity:0;

        transform:

            translate3d(-50%,-50%,0)

            scale(.35);

    }


    15%{

        opacity:.035;

        transform:

            translate3d(-50%,-50%,0)

            scale(.43);

    }


    30%{

        opacity:.075;

        transform:

            translate3d(-50%,-50%,0)

            scale(.54);

    }


    45%{

        opacity:.13;

        transform:

            translate3d(-50%,-50%,0)

            scale(.68);

    }


    60%{

        opacity:.19;

        transform:

            translate3d(-50%,-50%,0)

            scale(.83);

    }


    75%{

        opacity:.25;

        transform:

            translate3d(-50%,-50%,0)

            scale(.98);

    }


    88%{

        opacity:.21;

        transform:

            translate3d(-50%,-50%,0)

            scale(1.08);

    }


    100%{

        opacity:0;

        transform:

            translate3d(-50%,-50%,0)

            scale(1.18);

    }

}


/*======================================================
  IMAGE — GRADUAL ILLUMINATION
======================================================*/

@keyframes heroImageReveal{

    0%{

        opacity:0;

        filter:

            brightness(.45)

            blur(4px);

    }


    15%{

        opacity:.025;

        filter:

            brightness(.48)

            blur(3.8px);

    }


    30%{

        opacity:.08;

        filter:

            brightness(.53)

            blur(3.2px);

    }


    45%{

        opacity:.18;

        filter:

            brightness(.60)

            blur(2.5px);

    }


    60%{

        opacity:.36;

        filter:

            brightness(.70)

            blur(1.8px);

    }


    75%{

        opacity:.58;

        filter:

            brightness(.80)

            blur(1px);

    }


    88%{

        opacity:.80;

        filter:

            brightness(.91)

            blur(.4px);

    }


    100%{

        opacity:1;

        filter:

            brightness(1)

            blur(0);

    }

}


/*======================================================
  SUPPORTING CONTENT
======================================================*/

body.home-intro-active .hero-label,
body.home-intro-active .hero-line,
body.home-intro-active .hero-tagline{

    opacity:0;

}


body.home-intro-active .hero-label,
body.home-intro-active .hero-line,
body.home-intro-active .hero-tagline{

    animation:

        heroDetailsReveal

        1.1s

        cubic-bezier(.22,.61,.36,1)

        6.9s

        forwards;

}


@keyframes heroDetailsReveal{

    from{

        opacity:0;

        transform:translate3d(0,18px,0);

    }


    55%{

        opacity:.55;

        transform:translate3d(0,7px,0);

    }


    to{

        opacity:1;

        transform:translate3d(0,0,0);

    }

}


/*======================================================
  HEADER
======================================================*/

body.home-intro-active header{

    opacity:0;

    transform:translate3d(0,-18px,0);

    animation:

        headerReveal

        1.1s

        cubic-bezier(.22,.61,.36,1)

        6.9s

        forwards;

}


@keyframes headerReveal{

    from{

        opacity:0;

        transform:translate3d(0,-18px,0);

    }


    55%{

        opacity:.55;

        transform:translate3d(0,-7px,0);

    }


    to{

        opacity:1;

        transform:translate3d(0,0,0);

    }

}


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

body.home-intro-active .hero::before{

    opacity:0;

}


.hero::before{

    transition:

        opacity

        1.2s

        ease;

}


body.home-intro-complete .hero::before{

    opacity:1;

}


/*======================================================
  INTRO COMPLETE
======================================================*/

body.home-intro-complete{

    overflow-x:hidden;

    overflow-y:auto;

}


/*======================================================
  RESTORE NAVIGATION
======================================================*/

body.home-intro-complete header{

    pointer-events:auto;

}


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

body.home-intro-complete .hero-content{

    transform:none;

}


/*======================================================
  SCROLL REVEAL
======================================================*/

.hidden{

    opacity:0;

    transform:translate3d(0,40px,0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}


.show{

    opacity:1;

    transform:translate3d(0,0,0);

}


/*======================================================
  FLOATING GLOW
======================================================*/

.glow{

    animation:

        floatingGlow

        8s

        ease-in-out

        infinite;

}


@keyframes floatingGlow{

    0%{

        transform:translate3d(0,0,0);

    }


    50%{

        transform:translate3d(0,30px,0);

    }


    100%{

        transform:translate3d(0,0,0);

    }

}


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

img{

    transition:

        transform .5s ease,

        filter .5s ease;

}


img:hover{

    filter:

        brightness(1.05);

}


/*======================================================
  CARD HOVER POLISH
======================================================*/

.portfolio-card,
.video-card,
.contact-card,
.support-card,
.support-box,
.info-card,
.explore-card,
.social-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}


/*======================================================
  BUTTON ANIMATION
======================================================*/

.button,
.support-button,
.contact-form button,
.download-btn{

    position:relative;

    overflow:hidden;

}


.button::before,
.support-button::before,
.contact-form button::before,
.download-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

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

            transparent

        );

    transition:.5s;

}


.button:hover::before,
.support-button:hover::before,
.contact-form button:hover::before,
.download-btn:hover::before{

    left:100%;

}


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

.reveal-text{

    animation:

        revealText

        1s

        ease

        forwards;

}


@keyframes revealText{

    from{

        opacity:0;

        transform:translate3d(0,25px,0);

    }


    to{

        opacity:1;

        transform:translate3d(0,0,0);

    }

}


/*======================================================
  HERO / PAGE IMAGES
======================================================*/

.hero-right img,
.about-photo img,
.contact-hero img,
.support-image img{

    transition:

        transform .5s ease,

        filter .5s ease;

}


/*======================================================
  LINK UNDERLINE EFFECT
======================================================*/

nav a,
.footer-right a{

    position:relative;

}


nav a::after,
.footer-right a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--blue);

    transition:.3s;

}


nav a:hover::after,
.footer-right a:hover::after{

    width:100%;

}


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

@media(max-width:1100px){

    body.home-intro-active .hero-content{

        transform:none;

        animation:

            heroNameMoveMobile

            1.7s

            cubic-bezier(.22,.61,.36,1)

            5.4s

            forwards;

    }


    @keyframes heroNameMoveMobile{

        from{

            transform:translate3d(0,0,0);

        }


        to{

            transform:translate3d(0,0,0);

        }

    }


    body.home-intro-active .hero-content::before,
    body.home-intro-active .hero-content::after{

        width:430px;

        height:300px;

    }

}


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

@media(max-width:700px){

    body.home-intro-active .hero-content::before,
    body.home-intro-active .hero-content::after{

        width:380px;

        height:270px;

        filter:blur(10px);

    }


    body.home-intro-active .hero-content{

        transform:none;

    }


    body.home-intro-active .hero h1{

        white-space:nowrap;

    }


    body.home-intro-active .hero-image::before{

        width:900px;

        height:900px;

        filter:blur(24px);

    }

}


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

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

    *,
    *::before,
    *::after{

        animation:none!important;

        transition:none!important;

    }


    body.home-intro-active{

        background:#000;

        overflow:auto;

    }


    body.home-intro-active .hero-content::before,
    body.home-intro-active .hero-content::after,
    body.home-intro-active .hero-image::before{

        display:none;

    }


    body.home-intro-active .hero-content{

        transform:none;

    }


    body.home-intro-active .hero-name-white,
    body.home-intro-active .hero-name-grey,
    body.home-intro-active .hero-image,
    body.home-intro-active .hero-label,
    body.home-intro-active .hero-line,
    body.home-intro-active .hero-tagline,
    body.home-intro-active header{

        opacity:1;

        visibility:visible;

    }

}