:root {
    --primary-neon: #00e5ff;
    --secondary-neon: #ff00c1;
    --accent-neon: #faff00;
    --background-color: #01010c;
    --text-color: #e0e0e0;
    --text-color-dark: #a0a0a0;
    --container-bg: rgba(10, 20, 35, 0.5);
    --glow-color: rgba(0, 229, 255, 0.5);
}

@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px 5px var(--glow-color), inset 0 0 10px 2px var(--glow-color); } 50% { box-shadow: 0 0 25px 10px var(--glow-color), inset 0 0 15px 4px var(--glow-color); } }
@keyframes text-glow { 0%, 100% { text-shadow: 0 0 4px #fff, 0 0 10px var(--primary-neon), 0 0 18px var(--primary-neon); } 50% { text-shadow: 0 0 6px #fff, 0 0 14px var(--primary-neon), 0 0 22px var(--primary-neon); } }
@keyframes shockwave { 0% { transform: scale(0); opacity: 0.7; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes floatAnimation { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(4px, -6px) rotate(1deg); } 50% { transform: translate(-3px, 0px) rotate(-1deg); } 75% { transform: translate(2px, 4px) rotate(0.5deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes pageEntryAnimation { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pageExitAnimation { to { transform: scale(0.9); opacity: 0; } }

body {
    font-family: 'Poppins', 'Segoe UI', sans-serif; margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; text-align: center; position: relative;
    overflow-x: hidden;
    background-color: #000000; color: var(--text-color);
}

.background-wrapper, #nativeAnimationCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.background-wrapper { transition: filter 0.5s ease; }

#content-layout {
    position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem; width: 100%; padding: 2rem; box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease;
    animation: pageEntryAnimation 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
}
#content-layout.page-exit { animation: pageExitAnimation 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards; }

.hud-panel {
    background-color: var(--container-bg); border: 2px solid var(--primary-neon);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    clip-path: polygon(0 25px, 25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.5), 0 0 10px 2px var(--glow-color);
    padding: 2.5rem; width: 90%; box-sizing: border-box;
}
.hud-panel:hover { box-shadow: 0 0 25px 8px rgba(0,0,0,0.5), 0 0 20px 5px var(--glow-color); }

#main-hub { max-width: 600px; }
#link-grid { max-width: 700px; }

h1 { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 800; margin: 0 0 2.5rem 0; letter-spacing: 2px; color: #fff; animation: text-glow 2.5s ease-in-out infinite; }
#link-grid h2 { color: var(--text-color); font-weight: 400; margin: 0 0 2rem 0; }
#visitorCounter { color: var(--text-color-dark); font-size: 1.1rem; margin-top: 2.5rem; display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 600; }
#visitCount { color: var(--accent-neon); }

.button-wrapper { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }

.action-button {
    position: relative; color: var(--text-color); background: transparent;
    border: 2px solid var(--primary-neon); padding: 1rem 2.2rem; font-size: 1.1rem;
    cursor: pointer; transition: all 0.3s ease;
    font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
    box-shadow: inset 0 0 8px 0 rgba(0, 229, 255, 0.3);
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    animation: floatAnimation 12s ease-in-out infinite;
}
.action-button::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 100%; padding-top: 100%;
    border-radius: 50%; background-color: var(--secondary-neon);
    transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
}
.action-button:active::after { animation: shockwave 0.5s ease-out; }
.action-button:hover, .action-button:focus {
    background-color: var(--glow-color); color: #fff; border-color: var(--accent-neon);
    box-shadow: 0 0 20px 5px var(--glow-color), inset 0 0 15px 2px var(--glow-color);
    text-shadow: 0 0 8px var(--accent-neon);
    transform: translateY(-5px) scale(1.03);
    animation-play-state: paused;
}

.button-wrapper .action-button:nth-child(1) { animation-duration: 11s; animation-delay: -2s; }
.button-wrapper .action-button:nth-child(2) { animation-duration: 13s; animation-delay: -4s; }
.button-wrapper .action-button:nth-child(3) { animation-duration: 12.5s; animation-delay: -1s; }
.button-wrapper .action-button:nth-child(4) { animation-duration: 14s; animation-delay: -5s; }
.button-wrapper .action-button:nth-child(5) { animation-duration: 11.5s; animation-delay: -3s; }
.button-wrapper .action-button:nth-child(6) { animation-duration: 13.5s; animation-delay: -6s; }
.button-wrapper .action-button:nth-child(7) { animation-duration: 12s; animation-delay: 0s; }
.button-wrapper .action-button:nth-child(8) { animation-duration: 14.5s; animation-delay: -2.5s; }
.button-wrapper .action-button:nth-child(9) { animation-duration: 11.8s; animation-delay: -4.5s; }

#promo-banner {
    position: fixed; z-index: 1001;
    background-color: var(--container-bg); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    opacity: 0; visibility: hidden;
    top: 20px; left: -350px;
    border: 2px solid var(--secondary-neon);
    padding: 1rem 3rem 1rem 1.5rem;
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    box-shadow: 0 0 20px 5px rgba(255, 0, 193, 0.4);
}
#promo-banner.visible { left: 20px; opacity: 1; visibility: visible; }

#promo-banner a {
    text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 1rem;
    display: flex; align-items: center; gap: 0.8rem; transition: color 0.3s ease;
}
#promo-banner a:hover { color: var(--secondary-neon); text-shadow: 0 0 8px var(--secondary-neon); }
#promo-banner a i { color: var(--secondary-neon); }

#promo-banner-close {
    position: absolute; top: 5px; right: 8px; background: transparent; border: none;
    color: var(--text-color-dark); font-size: 1.8rem; line-height: 1; cursor: pointer;
    transition: color 0.3s, transform 0.3s; padding: 0.2rem;
}
#promo-banner-close:hover { transform: scale(1.2) rotate(90deg); color: var(--secondary-neon); }

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; letter-spacing: 1px; }
    #link-grid h2 { font-size: 1.1rem; }
    .hud-panel { padding: 2rem; }
    .button-wrapper { gap: 1.2rem; }
    .action-button { padding: 0.9rem 1.8rem; font-size: 1rem; }
}
@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    #content-layout { gap: 1rem; padding: 1rem; }
    .hud-panel { padding: 2rem 1rem; }
    .button-wrapper { flex-direction: column; gap: 1rem; width: 100%; align-items: center; }
    .action-button { width: 90%; max-width: 400px; box-sizing: border-box; padding: 1rem; }
    #promo-banner.visible { left: 10px; }
    #promo-banner { padding: 0.8rem 1.2rem; font-size: 0.9rem; padding-right: 2.5rem; }
}