/* ==========================================================
   PAOREEL STUDIOS V4
   HERO FOUNDATION
========================================================== */

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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;

    background:#000;

}

/* ==========================================================
   FIXED BACKGROUND
========================================================== */

.hero-fixed{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    z-index:1;

   
}

/* ==========================================================
   PARALLAX LAYER
========================================================== */

.hero-parallax{

    position:absolute;

    inset:0;

    will-change:transform;

}

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

.hero-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/* ==========================================================
   BTS VIDEO
========================================================== */

.hero-bts{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    opacity:0;

    z-index:1;

}
#hero-video {
    opacity: 1;
}

#hero-still{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    opacity:0;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(0.95)
        blur(1px);

    transform:scale(1.01);
}
/* ==========================================================
   FINAL HERO IMAGE
========================================================== */

.hero-image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.08);

    filter:
        brightness(.82)
        contrast(1.08)
        saturate(.88);

    opacity:0;

    z-index:2;

    will-change:
        transform,
        opacity,
        filter;

}

/* ==========================================================
   HERO CINEMATIC OVERLAY
========================================================== */

.hero-mask{

    position:absolute;

    inset:0;

    z-index:3;

    opacity:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at center,

            rgba(0,0,0,.08),

            rgba(0,0,0,.35)

        ),

        linear-gradient(

            to bottom,

            rgba(8,8,8,.25),

            rgba(8,8,8,.42) 45%,

            rgba(8,8,8,.70)

        );

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

.hero-content{

    position:relative;

    z-index:20;

    width:min(100%,var(--site-width));

    margin:0 auto;

    padding:0 var(--content-padding) 7rem;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    min-height:100vh;

    opacity:0;

}

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

.hero-label{

    display:inline-block;

    margin-bottom:2rem;

    font-size:var(--fs-sm);

    letter-spacing:.22em;

    text-transform:uppercase;

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

    transform:translateY(20px);

    opacity:0;

}

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

.hero-title{

    display:flex;

    flex-direction:column;

    gap:.05em;

    font-size:var(--fs-display);

    font-weight:var(--font-weight-light);

    line-height:1.05;

    letter-spacing:-.05em;

    color:#fff;

}

/* ==========================================================
   HERO TITLE LINE
========================================================== */

.hero-line{

    display:block;

    overflow:visible;

    padding-bottom:.22em;

}

.hero-line-inner{

    /*display:block;*/

    transform:translateY(100%);

    opacity:0;

    will-change:transform,opacity;

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:46px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    z-index:25;

    pointer-events:none;

    opacity:0;

}

.scroll-indicator span{

    width:1px;

    height:72px;

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

}

.scroll-indicator p{

    font-size:.75rem;

    letter-spacing:.30em;

    text-transform:uppercase;

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

}
.hero-mask{

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.35) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(8,8,8,.25) 0%,
            rgba(8,8,8,.42) 45%,
            rgba(8,8,8,.68) 100%
        );

    opacity:0;

    pointer-events:none;

    z-index:3;

}
/* ==========================================================
   FILM GRAIN
========================================================== */

.film-grain{

    position:absolute;

    inset:0;

    z-index:4;

    pointer-events:none;

    opacity:0;

    background-image:url("../images/film-grain.png");

    background-repeat:repeat;

    background-size:320px 320px;

    mix-blend-mode:soft-light;

    will-change:transform,opacity;

}

/* ==========================================
   SOUND TOGGLE
========================================== */

.sound-toggle{

    position:fixed;

    left:40px;

    bottom:36px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

    color:#fff;

    opacity:.35;

    cursor:pointer;

    z-index:100000;

    transition:
        opacity .35s ease,
        transform .35s ease;

    animation:soundBreath 2.8s ease-in-out infinite;

}

.sound-toggle:hover{

    opacity:1;

    transform:scale(1.12);

}

.sound-icon{

    width:20px;

    height:20px;

}

/* ==========================================
   SOUND BREATHING ANIMATION
========================================== */

@keyframes soundBreath{

    0%{

        opacity:.25;

        transform:scale(1);

    }

    50%{

        opacity:.75;

        transform:scale(1.08);

    }

    100%{

        opacity:.25;

        transform:scale(1);

    }

}

.sound-toggle.on{

    opacity:.85;

    transform:scale(1);

}
.sound-wave{

    opacity:0;

    transition:opacity .3s ease;

}

.sound-toggle.on .sound-wave{

    opacity:1;

}
/* ==========================================================
   LAYER ORDER
==========================================================

Overlay.............9999999 (cinematic.css)

Header....................30

Scroll Indicator..........22

Hero Content..............20

Editorial Overlay.........15

Hero Overlay...............5

Hero Image................2

Hero Video................1

Hero Fixed................0

========================================================== */