/* ==========================================================================
   PORTFOLIO
   Brendan Huston
   Version 1
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {

    font-family: "Archivo";

    src: url("../fonts/Archivo-VariableFont_wdth,wght.ttf")
         format("truetype-variations");

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;

}

/* ==========================================================================
   RESET
   ========================================================================== */

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

html{
    scroll-behavior:smooth;
    background:#0d0d0b;
}

body{

    background:#0d0d0b;
    color:#ffffff;

    font-family:"Archivo",sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    overflow-x:hidden;

}

img{
    display:block;
    width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

:root{

    /* Layout */

    --page-width:1920px;
    --content-width:1800px;
    --text-width:760px;

    /* Spacing */

    --space-1:1rem;
    --space-2:2rem;
    --space-3:4rem;
    --space-4:8rem;
    --space-5:12rem;

    /* Typography */

    --body-size:1.9rem;
    --body-line-height:1.8;

    /* Colours */

    --bg:#0d0d0b;
    --text:#ffffff;
    --text-soft:rgba(255,255,255,.82);
    --rule:rgba(255,255,255,.12);

    /* Motion */

    --transition:.25s ease;

}

/* ==========================================================================
   TEMPORARY – COMING SOON OVERLAY
   Remove when case study is complete.
   ========================================================================== */

.case-study--coming-soon{
    position:relative;
}

.case-study__coming-soon{

    position:absolute;
    inset:0;

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

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

    opacity:0;

    transition:opacity .3s ease;

    pointer-events:none;

    z-index:20;

}

.case-study__coming-soon span{

    color:#fff;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 600;

    font-size:2rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.case-study--coming-soon:hover .case-study__coming-soon{

    opacity:1;

}

/*  ================ END OF TEMPORARY SECTION ====================== */

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

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#050505;

}

.hero__background{

    display:block;

    width:100%;

    height:auto;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;

}

.hero__content{

    position:absolute;

    inset:0;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:4rem;

}

/* Hero intro animation */

.hero__title,
.hero__line{

    opacity:0;

    transform:translateY(10px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);

}

.hero__title.is-visible,
.hero__line.is-visible{

    opacity:1;

    transform:translateY(0);

}

.hero h1 {

    font-size: clamp(3.6rem, 8vw, 7rem);

    font-family: "Archivo", sans-serif;

    font-optical-sizing: auto;

    font-weight: 800;

    font-style: normal;

    font-variation-settings:
        "wdth" 62.5;

    text-transform: uppercase;

    letter-spacing: .01em;

    line-height: .9;

    color: #fff;

}

.hero__role{

    margin-top:1.8rem;

    font-size:1.8rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.22em;

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

    font-variation-settings:
        "wdth" 62.5;

}

.hero__strapline{

    margin-top:4rem;

    max-width:900px;

    font-size:clamp(1.8rem,1.6vw,2rem);

    font-weight:300;

    line-height:1.45;

    color:#fff;

    font-variation-settings:
        "wdth" 87.5;

}


/* ==========================================================================
   PROJECTS
   ========================================================================== */

main{

    width:100%;

}

.case-study{

    position:relative;

    display:block;

    width:100%;

    overflow:hidden;

    background:#050505;

}

.case-study .back{

    position:relative;

    z-index:1;

}

.case-study .text{

    position:absolute;

    inset:0;

    z-index:2;

    opacity:0;

    transform:translateY(10px);

    transition:
        opacity 2.8s cubic-bezier(.22,1,.36,1),
        transform 2.8s cubic-bezier(.22,1,.36,1);

}

.case-study.is-title-visible .text{

    opacity:1;

    transform:translateY(0);

}

.case-study .front{

    position:absolute;

    inset:0;

    z-index:3;

}

.case-study__caption{

    position:absolute;

    left:50%;

    bottom:10%;

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

    z-index:10;

    width:min(90%,700px);

    text-align:center;

    opacity:0;

    pointer-events:none;

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;

}

.case-study__intro{

    font-size:clamp(1.8rem,1.6vw,2.2rem);

    font-weight:300;

    line-height:1.4;

    color:#fff;

    margin:0;

    font-variation-settings:
        "wght" 300,
        "wdth" 87.5;

}

.case-study__client{

    margin-top:1rem;

    font-size:clamp(1.2rem,.9vw,1.4rem);

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#fff;

}

.case-study.is-caption-visible .case-study__caption{

    opacity:1;

    transform:translate(-50%,0);

}

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

.case-study--reveal .front{

    opacity:0;

    transform:translateY(12px);

    transition:
        opacity 4.8s cubic-bezier(.22,1,.36,1),
        transform 4.8s cubic-bezier(.22,1,.36,1);

}

.case-study--reveal.is-visible .front{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================================
   ACTIVATE
   ========================================================================== */

.case-study--activate .text{

    opacity:.08;

    transform:none;

}

.case-study--activate .front{

    opacity:1;

    transform:none;

    transition:none;

}

@keyframes activateFlicker{

    0%{
        opacity:.08;
    }

    12%{
        opacity:1;
    }

    22%{
        opacity:.08;
    }

    36%{
        opacity:1;
    }

    52%{
        opacity:.15;
    }

    68%{
        opacity:1;
    }

    100%{
        opacity:1;
    }

}

.case-study--activate.is-visible .text{

    animation:activateFlicker .65s ease forwards;

}

/* ==========================================================================
   ENABLE
   ========================================================================== */

.case-study--enable .text{

    opacity:0;

    transform:translateX(620px);

    transition:
        opacity 0.0s cubic-bezier(.22,1,.36,1),
        transform 2.8s cubic-bezier(.3,.6,.2,1)

}

.case-study--enable.is-visible .text{

    opacity:1;

    transform:translateY(0);

}

.case-study--enable .front{

    opacity:1;

    transform:none;

    transition:none;

}




/* ==========================================================================
   ELEVATE
   ========================================================================== */

.case-study--elevate .card,
.case-study--elevate .book,
.case-study--elevate .lid{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:3;

    opacity:0;

}

.case-study--elevate .elevate-text{

    position:absolute;
    inset:0;
    z-index:2;

    opacity:0;

    transition:opacity .7s ease;

}

.case-study--elevate.is-title-visible .elevate-text{

    opacity:1;

}

.case-study--elevate .lid{

    transition:
        transform 1.15s cubic-bezier(.16,1,.3,1),
        opacity .55s ease;

}

.case-study--elevate .book{

    transition:
        transform 1.20s cubic-bezier(.16,1,.3,1) .38s,
        opacity .65s ease .50s;

}

.case-study--elevate .card{

    transition:
        transform 1.4s cubic-bezier(.16,1,.3,1) .78s,
        opacity .75s ease .90s;

}


.case-study--elevate.is-visible .card{

    opacity:1;

    transform:translate(14.2%,-18.5%);

}

.case-study--elevate.is-visible .book{

    opacity:1;

    transform:translate(11.0%,24%);

}

.case-study--elevate.is-visible .lid{

    opacity:1;

    transform:translate(-12%,-26%);

}



/* ==========================================================================
   DEFINE
   ========================================================================== */

   .case-study--define .text{

    opacity:0;

    transform:scale(.88);

    filter:blur(6px);

    transition:
        opacity 2.2s ease,
        transform 2.2s ease,
        filter 2.2s ease;

}

.case-study--define.is-visible .text{

    opacity:1;

    transform:scale(1);

    filter:blur(0);

}

.case-study--define .front{

    opacity:1;

    transform:none;

    transition:none;

}


/* ==========================================================================
   ABOUT
   ========================================================================== */

/* Layout */

.about{

    width:min(1800px,92vw);

    margin:0 auto;

    padding:10rem 0 12rem;

    display:grid;

    grid-template-columns:minmax(0,6fr) minmax(340px,4fr);

    gap:clamp(4rem,6vw,8rem);

    align-items:center;

}

.about__copy{

    max-width:54rem;

}

/* Typography */

.about h2{

    font-size:clamp(2.4rem,3vw,3.4rem);

    line-height:.9;

    margin-bottom:3rem;

    font-variation-settings:
        "wght" 800,
        "wdth" 62.5;

    text-transform:none;

    color:#fff;

}

.about p{

    font-size:1.35rem;

    font-weight:350;

    line-height:1.5;

    margin-bottom:2rem;

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

    font-variation-settings:
        "wght" 350,
        "wdth" 85;

}

.about p:last-child{

    margin-bottom:0;

}

/* Portrait */

.about__portrait{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:3rem;

}

.about__portrait img{

    width:100%;

    max-width:420px;

    background:#000;

}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{

    width:min(1800px,92vw);

    margin:0 auto;

    padding:3rem 0 7rem;

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

    display:flex;

    align-items:center;

    gap:3rem;

}

footer a{

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

    text-decoration:none;

    font-size:clamp(1.15rem,0.75vw,1.35rem);

    font-weight:350;

    font-variation-settings:
        "wght" 550,
        "wdth" 85;

    transition:opacity .25s ease,color .25s ease;

    position:relative;

}

footer a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:100%;

    height:1px;

    background:#fff;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s ease;

}

footer a:hover{

    color:#fff;

    opacity:1;

}

footer a:hover::after{

    transform:scaleX(1);

}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

/* HERO */

.hero h1{

    font-size:clamp(3rem,7vw,5rem);

}

.hero__role{

    margin-top:1.4rem;

    font-size:1.4rem;

}

.hero__strapline{

    margin-top:3rem;

    max-width:640px;

    font-size:1.7rem;

}

/* CASE STUDIES */

.case-study__intro{

    font-size:1.5rem;

}

.case-study__client{

    font-size:1.0rem;

}

/* ABOUT */

.about h2{

    font-size:2.4rem;

}

.about p{

    font-size:1.1rem;

    line-height:1.6;

}

}

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

@media (max-width: 768px) {

   .hero__content{

    padding:2rem;

}

.hero h1{

    font-size:clamp(2.2rem,8vw,3rem);

}

.hero__role{

    margin-top:1rem;

    font-size:1rem;

    letter-spacing:.18em;

}

.hero__strapline{

    margin-top:2rem;

    max-width:320px;

    font-size:1.25rem;

    line-height:1.45;

}

/* CASE STUDIES */

.case-study__intro{

    display:none;

}

.case-study__client{

    font-size:1rem;

}



/* ABOUT */

.about{

    grid-template-columns:1fr;

    gap:3rem;

    padding:5rem 0;

}

.about__copy{

    max-width:none;

}

.about__portrait{

    order:-1;

    justify-content:center;

}

.about__portrait img{

    width:100%;

    max-width:320px;

}

/* FOOTER */

footer{

    flex-direction:column;

    gap:1rem;

}

}