/* styles for the second example on glitch.html */

.hide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 100px;
    min-height: 400px;
}

.hide-inner {
    position: relative;
    width: 700px;
    height: 100px;
}

/* left position of text */
.hide-inner.left {
    align-self: flex-start;
}

/* right position of text */
.hide-inner.center {
    align-self: center;
}

/* styles for the text-paragraph */
.hide-inner p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-paratext);
    font-weight: var(--font-weight-boldest);
    z-index: 0;
    transition: opacity 0.3s ease;
}

/* colors for the text-paragraph */
.p-color-red {
    color: var(--color-primary);
}

.p-color-orange {
    color: var(--color-secondary);
}

.p-color-violet {
    color: var(--color-accent);
}

.p-color-green {
    color: var(--color-accent-example);
}

/* styles for the title */
.hide-inner h2 {
    position: absolute;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-title-example);
    background-color: var(--color-bg-primary);
    width: 100%;
    text-align: center;
    z-index: 2;
    margin: 0;
    transition: transform 0.3s ease, clip-path 0.3s ease;
}

/* clip shape for the aniamtion */
.hide-inner h2.above {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.hide-inner h2.below {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* animation on hover */
.hide-inner:hover h2.above {
    transform: translate(-50%, -100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.hide-inner:hover h2.below {
    transform: translate(-50%, 0%);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}