/*
 * ============================================================
 * AUDIODIMENSION
 * Main custom stylesheet
 * Child theme: tt25-audio
 * ============================================================
 */


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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
}

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

img {
    max-width: 100%;
    height: auto;
}


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

.ad-site-header {
    position: relative;
    z-index: 1000;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #0c0914 !important;
    color: #ffffff !important;

    overflow: visible;
}


/* ------------------------------------------------------------
   HEADER INNER
   ------------------------------------------------------------ */

.ad-header-inner {
    width: min(1320px, calc(100% - 60px));
    max-width: none !important;

    min-height: 92px;

    margin: 0 auto !important;
    padding: 16px 0 !important;

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

    gap: 40px;

    overflow: visible;
}


/* ------------------------------------------------------------
   HEADER LOGO
   ------------------------------------------------------------ */

.ad-header-logo {
    position: relative;

    flex: 0 0 auto;

    width: 220px;

    overflow: visible;
}

.ad-header-logo a {
    display: block;

    width: 100%;

    line-height: 0;

    overflow: visible;
}

.ad-header-logo img {
    display: block;

    width: 220px;
    max-width: none !important;

    height: auto !important;

    margin: 0;

    object-fit: contain;

    overflow: visible;
}


/* ------------------------------------------------------------
   HEADER RIGHT
   ------------------------------------------------------------ */

.ad-header-right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;

    margin: 0 !important;
}


/* ------------------------------------------------------------
   MAIN NAVIGATION
   ------------------------------------------------------------ */

.ad-main-navigation {
    margin: 0 !important;
}

.ad-main-navigation .wp-block-navigation__container {
    display: flex;
    align-items: center;

    gap: 30px;
}

.ad-main-navigation .wp-block-navigation-item {
    margin: 0 !important;
}

.ad-main-navigation a {
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;

    text-decoration: none;

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

.ad-main-navigation a:hover {
    color: #f2762b !important;
}

.ad-main-navigation .current-menu-item > a,
.ad-main-navigation .current-menu-ancestor > a,
.ad-main-navigation .current_page_item > a {
    color: #f2762b !important;
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

.ad-header-search {
    flex: 0 0 auto;

    width: auto !important;

    margin: 0 !important;
}

.ad-header-search .wp-block-search__inside-wrapper {
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

.ad-header-search .wp-block-search__button {
    width: 40px;
    height: 40px;

    margin: 0 !important;
    padding: 0 !important;

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

    border: 0 !important;
    border-radius: 50%;

    background: transparent !important;
    color: #ffffff !important;

    cursor: pointer;

    transition:
        color .25s ease,
        background-color .25s ease;
}

.ad-header-search .wp-block-search__button:hover {
    color: #f2762b !important;

    background: rgba(255,255,255,.06) !important;
}

.ad-header-search .wp-block-search__button svg {
    width: 21px;
    height: 21px;

    fill: currentColor;
}


/* ============================================================
   MAIN PAGE CONTENT
   ============================================================ */

.ad-main {
    width: 100%;

    margin: 0;

    padding: 80px 32px;

    background: #ffffff;
}

.ad-main > * {
    width: 100%;
    max-width: 1280px;

    margin-left: auto;
    margin-right: auto;
}


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

.ad-site-footer {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 100px 32px 45px;

    background: #0c0914 !important;
    color: #ffffff !important;

    overflow: hidden;
}


/* ------------------------------------------------------------
   FOOTER SOUND SYSTEM
   ------------------------------------------------------------ */

.ad-footer-sound {
    position: relative;

    width: min(1500px, 100%);

    margin: 0 auto 55px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px
        minmax(0, 1fr);

    align-items: center;
}


/* ------------------------------------------------------------
   FOOTER WAVES
   ------------------------------------------------------------ */

.ad-footer-wave {
    position: relative;

    height: 120px;

    overflow: visible;
}

.ad-wave-track {
    position: absolute;

    top: 50%;

    width: 900px;

    display: flex;
    align-items: center;

    transform: translateY(-50%);

    will-change:
        transform,
        opacity;
}

.ad-wave-track img {
    display: block;

    width: 450px;
    max-width: none;

    height: auto;

    flex: 0 0 450px;

    opacity: .55;
}

.ad-wave-track img:nth-child(2) {
    opacity: .30;
}


/* LEFT WAVE */

.ad-footer-wave-left {
    overflow: visible;
}

.ad-wave-track-left {
    right: -80px;

    animation:
        ad-wave-left
        6.5s
        ease-in-out
        infinite
        alternate;
}


/* RIGHT WAVE */

.ad-footer-wave-right {
    overflow: visible;
}

.ad-wave-track-right {
    left: -80px;

    animation:
        ad-wave-right
        6.5s
        ease-in-out
        infinite
        alternate;
}


/* ------------------------------------------------------------
   FOOTER LOGO
   ------------------------------------------------------------ */

.ad-footer-logo {
    position: relative;

    z-index: 5;

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

    overflow: visible;
}

.ad-footer-logo a {
    display: block;

    line-height: 0;
}

.ad-footer-logo img {
    display: block;

    width: 165px;
    max-width: 165px;

    height: auto;
}


/* ------------------------------------------------------------
   FOOTER INNER
   ------------------------------------------------------------ */

.ad-footer-inner {
    position: relative;

    z-index: 10;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;
}


/* ------------------------------------------------------------
   FOOTER NAVIGATION
   ------------------------------------------------------------ */

.ad-footer-navigation {
    width: 100% !important;

    margin: 0 auto !important;
}

.ad-footer-navigation .wp-block-navigation__container {
    width: 100% !important;

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

    flex-wrap: wrap;

    gap: 32px;
}

.ad-footer-navigation .wp-block-navigation-item {
    margin: 0 !important;
}

.ad-footer-navigation a {
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 400;

    text-decoration: none;

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

.ad-footer-navigation a:hover {
    color: #f2762b !important;
}


/* ------------------------------------------------------------
   FOOTER SOCIAL
   ------------------------------------------------------------ */

.ad-footer-social {
    width: 100%;

    margin-top: 34px;

    text-align: center;
}

.ad-footer-social a {
    display: inline-flex;

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

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.ad-footer-social a:hover {
    opacity: .7;

    transform: translateY(-2px);
}

.ad-footer-social img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* ------------------------------------------------------------
   COPYRIGHT
   ------------------------------------------------------------ */

.ad-footer-copyright {
    width: 100% !important;
    max-width: none !important;

    margin:
        42px
        auto
        0 !important;

    padding: 0 !important;

    color: rgba(255,255,255,.55) !important;

    font-size: 11px;
    line-height: 1.5;

    text-align: center !important;
}


/* ============================================================
   DARK LINKS
   ============================================================ */

.ad-site-header a,
.ad-site-footer a {
    color: #ffffff;
}

.ad-site-header a:hover,
.ad-site-footer a:hover {
    color: #f2762b;
}


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

@keyframes ad-wave-left {

    0% {
        transform:
            translateY(-50%)
            translateX(70px)
            scaleX(.90);

        opacity: .35;
    }

    35% {
        transform:
            translateY(-50%)
            translateX(-20px)
            scaleX(1);

        opacity: .75;
    }

    70% {
        transform:
            translateY(-50%)
            translateX(-110px)
            scaleX(1.05);

        opacity: .60;
    }

    100% {
        transform:
            translateY(-50%)
            translateX(-170px)
            scaleX(1.10);

        opacity: .40;
    }

}


@keyframes ad-wave-right {

    0% {
        transform:
            translateY(-50%)
            translateX(-70px)
            scaleX(.90);

        opacity: .35;
    }

    35% {
        transform:
            translateY(-50%)
            translateX(20px)
            scaleX(1);

        opacity: .75;
    }

    70% {
        transform:
            translateY(-50%)
            translateX(110px)
            scaleX(1.05);

        opacity: .60;
    }

    100% {
        transform:
            translateY(-50%)
            translateX(170px)
            scaleX(1.10);

        opacity: .40;
    }

}


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

@media (max-width: 1000px) {

    .ad-header-inner {
        width: calc(100% - 48px);

        gap: 28px;
    }

    .ad-header-logo {
        width: 200px;
    }

    .ad-header-logo img {
        width: 200px;
    }

    .ad-header-right {
        gap: 16px;
    }

    .ad-main-navigation .wp-block-navigation__container {
        gap: 20px;
    }

    .ad-main {
        padding:
            70px
            25px;
    }

    .ad-site-footer {
        padding-top: 80px;
    }

    .ad-footer-sound {
        grid-template-columns:
            minmax(0,1fr)
            150px
            minmax(0,1fr);
    }

    .ad-footer-logo img {
        width: 135px;
        max-width: 135px;
    }

    .ad-wave-track {
        width: 700px;
    }

    .ad-wave-track img {
        width: 350px;

        flex-basis: 350px;
    }

}


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

@media (max-width: 700px) {

    .ad-header-inner {
        width: calc(100% - 36px);

        min-height: 76px;

        padding: 12px 0 !important;

        gap: 14px;
    }

    .ad-header-logo {
        width: 170px;
    }

    .ad-header-logo img {
        width: 170px;
    }

    .ad-header-right {
        gap: 8px;
    }

    .ad-main-navigation
    .wp-block-navigation__responsive-container-open {
        display: flex;

        color: #ffffff !important;
    }

    .ad-main-navigation
    .wp-block-navigation__responsive-container.is-menu-open {
        background: #0c0914 !important;
        color: #ffffff !important;
    }

    .ad-main-navigation
    .wp-block-navigation__responsive-container-close {
        color: #ffffff !important;
    }

    .ad-header-search .wp-block-search__button {
        width: 38px;
        height: 38px;
    }

    .ad-main {
        padding:
            55px
            20px;
    }

    .ad-site-footer {
        padding:
            70px
            20px
            35px;
    }

    .ad-footer-sound {
        grid-template-columns:
            minmax(0,1fr)
            105px
            minmax(0,1fr);

        margin-bottom: 45px;
    }

    .ad-footer-wave {
        height: 85px;
    }

    .ad-footer-logo img {
        width: 95px;
        max-width: 95px;
    }

    .ad-wave-track {
        width: 520px;
    }

    .ad-wave-track img {
        width: 260px;

        flex-basis: 260px;
    }

    .ad-footer-navigation .wp-block-navigation__container {
        gap: 16px 22px;
    }

    .ad-footer-navigation a {
        font-size: 12px;
    }

}
/* ============================================================
   HOME
   ============================================================ */

.ad-home {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ad-home > * {
    margin-block-start: 0;
    margin-block-end: 0;
}


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

.ad-home-hero {
    position: relative;

    width: 100%;
    min-height: 720px;

    margin: 0 !important;
    padding: 0;

    background: #0c0914;
    color: #ffffff;

    overflow: hidden;

    isolation: isolate;
}


/* ------------------------------------------------------------
   HERO INNER
   ------------------------------------------------------------ */

.ad-home-hero-inner {
    position: relative;

    z-index: 10;

    width: min(1380px, calc(100% - 80px));
    min-height: 720px;

    margin: 0 auto !important;
    padding:
        75px
        0
        145px;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(450px, 1.08fr);

    align-items: center;

    gap: clamp(30px, 5vw, 90px);
}


/* ------------------------------------------------------------
   HERO COPY
   ------------------------------------------------------------ */

.ad-home-hero-copy {
    position: relative;

    z-index: 20;

    max-width: 650px;

    margin: 0 !important;
}


/* eyebrow */

.ad-eyebrow {
    margin:
        0
        0
        25px !important;

    color: #f2762b;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .19em;

    text-transform: uppercase;
}


/* main title */

.ad-home-hero-title {
    margin:
        0
        0
        30px !important;

    color: #ffffff !important;

    font-size:
        clamp(
            62px,
            7vw,
            112px
        );

    font-weight: 400;

    line-height: .91;

    letter-spacing: -.055em;
}


/* subtitle */

.ad-home-hero-subtitle {
    max-width: 540px;

    margin:
        0
        0
        38px !important;

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

    font-size:
        clamp(
            18px,
            1.6vw,
            24px
        );

    font-weight: 300;

    line-height: 1.45;
}


/* ------------------------------------------------------------
   BUTTON
   ------------------------------------------------------------ */

.ad-hero-buttons {
    margin: 0 !important;
}

.ad-button-primary
.wp-block-button__link {

    padding:
        15px
        27px;

    border:
        1px
        solid
        #f2762b;

    border-radius: 40px;

    background: #f2762b;

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 500;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.ad-button-primary
.wp-block-button__link:hover {

    background: transparent;

    color: #f2762b !important;

    transform:
        translateY(-2px);
}


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

.ad-home-hero-visual {
    position: relative;

    z-index: 10;

    align-self: end;

    height: 650px;

    margin: 0 !important;
}


/* person */

.ad-hero-person {
    position: absolute;

    right: -20px;
    bottom: -8px;

    z-index: 10;

    width:
        min(
            620px,
            46vw
        );

    margin: 0 !important;
}

.ad-hero-person img {
    display: block;

    width: 100%;

    height: auto;

    filter:
        drop-shadow(
            0
            30px
            60px
            rgba(0,0,0,.20)
        );
}


/* ============================================================
   HERO SOUND WAVES
   ============================================================ */

.ad-hero-wave {
    position: absolute;

    z-index: 2;

    pointer-events: none;

    opacity: .24;
}

.ad-hero-wave img {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;
}


/* first */

.ad-hero-wave-one {
    top: 105px;
    right: -170px;

    width: 760px;

    transform:
        rotate(-4deg);

    animation:
        ad-hero-wave-one
        11s
        ease-in-out
        infinite
        alternate;
}


/* second */

.ad-hero-wave-two {
    right: 14%;
    bottom: 145px;

    width: 600px;

    opacity: .13;

    transform:
        rotate(5deg);

    animation:
        ad-hero-wave-two
        14s
        ease-in-out
        infinite
        alternate;
}


/* ============================================================
   HERO BOTTOM WAVE
   ============================================================ */

.ad-hero-bottom-wave {
    position: absolute;

    z-index: 30;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 125px;

    pointer-events: none;
}

.ad-hero-bottom-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}


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

@keyframes ad-hero-wave-one {

    0% {
        transform:
            translateX(30px)
            translateY(0)
            scaleX(.94)
            rotate(-4deg);

        opacity: .14;
    }

    50% {
        transform:
            translateX(-40px)
            translateY(12px)
            scaleX(1.04)
            rotate(-2deg);

        opacity: .30;
    }

    100% {
        transform:
            translateX(-90px)
            translateY(-10px)
            scaleX(1.10)
            rotate(-5deg);

        opacity: .18;
    }

}


@keyframes ad-hero-wave-two {

    0% {
        transform:
            translateX(-30px)
            scaleX(.92)
            rotate(5deg);

        opacity: .08;
    }

    50% {
        transform:
            translateX(25px)
            scaleX(1.06)
            rotate(3deg);

        opacity: .20;
    }

    100% {
        transform:
            translateX(65px)
            scaleX(.98)
            rotate(6deg);

        opacity: .10;
    }

}


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

@media (max-width: 1000px) {

    .ad-home-hero {
        min-height: 650px;
    }

    .ad-home-hero-inner {
        width:
            calc(
                100%
                -
                60px
            );

        min-height: 650px;

        grid-template-columns:
            minmax(0,1fr)
            minmax(350px,.8fr);

        gap: 20px;
    }

    .ad-home-hero-title {
        font-size:
            clamp(
                55px,
                7vw,
                80px
            );
    }

    .ad-home-hero-visual {
        height: 560px;
    }

    .ad-hero-person {
        right: -40px;

        width: 470px;
    }

}


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

@media (max-width: 700px) {

    .ad-home-hero {
        min-height: 760px;
    }

    .ad-home-hero-inner {
        width:
            calc(
                100%
                -
                40px
            );

        min-height: 760px;

        padding:
            55px
            0
            115px;

        display: block;
    }

    .ad-home-hero-copy {
        position: relative;

        z-index: 20;

        max-width: 100%;
    }

    .ad-eyebrow {
        margin-bottom:
            18px !important;

        font-size: 10px;
    }

    .ad-home-hero-title {
        margin-bottom:
            22px !important;

        font-size:
            clamp(
                48px,
                15vw,
                70px
            );

        line-height: .94;
    }

    .ad-home-hero-subtitle {
        max-width: 90%;

        font-size: 17px;
    }

    .ad-home-hero-visual {
        position: absolute;

        right: -65px;
        bottom: 60px;

        width: 370px;
        height: 410px;
    }

    .ad-hero-person {
        right: 0;
        bottom: 0;

        width: 360px;
    }

    .ad-hero-wave-one {
        top: 300px;
        right: -310px;

        width: 670px;
    }

    .ad-hero-wave-two {
        display: none;
    }

    .ad-hero-bottom-wave {
        height: 85px;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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

    html {
        scroll-behavior: auto;
    }

    .ad-wave-track-left,
    .ad-wave-track-right {
        animation: none;
    }

}