/*=========================================================
Campbell River Lodge
Coming Soon
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#000;
    overflow-x:hidden;

}

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

.coming-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

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

.coming-bg{

    position:absolute;

    inset:0;

    background:
        linear-gradient(rgba(10,20,15,.55),rgba(10,20,15,.65)),
        url("../Images/River/River35.jpg") center center/cover no-repeat;

    animation:zoomBackground 30s ease-in-out infinite alternate;

}

@keyframes zoomBackground{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.coming-overlay{

    position:relative;

    z-index:5;

    width:min(760px,90%);

    padding:70px;

    text-align:center;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:30px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.coming-tag{

    letter-spacing:5px;

    color:#d9e9dc;

    font-size:.85rem;

}

.coming-overlay h1{

    font-size:clamp(3rem,6vw,5rem);

    color:#fff;

    margin:25px 0;

}

.coming-overlay p{

    color:#f5f5f5;

    line-height:2;

    font-size:1.1rem;

    margin-bottom:40px;

}

/*=========================================================
BUTTONS
=========================================================*/

.coming-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

    text-decoration:none;

    padding:18px 36px;

    border-radius:40px;

    font-weight:700;

    transition:.35s;

}

.btn-primary{

    background:#355b3b;

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:#46724d;

}

.btn-secondary{

    background:#fff;

    color:#355b3b;

}

.btn-secondary:hover{

    transform:translateY(-4px);

}

/*=========================================================
SALMON
=========================================================*/

.coming-fish{

    position:absolute;

    bottom:10px;

    right:25px;

    width:320px;

    z-index:6;

    filter:drop-shadow(0 20px 35px rgba(0,0,0,.45));

    animation:fishFloat 5s ease-in-out infinite;
	
	transform:rotate(-6deg);

}

@keyframes fishFloat{

    0%,100%{

        transform:rotate(-6deg) translateY(0);

    }

    50%{

        transform:rotate(-6deg) translateY(-10px);

    }

}

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

.coming-footer{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    color:white;

    z-index:10;

    line-height:2;

    font-size:.95rem;

}

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

@media(max-width:768px){

    .coming-overlay{

        padding:45px 30px;

    }

    .coming-fish{

        width:170px;

        right:10px;

    }

    .coming-footer{

        width:90%;

        font-size:.85rem;

    }

}
/*=========================================================
FISH SPEECH BUBBLE
=========================================================*/

.fish-speech{

    position:absolute;

    bottom:260px;

    right:220px;

    background:#ffffff;

    color:#355b3b;

    padding:14px 22px;

    border-radius:18px;

    font-weight:700;

    font-size:1rem;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    z-index:20;

    animation:fishBubble 5s ease-in-out infinite;

}

/* little pointer */

.fish-speech::after{

    content:"";

    position:absolute;

    bottom:-10px;

    right:35px;

    width:20px;

    height:20px;

    background:#fff;

    transform:rotate(45deg);

}

@keyframes fishBubble{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}
.cursor{

    animation:blink 1s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}