/*
Theme Name: Studio Rude Box
Author: Studio Rude Box
Author URI: https://studiorudebox.nl
Description: Homepage styling
Version: 1.0.0
Text Domain: studiorudebox
*/

/*########################################################################
    HERO
########################################################################*/

section.hero-section {
    overflow: hidden;
    height: 100dvh;
}

section.hero-section .background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

section.hero-section .background-shapes svg {
    width: 100%;
    height: 100%;
}

section.hero-section .background-shapes .bg-shape { 
    transform-origin: center center;
    transform-box: fill-box;
}

section.hero-section .background-shapes .bg-shape.spin-counter { animation: spinCounter 30s linear infinite; animation-play-state: running; }
section.hero-section .background-shapes .bg-shape.spin-clock { animation: spinClockwise 30s linear infinite; animation-play-state: running; }

section.hero-section .background-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100%;
    min-height: 50%;
    /* glass morphism */
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(100%);
    animation: slideInBottom 1s cubic-bezier(0.77, 0.2, 0.05, 1.0) 250ms forwards;
}

section.hero-section .content-wrapper {
    row-gap: 2rem;
    min-height: 50rem;
    height: 100svh;
    padding-left: 2.5em;
    padding-right: 2.5em;
}

section.hero-section h1 {
    margin: 0;
    color: var(--color-neutral-0);
}

section.hero-section .company-info,
section.hero-section .logo-wordmark  {
    max-width: 100%;
    height: auto;
}

section.hero-section .hero-tagline {
    margin-top: 1.5rem;
    font-size: var(--font-size-lg);
    color: var(--color-brand-100);
    text-wrap: balance;
    line-height: 1.25;
}

section.hero-section .company-info .mask { overflow: hidden; }

section.hero-section .logo-wordmark {
    transform: translateY(100%);
    animation: slideInBottom 300ms ease-out 100ms forwards;
}

section.hero-section .button.primary {
    background-image: var(--color-bg-hero-cta);
}

section.hero-section .home-logo {
    transform: translate(-500%, 500%);
    width: 100%;
    height: auto;
    animation: flyInBottomLeft 750ms cubic-bezier(0.77, 0.2, 0.05, 1.0) 150ms forwards;
}


/* svg graphic bases colors */
section.hero-section .home-logo .icon {fill:var(--color-text-heading);}
section.hero-section .home-logo .background {fill:var(--color-bg);}
section.hero-section .home-logo .flame-1 {fill:var(--color-flame-1); transition: fill 500ms ease-in-out;}
section.hero-section .home-logo .flame-2 {fill:var(--color-flame-2); transition: fill 400ms ease-in-out;}
section.hero-section .home-logo .flame-3 {fill:var(--color-flame-3); transition: fill 300ms ease-in-out;}
section.hero-section .home-logo .flame-4 {fill:var(--color-flame-4); transition: fill 200ms ease-in-out;}
section.hero-section .home-logo .flame-5 {fill:var(--color-flame-5); transition: fill 100ms ease-in-out;}

/* recolor flame on hover */
section.hero-section .home-logo .flames:hover .flame-1 {fill:var(--color-flame-1-hover);}
section.hero-section .home-logo .flames:hover .flame-2 {fill:var(--color-flame-2-hover);}
section.hero-section .home-logo .flames:hover .flame-3 {fill:var(--color-flame-3-hover);}
section.hero-section .home-logo .flames:hover .flame-4 {fill:var(--color-flame-4-hover);}
section.hero-section .home-logo .flames:hover .flame-5 {fill:var(--color-flame-5-hover);}

section.hero-section .home-logo .flames:hover {
    cursor: crosshair;
}

section.hero-section .company-logo-symbol {
    animation: hovering 8s ease-in-out 1s infinite;    
}

@media (min-width: 40em) { /* 640px - tablets */
        
    section.hero-section .background-layer {
        min-width: 61.8%;
        min-height: 100%;
        border-radius: 0 25em 0 0;
    }
}

@media (min-width: 48em) { /* md: 768 px */

    section.hero-section .company-info {
        max-width: 50%;
        margin-top: 0;
    }

    section.hero-section .logo-wordmark {
        display: block;
        max-width: 19rem;
    }

    section.hero-section .home-logo {
        height: 25rem;
        display: block
    }
}

@media (min-width: 64em) { /* 1024px - desktop */    

    body.scrolled section.hero-section {
        margin: 0 2em;
        border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
    }
    
    section.hero-section .logo-wordmark {
        max-width: 23rem;
    }

    section.hero-section .home-logo {
        height: 30rem;
    }
}

@media (min-width: 80em) { /* 1280px */   

    section.hero-section .logo-wordmark {
        max-width: 27.5rem;
    }

    section.hero-section .home-logo {
        height: 36rem;
    }   
}

/*########################################################################
    TAGLINE
########################################################################*/

section.tagline-section {
    min-height: 100svh;
}

section.tagline-section h2 {
    font-family: var(--font-family-quote);
    font-size: var(--font-size-4xl);
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    height: 5em;
    padding-bottom: 0;
    margin-bottom: 0;
}

section.tagline-section h2 span.accent {
    background: var(--color-neutral-900);
    color: var(--color-text-ondark);
    padding: 0 0.4em;
    border-radius: var(--border-radius-lg);
}

section.tagline-section h2 span.service {
    font-weight: var(--font-weight-heading-dark);
    position: relative;
    background: var(--color-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.tagline-section h2.typing span.service::after {
    position: absolute;
    content: '';
    right: -0.1em;
    bottom: 10%;
    width: 2px;
    height: 80%;
    background: var(--color-text-heading);
    animation: cursorBlink 1s step-end infinite;
}

section.tagline-section h2 span.word {
    display: inline-block;
}

@media (min-width: 48em) {

    section.tagline-section h2 {
        height: 3em;
    }
}

/*########################################################################
    ABOUT
########################################################################*/

section.about-section > .content-wrapper {
    gap: 6em 4em;
}

section.about-section .image-container {
    --picture-shadow: 1.15px 1.35px 2.65px rgba(35, 35, 35, 0.073),
                      3.9px 4.45px 8.95px rgba(35, 35, 35, 0.107),
                      17.5px 20px 40px rgba(35, 35, 35, 0.18);
    position: relative;
}

section.about-section .profile-img-frame {
    grid-row: 1;
    grid-column: 1;
}

section.about-section .profile-img-frame img {
    width: 90%;
    height: auto;
    border: 1em solid var(--color-bg);
    box-shadow: var(--picture-shadow);
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

section.about-section .focus-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    border: 0;
    background: transparent;
    cursor: pointer;
}

section.about-section h2 {color: inherit;}

section.about-section .first-paragraph {
    font-style: italic;
}

@media (min-width: 48em) {/* md: 768 px */

    section.about-section .image-container {
        --picture-shadow: 2.3px 2.7px 5.3px rgba(35, 35, 35, 0.073),
                          7.8px 8.9px 17.9px rgba(35, 35, 35, 0.107),
                          35px 40px 80px rgba(35, 35, 35, 0.18);
    }
}

/*########################################################################
    SERVICES
########################################################################*/

section.services-section .service-items {
    grid-template-columns: 1fr;
    gap: 1rem;
}

section.services-section .service-item {
    position: relative;
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-btn);
    overflow: hidden;
}

section.services-section .service-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-dark);
    background-image: url('../img/bg-blur-blob.svg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 400ms ease-out;
}

section.services-section .service-item:hover,
section.services-section .service-item:focus-visible {
    color: var(--color-text-ondark);
}

section.services-section .service-item:hover::before,
section.services-section .service-item:focus-visible::before {
    opacity: 1;
}

section.services-section .service-item:hover h3,
section.services-section .service-item:hover .description,
section.services-section .service-item:focus-visible h3,
section.services-section .service-item:focus-visible .description {
    color: var(--color-text-ondark);
}

section.services-section .service-item a {
    position: relative;
    text-decoration: none;
    font-weight: inherit;
}

section.services-section .service-item .description {
    color: var(--color-text-body);
}

section.services-section .service-item .readmore {
    font-weight: var(--font-weight-body-bold);
    margin-top: 1em;
}

section.services-section .service-item .service-header {
    padding: 2em 2em 1em 2em;
}

section.services-section .service-item .service-body {
    padding: 1em 2em 2em 2em;
}

section.services-section .service-item .service-icon svg {
    width: 3rem;
    height: auto;
}

section.services-section .service-item h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heading-light);
    margin-bottom: 0.75rem;
}

@media (min-width: 48em) { /* md: 768 px */
    
    section.services-section .service-items {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 64em) { /* 1024px - desktop */    

    section.services-section .service-item .service-icon svg {
        width: 4rem;
        height: auto;
    }
}

/*########################################################################
    FEATURED PORTFOLIO
########################################################################*/

section.featured-section .featured-wrapper {
    gap: 2em;
}

section.featured-section .portfolio-item .portfolio-img {
    height: 16em;
}

/*########################################################################
    DIVIDER
########################################################################*/

section.divider-section { 
    height: 10em;
    gap: 2em;
}
section.divider-section .divider-dot {
    width: 0.4em;
    height: 0.4em;
    border-radius: 1em;
    background: var(--color-text-body);
}

/*########################################################################
    CONTACT
########################################################################*/

section.contact-section::before {
    content: '';
    position: absolute;
    min-width: 100%;
    height: 35%;
    left: 0;
    bottom: 0;
    background: url(../img/bg-waves.svg) no-repeat;
    background-size: cover;
}

section.contact-section textarea {
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.08) !important;
}