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

.coffee-hero{

    position:relative;

    width:100%;
    height:100vh;
    min-height:650px;

    overflow:hidden;

    background:#111;

}


/* =========================================================
   SLIDER
========================================================= */

.coffee-slider{

    position:relative;

    width:100%;
    height:100%;

}


.coffee-slide{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 1.1s ease,
        visibility 1.1s ease;

    overflow:hidden;

}


.coffee-slide.active{

    opacity:1;
    visibility:visible;

    z-index:2;

}


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

.coffee-slide-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;

    transform:scale(1.08);

    transition:
        transform 7s cubic-bezier(.2,.6,.2,1);

}


.coffee-slide.active .coffee-slide-bg{

    transform:scale(1);

}


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

.coffee-slide::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.45) 28%,
            rgba(0,0,0,.16) 58%,
            rgba(0,0,0,.42) 100%
        );

}


/* 아래쪽 어둡게 */

.coffee-slide::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:40%;

    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.55),
            transparent
        );

}


/* =========================================================
   CONTENT WRAP
========================================================= */

.coffee-container{

    position:relative;

    z-index:5;

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

    height:100%;

    margin:0 auto;

    padding:
        0 70px;

    display:flex;
    align-items:center;

}


/* =========================================================
   TEXT CONTENT
========================================================= */

.coffee-content{

    width:600px;

    margin-top:-40px;

}


.coffee-number{

    display:block;

    margin-bottom:24px;

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

    font-size:13px;

    letter-spacing:3px;

    font-weight:500;

}


/* 작은 라인 */

.coffee-number::after{

    content:"";

    display:inline-block;

    width:35px;
    height:1px;

    margin-left:14px;

    vertical-align:middle;

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

}


.coffee-title{

    color:#fff;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:800;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(40px);

}


.coffee-slide.active .coffee-title{

    animation:
        coffeeTextUp
        .9s
        .15s
        forwards;

}


.coffee-desc{

    margin-top:24px;

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

    font-size:17px;

    line-height:1.7;

    letter-spacing:-.3px;

    opacity:0;

    transform:translateY(30px);

}


.coffee-slide.active .coffee-desc{

    animation:
        coffeeTextUp
        .9s
        .3s
        forwards;

}


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

.coffee-buttons{

    display:flex;

    gap:10px;

    margin-top:34px;

    opacity:0;

    transform:translateY(25px);

}


.coffee-slide.active .coffee-buttons{

    animation:
        coffeeTextUp
        .8s
        .45s
        forwards;

}


.coffee-btn{

    position:relative;

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

    min-width:130px;
    height:48px;

    padding:0 24px;

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

    border-radius:2px;

    color:#fff;

    font-size:13px;

    font-weight:500;

    overflow:hidden;

    transition:
        color .35s ease,
        border-color .35s ease;

}


.coffee-btn::before{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:0;

    background:#fff;

    transition:
        height .35s ease;

    z-index:-1;

}


.coffee-btn:hover{

    color:#21150f;

    border-color:#fff;

}


.coffee-btn:hover::before{

    height:100%;

}


/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.coffee-bottom{

    position:absolute;

    left:0;
    right:0;
    bottom:48px;

    z-index:20;

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

    margin:auto;

    padding:0 70px;

    display:flex;
    align-items:center;

}


/* =========================================================
   SLIDE NUMBER
========================================================= */

.coffee-current{

    width:50px;

    color:#fff;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

}


/* =========================================================
   PROGRESS
========================================================= */

.coffee-progress{

    position:relative;

    width:240px;
    height:1px;

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

    overflow:hidden;

}


.coffee-progress-bar{

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:100%;

    background:#fff;

}


/* =========================================================
   PROGRESS ANIMATION
========================================================= */

.coffee-slide.active ~ .coffee-ui
.coffee-progress-bar{

    animation:
        coffeeProgress
        5.5s
        linear
        forwards;

}


/* =========================================================
   SLIDE TOTAL
========================================================= */

.coffee-total{

    margin-left:14px;

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

    font-size:12px;

    letter-spacing:2px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.coffee-navigation{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:8px;

}


.coffee-arrow{

    position:relative;

    width:48px;
    height:48px;

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

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

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.coffee-arrow:hover{

    background:#fff;

    border-color:#fff;

    color:#222;

    transform:translateY(-2px);

}


.coffee-arrow span{

    font-size:20px;

    line-height:1;

}


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

.coffee-play{

    margin-left:12px;

    width:48px;
    height:48px;

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

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

}


.coffee-play:hover{

    background:#fff;
    color:#222;

}


/* =========================================================
   DOT NAVIGATION
========================================================= */

.coffee-dots{

    position:absolute;

    right:70px;
    top:50%;

    z-index:20;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:14px;

}


.coffee-dot{

    position:relative;

    width:8px;
    height:8px;

    border:0;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}


.coffee-dot.active{

    background:#fff;

    transform:scale(1.4);

}


/* =========================================================
   SIDE LABEL
========================================================= */

.coffee-side-label{

    position:absolute;

    left:26px;
    top:60%;

    z-index:10;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin:left center;

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

    font-size:10px;

    letter-spacing:4px;

    text-transform:uppercase;

}


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

.coffee-scroll{

    position:absolute;

    left:50%;
    bottom:28px;

    z-index:30;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

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

    font-size:10px;

    letter-spacing:3px;

}


.coffee-scroll-line{

    width:1px;
    height:32px;

    margin-top:7px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.7),
            transparent
        );

    animation:
        scrollMove
        1.6s
        infinite;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes coffeeTextUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


@keyframes coffeeProgress{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}


@keyframes scrollMove{

    0%{
        opacity:0;
        transform:translateY(-5px);
    }

    50%{
        opacity:1;
        transform:translateY(5px);
    }

    100%{
        opacity:0;
        transform:translateY(12px);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .coffee-container,
    .coffee-bottom{

        padding-left:50px;
        padding-right:50px;

    }


    .coffee-dots{

        right:35px;

    }

}


@media(max-width:768px){

    .coffee-hero{

        min-height:680px;
        height:100svh;

    }


    .coffee-container{

        padding:
            0 28px;

        align-items:flex-end;

        padding-bottom:170px;

    }


    .coffee-content{

        width:100%;

        margin:0;

    }


    .coffee-title{

        font-size:
            clamp(35px, 10vw, 54px);

        letter-spacing:-1.5px;

    }


    .coffee-desc{

        margin-top:18px;

        font-size:14px;

    }


    .coffee-buttons{

        margin-top:25px;

    }


    .coffee-btn{

        min-width:110px;

        height:43px;

        padding:0 18px;

        font-size:12px;

    }


    .coffee-bottom{

        bottom:34px;

        padding:
            0 28px;

    }


    .coffee-progress{

        width:
            min(160px, 30vw);

    }


    .coffee-arrow{

        width:40px;
        height:40px;

    }


    .coffee-play{

        width:40px;
        height:40px;

    }


    .coffee-dots{

        display:none;

    }


    .coffee-side-label{

        display:none;

    }


    .coffee-scroll{

        display:none;

    }

}


@media(max-width:480px){

    .coffee-container{

        padding:
            0 20px 145px;

    }


    .coffee-bottom{

        padding:
            0 20px;

    }


    .coffee-number{

        margin-bottom:16px;

    }


    .coffee-title{

        font-size:35px;

        line-height:1.12;

    }


    .coffee-desc{

        font-size:13px;

        line-height:1.6;

    }


    .coffee-buttons{

        gap:7px;

    }


    .coffee-btn{

        min-width:100px;

        height:40px;

        padding:
            0 14px;

    }


    .coffee-current{

        width:38px;

        font-size:11px;

    }


    .coffee-total{

        margin-left:8px;

        font-size:10px;

    }


    .coffee-navigation{

        gap:5px;

    }


    .coffee-arrow,
    .coffee-play{

        width:36px;
        height:36px;

    }


}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}