/* ===================================================
   MAIN VISUAL
=================================================== */

.main-visual{
    position:relative;
    width:100%;
    height:calc(100vh - var(--header-height));
    overflow:hidden;
    background:#000;
}

/* ===================================================
   Track
=================================================== */

.main-visual__track{
    position:absolute;
    inset:0;
}

/* ===================================================
   Slide
=================================================== */

.main-visual__slide{

    position:absolute;
    inset:0;

    opacity:0;
    z-index:1;

    transition:
        opacity 1.2s ease;

}

.main-visual__slide.is-active{

    opacity:1;
    z-index:2;

}

.main-visual__slide.is-leaving{

    z-index:1;

}

/* ===================================================
   Image
=================================================== */

.main-visual__media{

    position:absolute;
    inset:0;

    overflow:hidden;

}

.main-visual__image{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1.03);

    transition:
        transform 6s ease;

}

.main-visual__slide.is-active
.main-visual__image{

    transform:scale(1);

}

/* ===================================================
   Overlay
=================================================== */

.main-visual__media::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.10) 70%,
        rgba(0,0,0,0) 100%
    );

}

/* ===================================================
   Content
=================================================== */

.main-visual__content{

      position:absolute;
    inset:0;

    padding:0 80px;

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

    z-index:5;

}

/* ===================================================
   Hero
=================================================== */

.main-visual__hero{

    position:absolute;

       left:120px;

    top:40%;

    transform:translateY(-50%);

}

/* ===================================================
   Title
=================================================== */

.main-visual__title{

    display:flex;

    flex-direction:column;

    gap:0;

    color:#fff;

    transition:
        opacity .5s ease;

}

.main-visual__title.is-fade{

    opacity:0;

}

.main-visual__title-line{

    display:block;

    font-size:110px;

    line-height:.9;

    letter-spacing:-4px;

    text-transform:uppercase;

}

.main-visual__title-line--light{

    font-weight:300;

}

.main-visual__title-line--bold{

    font-weight:800;

}

/* ===================================================
   Indicators
=================================================== */

.main-visual__indicators{

    display:flex;

    gap:16px;

    margin-top:48px;

}

.main-visual__indicator{

    width:40px;

    height:4px;

    border:none;

    cursor:pointer;

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

    transition:.3s;

}

.main-visual__indicator:hover{

    background:#fff;

}

.main-visual__indicator.is-active{

    width:52px;

    background:#fff;

}

/* ===================================================
   Project
=================================================== */

.main-visual__project{

    position:absolute;

    right:80px;

    bottom:80px;

    width:420px;

    color:#fff;

    text-align:right;

}

.main-visual__project-category{

    font-size:22px;

    font-weight:700;

    letter-spacing:2px;

    opacity:.8;

}

.main-visual__project-line{

    width:150px;

    height:1px;

    margin:5px 0 10px auto;

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

}

.main-visual__project-title{

    font-size:18px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:5px;

}

.main-visual__project-description{

    font-size:16px;

    line-height:1.8;

    letter-spacing:-0.5px;

    opacity:.8;

}

/* ===================================================
   Responsive
=================================================== */

@media (max-width:1440px){

.main-visual__hero{

 position:absolute;

}

.main-visual__project{

right:60px;

}

.main-visual__title-line{

font-size:90px;

}

}

@media (max-width:1024px){

.main-visual__hero{

 position:absolute;

}

.main-visual__project{

right:40px;

bottom:50px;

width:320px;

}

.main-visual__title-line{

font-size:72px;

}

}

@media (max-width:768px){

.main-visual{

height:calc(100vh - 70px);

}

.main-visual__hero{

 position:absolute;

top:46%;

}

.main-visual__title-line{

font-size:52px;

letter-spacing:-2px;

}

.main-visual__project{

position:absolute;

right:auto;

bottom:30px;

width:auto;

text-align:left;

}

.main-visual__project-line{

margin-left:0;

margin-right:0;

}

.main-visual__indicators{

margin-top:32px;

gap:10px;

}

.main-visual__indicator{

width:28px;

}

.main-visual__indicator.is-active{

width:40px;

}

}