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

:root{

    --hero-gap:16px;

    --panel-radius:24px;

    transition:var(--transition);

    --c1:6fr;
    --c2:.5fr;
    --c3:.5fr;
    --c4:.5fr;
    --c5:.5fr;
    --c6:.5fr;

}

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

#hero{

    width:100%;

    height:calc(100vh - 90px);

    margin-top:90px;

    padding:18px;

    background:#050505;

    overflow:hidden;

    opacity:0;

    transform:translateY(20px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

#hero.loaded{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   GRID
========================================================== */

.hero-grid{

    width:100%;

    height:100%;

    display:grid;

    gap:0;

    grid-template-columns:

        var(--c1)
        var(--c2)
        var(--c3)
        var(--c4)
        var(--c5)
        var(--c6);

    transition:grid-template-columns .75s cubic-bezier(.22,1,.36,1);

}

/* ==========================================================
   PANEL
========================================================== */

.hero-panel{

    margin:0 8px;

    margin-left:-1px;

    position:relative;

    overflow:hidden;

    cursor:pointer;

    border-radius:var(--panel-radius);

    background:#111;

    isolation:isolate;

    transition:

        transform .45s,

        box-shadow .45s;

}

/* ==========================================================
   HERO PANEL HOVER
========================================================== */

/* .hero-panel:not(.active):hover .image{

    transform:scale(1.05);
            
    

} */



/* ==========================================
   VERTICAL TEXT HOVER
========================================== */

/* .hero-panel:not(.active):hover .vertical-text{

    transform:scale(1.15);

    letter-spacing:7px;

} */

/* ==========================================================
   ACTIVE PANEL
========================================================== */

.hero-panel.active{

    transform:
        translateY(-16px)
        scale(1.02);

    z-index:20;

    box-shadow:
        0 50px 120px rgba(0,0,0,.55),
        0 0 60px rgba(217,4,41,.22);

}

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

.image{

    position:absolute;

    inset:0;

    background-repeat:no-repeat;

    background-size:cover;

    will-change: transform, background-position;

    transition:
        transform 2s cubic-bezier(.22,1,.36,1),
        filter .8s ease,
        background-position 1.5s ease;

    filter:

        brightness(.30)

        saturate(.55)

        contrast(.95);

}

/* ==========================================================
   IMAGE POSITIONS
========================================================== */

.taekwondo{

    background-image:url("../images/hero/taekwondo.png");

    background-position:78% center;

}

.muaythai{

    background-image:url("../images/hero/muaythai.png");

    background-position:80% center;

}

.martialarts{

    background-image:url("../images/hero/martialarts.png");

    background-position:76% center;

}

.karate{

    background-image:url("../images/hero/karate.png");

    background-position:78% center;

}

.kickboxing{

    background-image:url("../images/hero/kickboxing.png");

    background-position:82% center;

}

.jiujitsu{

    background-image:url("../images/hero/jiujitsu.png");

    background-position:80% center;

}

/* ==========================================================
   ACTIVE IMAGE
========================================================== */

.hero-panel.active .image{

    animation:breathe 12s ease-in-out infinite;

    filter:
        brightness(1.05)
        saturate(1.15)
        contrast(1.08);

}

/* ==========================================================
   OVERLAY
========================================================== */

.overlay{

    position:absolute;

    top:0;
    left:-5px;
    right:-5px;
    bottom:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.55) 40%,
            rgba(0,0,0,.08) 78%,
            rgba(0,0,0,.08) 100%
        );

}

.hero-panel.active .overlay{

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.68) 0%,

        rgba(0,0,0,.22) 42%,

        rgba(0,0,0,.04) 80%,

        rgba(0,0,0,0) 100%

    );

}

/* ==========================================================
   COLLAPSED STATE
========================================================== */

.collapsed{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.45s ease;

}

.hero-panel.active .collapsed{

    opacity:0;

    transform:
        translateY(-35px)
        scale(.92);

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

}

/* ==========================================================
   VERTICAL TITLE
========================================================== */

.vertical-text{

    writing-mode:vertical-rl;

    text-orientation:mixed;

    white-space:nowrap;

    font-size:2rem;

    font-style:italic;

    font-weight:700;

    letter-spacing:5px;

    color:#ffffff;

    text-shadow:0 0 15px rgba(0,0,0,.6);

    transform:scale(1);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        letter-spacing .35s ease,
        color .35s ease;

}
/* ==========================================================
   EXPANDED CONTENT
========================================================== */

.expanded-content{

    position:absolute;

    left:70px;

    top:50%;

    width:520px;

    transform:translateY(-50%);

    color:white;

    z-index:5;

    display:none;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

.hero-panel.active .expanded-content{

    display:block;

}
.expanded-content h1,
.expanded-content h3,
.expanded-content p,
.expanded-content .explore-btn{

    opacity:0;

    transform:translateY(40px);

}

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

.expanded-content h1{

    font-size:clamp(4.5rem,6vw,7rem);

    font-weight:700;

    font-style:italic;

    line-height:.95;

    letter-spacing:-3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

/* ==========================================================
   SUBTITLE
========================================================== */

.expanded-content h3{

    font-size:1.15rem;

    font-weight:500;

    letter-spacing:3px;

    color:#ffffff;

    opacity:.82;

    margin-bottom:24px;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.expanded-content p{

    max-width:470px;

    color:#d5d5d5;

    line-height:1.8;

    margin-bottom:35px;

}

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

.explore-btn{

    overflow:hidden;

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

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

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(14px);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s;

}

.explore-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:translateX(-120%);

    transition:.6s;

}

.explore-btn:hover{

    background:#D90429;

    border-color:#D90429;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(217,4,41,.35);

}

.explore-btn:hover::before{

    transform:translateX(120%);

}

.explore-btn span{

    transition:.35s;

}

.explore-btn:hover span{

    transform:translateX(8px);

}
/* ==========================================================
   CINEMATIC CONTENT REVEAL
========================================================== */

.hero-panel.active h1{

    animation:titleReveal .65s .20s forwards;

}

.hero-panel.active h3{

    animation:titleReveal .65s .40s forwards;

}

.hero-panel.active p{

    animation:titleReveal .65s .60s forwards;

}

.hero-panel.active .explore-btn{

    animation:titleReveal .65s .80s forwards;

}

@keyframes titleReveal{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ==========================================================
   HERO IMAGE BREATHING
========================================================== */

@keyframes breathe{

    0%{

    transform:

        scale(1.10)

        rotate(.2deg);

}

    50%{

    transform:

        scale(1.14)

        rotate(.4deg);

}

    100%{

    transform:

        scale(1.10)

        rotate(.2deg);

}

}
/* ==========================================================
   ACTIVE ACCENT BAR
========================================================== */

.hero-panel.active::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:5px;

    height:20%;

    border-radius:10px;

    background:#D90429;

    box-shadow:
        0 0 20px rgba(217,4,41,.7);

    animation:accentGlow 3s ease-in-out infinite;

    z-index:8;

}

@keyframes accentGlow{

    0%{

        opacity:.6;

        box-shadow:0 0 15px rgba(217,4,41,.5);

    }

    50%{

        opacity:1;

        box-shadow:0 0 35px rgba(217,4,41,.9);

    }

    100%{

        opacity:.6;

        box-shadow:0 0 15px rgba(217,4,41,.5);

    }

}