/* === General Layout === */

:root {
    --section-opacity: 0.05;
    --section-blur: 1px;
}

body {
    margin: 0;
    padding: 0;
    background: white;
}


/* === Section Background and Layout === */

section {
    margin-top: 15vh;
    height: 45vh;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    text-align: center;
}

section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: center / contain no-repeat url('images/dry_erase_sym.png');
    opacity: var(--section-opacity);
    filter: blur(var(--section-blur));
    transition: opacity 0.8s ease-in-out, transform 0.7s ease-in-out;
}

section:hover::before {
    opacity: 0.4;
    transform: translate(0%, 8%) scale(1.75);
}


/* === Text Styling === */

.fancy, .not-fancy {
    font-family: 'IBM Plex Serif', serif;
    font-size: clamp(2rem, 8vw, 12vw);
    letter-spacing: 0.05em;
    line-height: 1.05;
    z-index: 10;
    isolation: isolate;
    text-align: center;
    color: #111;
    display: block;
    margin: 0.25em 0;
}


/* === Fancy Hover Animation === */

.fancy > .letter {
    display: inline-block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.fancy:hover .letter {
    opacity: 0.8;
    transition-duration: 1s;
}


/* === Individual Letter Movement === */
.fancy:hover > .letter:nth-child(1) { transform: translate(-8%, -33%) rotate(-3deg); }
.fancy:hover > .letter:nth-child(2) { transform: translate(-6%, -34%) rotate(-2deg); }
.fancy:hover > .letter:nth-child(3) { transform: translate(-1%, -35%) rotate(-1deg); }
.fancy:hover > .letter:nth-child(4) { transform: translate(1%, -35%); }
.fancy:hover > .letter:nth-child(5) { transform: translate(3%, -34%) rotate(1deg); }
.fancy:hover > .letter:nth-child(6) { transform: translate(5%, -34%) rotate(2deg); }
.fancy:hover > .letter:nth-child(7) { transform: translate(7%, -33%) rotate(2deg); }
.fancy:hover > .letter:nth-child(8) { transform: translate(8%, -33%) rotate(3deg); }


/* === Not-Fancy Slide Effect === */

.not-fancy {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.not-fancy:hover {
    transform: translateY(20%);
    opacity: 0.8;
}


/* === Mobile Adjustments === */

@media (max-width: 600px) {
    section {
        margin-top: 10vh;
        height: 85vh;
    }

    section::before {
        filter: none;
        opacity: 0.7;
        transform: none !important;
    }

    .fancy > .letter {
        transform: none !important;
        transition: none !important;
    }

    .fancy, .not-fancy {
        font-size: 20vw;
    }

    .not-fancy {
        transform: none !important;
        opacity: 1 !important;
    }
}