@charset "UTF-8";

/*=========================================================
    DOE DESIGNS PORTFOLIO
    File: home.css

    Purpose:
    Styles specific to the Home / Landing page.

    Contains:
    • Hero section
    • Logo and speech bubble
    • Hero object
    • Landing page buttons
    • Home page animations (temporary)
    • Home-specific mobile layout

    NOTE:
    Shared animations will be moved to animations.css
    during the final integration phase.
=========================================================*/


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

.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 70px 30px 40px;
    position: relative;
    z-index: 2;
}

.hero-content {
    width: 100%;
    max-width: 1100px;

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

    text-align: center;
    gap: 22px;
}


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

.hero-logo {
    position: relative;
    display: inline-block;
}

.hero-logo-image {
    width: clamp(220px, 22vw, 340px);
    height: auto;
    display: block;
}


/*=========================================================
    SPEECH BUBBLE
=========================================================*/

.speech-bubble {
    position: absolute;
    top: -18px;
    right: -65px;

    background: #fff;
    color: #111;

    padding: 8px 18px;
    border-radius: 40px;

    font-family: "Dancing Script", cursive;
    font-size: clamp(15px, 3vw, 18px);

    white-space: nowrap;

    opacity: 0;
    transform: scale(.85);

    pointer-events: none;

    transition: .3s ease;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.hero-logo:hover .speech-bubble,
.hero-logo.show-hello .speech-bubble {
    opacity: 1;
    transform: scale(1);
}

.speech-bubble::after {
    content: "";

    position: absolute;

    bottom: -5px;
    left: 14px;

    width: 18px;
    height: 18px;

    background: #fff;

    transform: rotate(45deg);
}


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

.hero-subtitle {
    font-size: 14px;
    letter-spacing: .55em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}

.hero-intro {
    max-width: 700px;
    line-height: 1.8;
    color: rgba(255,255,255,.82);
}


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

#hero-object {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0;
    transition: .35s ease;
}

#heroObjectImage {
    width: clamp(90px, 12vw, 180px);

    animation:
        float 5s ease-in-out infinite,
        rotateObject 30s linear infinite;
}

#hero-object.hover {
    filter:
        drop-shadow(0 0 15px #00E5FF)
        drop-shadow(0 0 35px rgba(0,229,255,.45));
}


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

.enter-button {
    margin-top: 8px;
}

.secret-stash {
    display: inline-block;
    margin-top: 90px;

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

    text-decoration: none;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 13px;
    letter-spacing: .25em;

    cursor: url("../images/flashlight.cur"), pointer;
	opacity:0;
    transition: .35s ease;
}

.secret-stash:hover {
    color: #00E5FF;
	opacity: 1;
}


/*=========================================================
    HOME PAGE ANIMATIONS
    (Temporary - will move to animations.css)
=========================================================*/

@keyframes float {

    0% { transform: translateY(0); }

    50% { transform: translateY(-14px); }

    100% { transform: translateY(0); }

}

@keyframes rotateObject {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}

@keyframes bubblePop {

    0% {
        opacity: 0;
        transform: scale(.6);
    }

    70% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes waveHello {

    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-8deg); }
    40%  { transform: rotate(8deg); }
    60%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }

}

.wave {
    animation:
        bubblePop .5s ease,
        waveHello .6s ease;
}


/*=========================================================
    HOME PAGE MOBILE
=========================================================*/

@media (max-width: 768px) {

    .hero {
        padding-top: 90px;
    }

    .hero-content {
        gap: 18px;
    }

    .speech-bubble {
        right: -35px;
    }

}