/***              ***/
/*** HERO SECTION ***/
/***              ***/
.sp-intro {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full viewport height */
    text-align: left;
    z-index: 1;
}

.sp-intro a {
    display: inline;
}
/* TEST 弥散光 
- Only one p5 canvas can be displayed at a time
- The blur overlay layer works perfectly! 
*/
/*
#backgroundCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    pointer-events: none;
}

#blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(50px);
    z-index: -2;
    pointer-events: none;
}

#emojiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}*/

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Emoji interaction layer */
    pointer-events: none;
}



/* Headline styling */
.sp-headline {
    display: inline-block;
    font-size: 7.5vw;/* Adjust size */
    line-height: normal;
    font-weight: 600;
    position: relative;
    white-space: nowrap;
}

/* Wrapper for changing words */
.sp-words-wrapper {
    display: inline;
    position: relative;
    /* text-align: left; */
    /* min-width: 300px;  */
    /* height: 1em; */
    /* overflow: hidden; */
}

/* Default hidden state */
.sp-words-wrapper b {
    color: #ca305f;
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Visible word (enters sliding up) */
.sp-words-wrapper b.is-visible {
    animation: slideIn 0.5s forwards;
}

/* Hidden word (exits sliding up) */
.sp-words-wrapper b.is-hidden {
    animation: slideOut 0.5s forwards;
}

/* Highlighter Effect */
.highlight {
    position: relative;
    display: inline-block;
    padding: 2px 2%;
    cursor: pointer;
    z-index: 1;
}

/* Animated highlighter */
.highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 70%; /* Half of text height */
    background-color: rgba(217, 57, 91, 0.35); /* Light pinkish/coral */
    border-radius: 1em; /* Rounded edges */
    z-index: -1;
    animation: highlightEffect 1s ease-in-out forwards;
}

/* Overlay Effect on Hover */
.highlight::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%; /* Same height as highlighter */
    background-color: rgba(217, 57, 91, 0.5); /* Coral/red overlay */
    border-radius: 1em; /* Rounded edges */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.highlight:hover::before {
    opacity: 1;
    animation: highlightEffect 0.4s ease-in-out forwards;
}

@keyframes highlightEffect {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}