:root {
    --ripple-duration: 12s;
    --ripple-easing: cubic-bezier(0.3, 0, 0.2, 1); 
    --icon-box-size: 5vh;
    --icon-img-size: 4vh;
    --icon-gap-vw: 10vw;
    --label-font-size: 2vh; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow: hidden; background-color: #000; }

.background-image {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../assets/background.png'); 
    background-size: cover; background-position: center; 
    z-index: 1;
}

.footer-area {
    position: fixed; right: 5px; bottom: 5px; z-index: 2; text-align: right;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #FFFFFF; user-select: none;
    pointer-events: auto;
}
.footer-link { color: #FFFFFF !important; text-decoration: none; transition: opacity 0.3s ease; cursor: pointer; }
.footer-link:visited { color: #FFFFFF !important; }
.footer-link:hover { opacity: 0.7; }
.footer-separator { margin: 0 5px; cursor: default; }

.background-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #2F4F4F; opacity: 1; transition: opacity 0.6s ease-in-out; 
    z-index: 3; pointer-events: auto;
}
.background-mask.light-up { opacity: 0; pointer-events: none; }

.container {
    position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; z-index: 4;
    transform: translateY(20vh);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none; 
}
.container.shifted { transform: translateY(0); }

.content-wrapper { display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; padding: 0 5vw; }
.main-text, .icon-area, .decorative-line { pointer-events: auto; }

.main-text {
    font-family: 'JetBrains Mono', monospace; font-size: 20vh; line-height: 20vh;
    cursor: pointer; user-select: none; color: #4A6B6B; 
    transition: all 0.4s ease, opacity 0.4s ease;
}
.main-text.active { color: #FFFFFF; }

.decorative-line {
    width: 20vw; height: 2px; background-color: #FFFFFF;
    margin-top: 0vh; 
    margin-left: 2vw;
    transform: scaleX(0); transform-origin: left;
    transition: opacity 0.1s ease;
}
.decorative-line.glow { background-color: #7CFC00; box-shadow: 0 0 8px 1px #7CFC00; }
.decorative-line.hidden { opacity: 0; }

.icon-area {
    display: flex; 
    flex-direction: row; 
    gap: var(--icon-gap-vw);
    margin-top: 10vh; 
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all 0.6s ease;
}
.container.shifted .icon-area { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.5s; }

.icon-item { 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    position: relative;
}

.icon-box {
    width: var(--icon-box-size); height: var(--icon-box-size);
    background-color: #FFFFFF; border-radius: 3px;
    display: flex; justify-content: center; align-items: center; 
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.icon-box:hover { transform: scale(1.1); }
.icon-img { width: var(--icon-img-size); height: var(--icon-img-size); object-fit: contain; transition: opacity 0.5s ease; }

.hover-label {
    position: absolute;
    left: 100%;
    margin-left: 2vw;
    font-family: 'JetBrains Mono', monospace; 
    font-size: var(--label-font-size);
    color: #FFFFFF; 
    opacity: 0; 
    pointer-events: none; 
    user-select: none;
    transform: translateX(-10px); 
    transition: all 0.3s ease; 
    white-space: nowrap;
}
.icon-item:hover .hover-label { 
    opacity: 1; 
    transform: translateX(0); 
}

@media (max-width: 768px) {
    .main-text { font-size: 12vh; line-height: 12vh; }
    .decorative-line { width: 40vw; margin-left: 1vw; }
    .icon-area {
        flex-direction: column; 
        gap: 3vh; 
        margin-top: 8vh;
    }
    .hover-label {
        font-size: 2.5vh;
        margin-left: 4vw;
    }
}

.ripple-ring {
    position: fixed; border-radius: 50%; background: transparent !important;
    width: 100px; height: 100px; border: 5px solid #FFFFFF; 
    mix-blend-mode: difference; z-index: 9999; pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(0); opacity: 0;
    will-change: transform, opacity; animation: ripple-move var(--ripple-duration) var(--ripple-easing) forwards;
}
@keyframes ripple-move {
    0% { transform: translate3d(-50%, -50%, 0) scale(0); opacity: 0; }
    0.2% { opacity: 1; } 85% { opacity: 1; }
    100% { transform: translate3d(-50%, -50%, 0) scale(800); opacity: 0; }
}