/* CSS Variables for brand colors */
:root {
    --primary-sky: #5bc4f7;
    --primary-blue: #0077b6;
    --deep-sea: #03101e;
    --gold: #ffd700;
    --gold-rgb: 255, 215, 0;
    --gold-glow: rgba(255, 215, 0, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 215, 0, 0.22);
    --font-outfit: 'Outfit', sans-serif;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-outfit);
    /* Multiple backgrounds: 1st is the wave SVG, 2nd is the gradient */
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M0,192L48,208C96,224,192,256,288,245.3C384,235,480,181,576,170.7C672,160,768,192,864,192C960,192,1056,160,1152,149.3C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom / 100% auto,
        linear-gradient(180deg, var(--primary-sky) 0%, #0a4d87 45%, var(--deep-sea) 100%);
    background-attachment: scroll, fixed; /* Wave scrolls naturally, gradient stays locked */
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

/* Background decorations wrapper to prevent page stretching/scrollbars */
.bg-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Sunburst decor in top-left matching the logo's sun */
.sunburst-decor {
    position: absolute;
    top: -250px;
    left: -250px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 230, 0, 0.22) 0%, rgba(255, 230, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Soft Sunbeams radiating from top-left */
.sunbeams-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.15;
}

.sunbeams-decor .beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 150vw;
    height: 40px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    transform-origin: top left;
}

.sunbeams-decor .beam:nth-child(1) { transform: rotate(15deg); }
.sunbeams-decor .beam:nth-child(2) { transform: rotate(30deg); }
.sunbeams-decor .beam:nth-child(3) { transform: rotate(45deg); }



/* Swaying Palm Leaf Silhouettes (Subtle Overlay) */
.palm-leaf {
    position: absolute;
    width: 320px;
    height: 320px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M0,100 C30,90 60,60 80,30 C85,20 88,10 90,0 C88,15 80,30 70,40 C60,50 45,60 30,70 C45,55 60,40 75,20 C60,35 45,50 30,60 C45,45 60,30 70,10 C55,30 40,45 25,55 C40,40 50,20 60,0 C45,20 30,35 15,45 C25,35 35,20 40,5 C25,25 15,35 0,40 Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
}

.leaf-left {
    bottom: -50px;
    left: -80px;
    transform: rotate(45deg);
    animation: swayLeft 16s ease-in-out infinite alternate;
}

.leaf-right {
    top: 50px;
    right: -80px;
    transform: rotate(-135deg);
    animation: swayRight 14s ease-in-out infinite alternate;
}

@keyframes swayLeft {
    0% { transform: rotate(40deg) translate(0, 0); }
    100% { transform: rotate(48deg) translate(5px, -5px); }
}

@keyframes swayRight {
    0% { transform: rotate(-130deg) translate(0, 0); }
    100% { transform: rotate(-138deg) translate(-5px, 5px); }
}

/* Floating Gold Particles */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--gold);
    box-shadow: 0 0 10px var(--gold);
    opacity: 0;
    animation: floatParticle 8s infinite linear;
}

.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 9s; }
.particle:nth-child(2) { left: 25%; top: 15%; animation-delay: 2s; animation-duration: 7s; }
.particle:nth-child(3) { left: 40%; top: 35%; animation-delay: 4s; animation-duration: 11s; }
.particle:nth-child(4) { left: 75%; top: 25%; animation-delay: 1s; animation-duration: 8s; }
.particle:nth-child(5) { left: 15%; top: 60%; animation-delay: 5s; animation-duration: 10s; }
.particle:nth-child(6) { left: 85%; top: 50%; animation-delay: 3s; animation-duration: 9s; }
.particle:nth-child(7) { left: 55%; top: 75%; animation-delay: 6s; animation-duration: 12s; }
.particle:nth-child(8) { left: 30%; top: 80%; animation-delay: 1.5s; animation-duration: 8.5s; }

@keyframes floatParticle {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.4; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}

/* Container Layout */
.portal-container {
    width: 100%;
    max-width: 480px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* Logo Header & Wrapper */
.logo-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-wrapper {
    position: relative;
    width: 170px;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#portal-logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    filter: drop-shadow(0 8px 18px rgba(4, 37, 75, 0.45));
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.logo-wrapper:hover #portal-logo {
    transform: scale(1.03); /* Slight scale, no rotation */
}

/* SVG Neon Border */
.logo-neon-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.neon-path {
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
    opacity: 0; /* Hidden by default */
    stroke-dasharray: 100 200; /* Set in base class for browser engine initialization */
    stroke-dashoffset: 0;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95)) 
            drop-shadow(0 0 3px rgba(0, 229, 255, 0.7));
}

@keyframes neonBorderRun {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -660;
    }
}

.logo-wrapper:hover .neon-path {
    opacity: 1;
    animation: neonBorderRun 2.3s linear infinite;
}

/* Navigation Links */
.links-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 45px;
}

/* Glassmorphic Capsule Button */
.link-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--glass-border);
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Auto Shine/Shimmer sweep effect on buttons */
@keyframes shineSweep {
    0% { left: -100%; opacity: 0; }
    12% { opacity: 0.8; }
    24% { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

.link-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255, 215, 0, 0.35), rgba(255,255,255,0));
    transform: skewX(-20deg);
    animation: shineSweep 8s infinite ease-in-out;
    pointer-events: none;
}

/* Stagger the sweep animations sequentially */
#link-0::after { animation-delay: 0s; }
#link-1::after { animation-delay: 1.5s; }
#link-2::after { animation-delay: 3s; }
#link-3::after { animation-delay: 4.5s; }
#link-4::after { animation-delay: 6s; }

.link-btn:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.13);
    border-color: var(--gold);
    box-shadow: 0 10px 22px rgba(255, 215, 0, 0.25), 
                inset 0 0 10px rgba(255, 215, 0, 0.15);
}

.link-name {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.link-icon {
    width: 18px;
    height: 18px;
    color: var(--gold);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.link-btn:hover .link-icon {
    transform: scale(1.12);
}


/* Speed Indicator Dot & Text Container */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ping speed value text */
.ping-val {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.link-btn:hover .ping-val {
    color: var(--gold);
}

/* Pulse ring glow around active dots */
@keyframes pulseGlow {
    0% { transform: scale(0.6); opacity: 1; }
    80%, 100% { transform: scale(2.4); opacity: 0; }
}

.status-indicator-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #888888;
    box-shadow: 0 0 6px #888888;
    z-index: 2;
    transition: all 0.3s ease;
}

.status-dot-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0;
    z-index: 1;
}

/* Dynamic colors & animations */
.fast .status-dot {
    background-color: #00e676; /* Bright Green */
    box-shadow: 0 0 8px #00e676;
}
.fast .status-dot-pulse {
    background-color: #00e676;
    animation: pulseGlow 2s infinite ease-out;
}

.medium .status-dot {
    background-color: #ffb300; /* Yellow/Orange */
    box-shadow: 0 0 8px #ffb300;
}
.medium .status-dot-pulse {
    background-color: #ffb300;
    animation: pulseGlow 2.2s infinite ease-out;
}

.slow .status-dot {
    background-color: #ff3d00; /* Red */
    box-shadow: 0 0 8px #ff3d00;
}
.slow .status-dot-pulse {
    background-color: #ff3d00;
    animation: pulseGlow 2.4s infinite ease-out;
}

/* Loading state */
.loading-state {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    letter-spacing: 1px;
}

/* Footer Styling */
.portal-footer {
    text-align: center;
}

.portal-footer h2 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 6px;
}

.portal-footer p {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 4px;
}

.portal-footer .copyright {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .portal-container {
        padding: 30px 16px;
    }
    .logo-wrapper {
        width: 145px;
        height: 145px;
    }
    .link-btn {
        padding: 14px 22px;
        font-size: 13px;
    }
}