@import url("nav.css");


/* HERO */
.hero {
    background: var(--peach-gradient);
    padding: 2em 5em 5em;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    gap: 40px;
}


/* TITLE */
.hero-left h1 {
    font-size: clamp(1.5em, 5vw, 2.5em);
    margin-bottom: 10px;
    text-align: left;
    font-family: var(--title-font);
    color: var(--title-color);
}


.word-span {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    animation: reveal 0.5s ease forwards;
}

.word-span:nth-child(1) {
    animation-delay: 0.1s;
}

.word-span:nth-child(2) {
    animation-delay: 0.2s;
}

.word-span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* SUBTITLE */
.hero-left p {
    margin-bottom: 1em;
    margin-right: 5em;
}

.fade-up {
    animation: fadeInUp 0.8s ease forwards;
}

.fade-up.delay {
    animation-delay: 0.3s;
}


/* MASCOT */
.mascot {
    width: clamp(5em, 20vw, 15em);
    animation: float 3s ease-in-out infinite;
}


/* SEARCH */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    input {
        width: 11em;
        padding: 0 1em;
        height: 2.5em;

        &::placeholder {
            font-size: 0.8em;
        }
    }

    button {
        width: 5em;
        padding: 0;
        height: 2.5em;
        background-color: var(--light-pink) !important;
    }
}

.search-output {
    margin-top: 1em;
    font-size: 0.8em;
    color: var(--grey);

    strong {
        font-size: clamp(18px, 2vw, 26px);
        color: var(--saturated-pink);
        margin: 1em;
    }
}


/* ACTIONS */
.actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    margin: 5em 0;
}

.card {
    background: white;
    padding: 2em 1em;
    border-radius: 16px;
    width: 17em;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
    cursor: pointer;
    color: var(--normal-font-color);

    img {
        display: block;
        width: clamp(5em, 20vw, 10em);
        margin: auto;
    }
}

.card:hover {
    transform: translateY(-6px);
}


/* Random WORD */
.random-word-container {
    text-align: center;
}

.word-card {
    min-width: 15em;
    background-color: var(--whitesh-pink);
    display: inline-block;
    padding: 20px 40px;
    border-radius: 16px;
    margin-top: 15px;
    margin-bottom: 60px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    #random-word {
        color: var(--pink);
        font-size: 1.5em;
    }
}


.box {
    position: relative;
    padding: 20px;
}

.border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none !important;
}

.border rect {
    fill: none;
    stroke: var(--pink);
    stroke-width: 2;
    stroke-dasharray: 8 6;
    animation: dash 2s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -28;
    }
}

.rotating-word {
    animation: fadeSlide 0.4s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}