/*index*/
/* 1 — GLOBAL / RESET / FONTS */
/* 2 — BACKGROUND + EFFECT LAYERS */
/* 3 — HEADER SYSTEM */
/* 4 — TAB BAR SYSTEM */
/* 5 — TOOLTIP BAR */
/* 6 — CONTENT AREA LAYOUT */
/* 7 — ICON GRID MODULE */
/* 8 — HEADER-TEXT SECTIONS */
/* 9 — MEDIA QUERIES */

/* ============================================================
   1 — GLOBAL / RESET / FONTS
   ============================================================ */

/* Load font */
@font-face {
    font-family: 'VT323';
    src: url('assets/VT323-Regular.ttf') format('truetype');
}

/* Set global box model */
html {
    box-sizing: border-box;
    background-color: black;   /* prevent white flash */
    height: 100%;
}

/* Apply box model everywhere */
*, *::before, *::after {
    box-sizing: inherit;
}

/* Base page styling */
body {
    margin: 0;
    padding: 0;
    min-height: 100%;           /* safer than height:100% */
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    overflow-y: auto;
}

/* ============================================================
   2 — BACKGROUND + EFFECT LAYERS
   ============================================================ */

/* Gradient background layer behind everything */
.background-layer {
    position: fixed;             /* full viewport */
    inset: 0;                    /* shorthand for top:0; left:0; right:0; bottom:0 */
    z-index: 0;                  /* bottom-most layer */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;        /* clicks pass through */
    overflow: hidden;            /* contain background */
}

/* Firefly animation layer */
.firefly-layer {
    position: fixed;
    inset: 0;                    /* shorthand for full screen */
    z-index: 1;                  /* above background */
    pointer-events: none;        /* clicks pass through */
    overflow: hidden;            /* contain fireflies */
}

/* ============================================================
   3 — HEADER SYSTEM
   ============================================================ */

/* Fixed wrapper for header + tabs + tooltip */
#ui-fixed-wrapper {
    position: fixed;               /* stick to top of viewport */
    top: 0;
    left: 0;
    width: 100%;                   /* full width */
    display: flex;                 /* vertical stack: header + tabs + tooltip */
    flex-direction: column;
    background: rgba(0, 0, 0, 0.85); /* semi-transparent black backdrop */
    z-index: 5000;                 /* always on top */
}

/* Header bar layout */
.header-container {
    display: grid;                 /* three-column layout */
    grid-template-columns: auto 1fr auto;
    align-items: center;           /* vertically center items */
    column-gap: 10px;              /* spacing between left/title/right */

    width: 100%;                   /* full width */
    padding: 0 10px;               /* inner horizontal spacing */

    background: rgba(0, 0, 0, 0.8);/* slightly darker than wrapper for layered effect */
    box-shadow: 0 2px 10px rgba(0,0,0,0.8); /* subtle header shadow */
    /* box-sizing: border-box;  redundant, already global */
}

/* Main title in header */
.header-title {
    font-size: clamp(1rem, 5vw, 8rem); /* responsive font size */
    text-align: center;                 /* center title horizontally */
    margin: 0;                          /* remove default margin */
    white-space: nowrap;                /* avoid wrapping */
    color: #111111;

    /* Neon glow effect */
    text-shadow:  
        0 0 2px #00ff88,
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 20px #00ff88;
}

/* Header left link group */
.header-icons-left {
    display: flex;                 /* horizontal flex layout */
    flex-wrap: wrap;               /* wrap if needed */
    justify-content: start;        /* align left */
    gap: 10px;                     /* spacing between links */
}

/* Header right link group */
.header-icons-right {
    display: flex;                 /* horizontal flex layout */
    flex-wrap: wrap;               /* wrap if needed */
    justify-content: end;          /* align right */
    gap: 10px;                     /* spacing between links */
}

/* Individual header navigation links */
.header-text-link {
    display: inline-flex;          /* center content */
    align-items: center;
    justify-content: center;

    padding: 6px 14px;             /* internal spacing */
    white-space: nowrap;            /* prevent line breaks */

    font-size: 1.4rem;             /* text size */
    color: #ffcc66;                /* text color */
    text-decoration: none;

    background: rgba(255,255,255,0.1); /* faint backdrop */
    border-radius: 10px;                /* rounded corners */

    /* smooth transitions for hover effects */
    transition: 
        transform 0.3s,
        color 0.3s,
        background 0.3s;
}

/* Hover state for header links */
.header-text-link:hover {
    transform: scale(1.12);            /* grow slightly */
    background: rgba(255,204,102,0.85);
    color: #000;
}

/* Active header link (when its section is open) */
.header-text-link.active {
    background: #b8860b;               /* golden background */
    color: #000;
    box-shadow: 0 0 15px 4px rgba(184,134,11,0.7); /* glow effect */
    text-shadow: 0 0 8px rgba(220,180,50,0.8);     /* text glow */
}

/* ============================================================
   4 — TAB BAR SYSTEM
   ============================================================ */

/* Main row of large tabs */
.tab-bar {
    display: flex;                 /* horizontal flex layout */
    flex-wrap: wrap;               /* wrap on small screens */
    justify-content: center;       /* center tabs horizontally */
    align-items: center;           /* vertically center tabs */
    gap: 10px;                     /* spacing between tab buttons */
    
    width: 100%;                   /* full width */
    padding: 12px 12px 16px;       /* top/right/bottom/left padding */
    
    background: rgba(0,0,0,0.65);  /* semi-transparent background */
    backdrop-filter: blur(4px);     /* frosted effect */
    box-sizing: border-box;
}

/* Shrinks when scrolling */
.tab-bar.scrolled {
    opacity: 0.85;                 /* slightly transparent */
    transform: scale(0.95);        /* shrink slightly */
    background: rgba(0,0,0,0.5);   /* darker semi-transparent */
}

/* Individual tab button */
.tab-bar button {
    flex: 0 0 auto;                      /* size based on content, don't grow or shrink */
    min-width: 80px;                      /* minimum tappable width */
    max-width: 220px;                     /* optional: prevent extremely wide labels */
    
    padding: 12px 18px;                   /* taller buttons for mobile-friendly tapping */
    
    font-family: 'VT323', monospace;
    font-size: clamp(0.9rem, 2.2vw, 1.3rem); /* responsive font size */
    white-space: nowrap;                   /* keep one line if it fits */
    overflow: hidden;                      /* truncate if really long */
    text-overflow: ellipsis;               /* show ... if needed */
    
    border-radius: 10px;
    border: 2px solid #ff5733;
    background: rgba(255,255,255,0.1);
    color: white;
    
    /* smooth transitions */
    transition: background 0.25s, transform 0.25s, font-size 0.25s;
}

/* Optional: small-screen tweaks */
@media (max-width: 960px) {
    .tab-bar button {
        padding: 14px 16px;               /* slightly taller for mobile */
        font-size: 1rem;                   /* larger minimum font */
    }
}



/* Active glowing tab */
.tab-bar button.active {
    background: #ff5733;           /* orange fill */
    color: #000;
    box-shadow: 0 0 15px 4px rgba(184,134,11,0.7); /* glow effect */
    text-shadow: 0 0 8px rgba(255,180,50,0.8);
    animation: pulseGlow 3s infinite; /* slow glow loop */
}

/* Hover state */
.tab-bar button:hover {
    transform: scale(1.06);             /* grow slightly */
    background: rgba(255,87,51,0.8);    /* bright orange on hover */
    box-shadow: 0 0 10px 3px rgba(255,87,51,0.6); /* subtle glow */
}

/* ============================================================
   5 — TOOLTIP BAR
   ============================================================ */

/* The horizontal tooltip bar under the tab bar */
#tooltip-display {
    display: flex;                  /* horizontal layout for tooltip content */
    justify-content: center;        /* center text horizontally */
    flex-wrap: wrap;                /* allow wrapping for long text */
    
    width: 100%;                    /* full width */
    padding: 4px 14px;              /* inner spacing */
    min-height: 38px;               /* stable height for layout */
    margin-bottom: 10px;            /* spacing before main content */

    color: #00ff88;                 /* green text glow */
    text-align: center;             /* center text */
    letter-spacing: 2px;            /* spacing between letters */
    font-size: 1.3rem;              /* tooltip text size */

    background: rgba(0,0,0,0.65);   /* semi-transparent background */
    box-sizing: border-box;
    z-index: 10;                     /* above content */
}

/* Container for each icon’s hover zone */
.tooltip {
    position: relative;              /* for positioning tooltip text if needed */
    display: block;                  /* full width for hover detection */
    width: 100%;
}

/* ============================================================
   6 — CONTENT AREA LAYOUT
   ============================================================ */

/* The main scrollable content area */
#content-area {
    position: absolute;             /* JS repositions under tooltip */
    top: 0;                         /* will be dynamically adjusted */
    left: 0;
    width: 100%;                    /* full width */
    
    padding-bottom: 20px;           /* spacing at bottom */
    
    overflow-y: auto;               /* scroll vertically if content overflows */
    overflow-x: hidden;             /* prevent horizontal scroll */
}

/* Hidden tab sections */
section.tab-content {
    display: none;                  /* hidden by default */
    padding: 24px;                  /* spacing inside each tab content */
}

/* Visible tab section */
section.tab-content.active {
    display: block;                 /* show active tab */
    animation: fadeIn 0.4s ease;    /* smooth fade-in effect */
}

/* Simple fade animation for tab content */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); /* slide up slightly */
    }
    to { 
        opacity: 1; 
        transform: translateY(0);    /* end at normal position */
    }
}


/* ============================================================
   7 — ICON GRID MODULE
   ============================================================ */

/* Icon grid container */
ul.icon-grid {
    display: flex;                 /* horizontal flex layout */
    flex-wrap: wrap;               /* allow wrapping to multiple rows */
    justify-content: center;       /* center icons horizontally */
    
    padding: 20px;                 /* internal spacing */
    margin: 0 auto;                /* center container */
    max-width: 100vw;              /* prevent overflow */
    overflow-x: hidden;            /* prevent horizontal scroll */
    box-sizing: border-box;
}

/* Each icon item */
ul.icon-grid li {
    display: flex;                 /* center content within list item */
    align-items: center;
    justify-content: center;
    margin: 12px;                   /* spacing between icons */
    position: relative;            /* for overlay text positioning */
}

/* Icon clickable wrapper */
ul.icon-grid li a {
    display: inline-block;
    padding: 6px;                 /* internal padding */
    
    background-color: rgba(135,206,235,0.3); /* light blue background */
    border: 4px solid #2b3a45;    /* dark border */
    border-radius: 20px;           /* rounded corners */

    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: rgba(135,206,235,0.6); /* bluish text color */

    /* smooth hover transition */
    transition: background-color 0.25s,
                border-color 0.25s,
                transform 0.25s;
}

/* Hover highlight for clickable icons */
ul.icon-grid li a:hover {
    background-color: rgba(135,206,235,0.6); /* highlight */
    border-color: #cc0022;                   /* vivid red border */
    transform: scale(1.04);                  /* slight grow */
}

/* Icon image sizing */
ul.icon-grid li a img {
    width: 200px;                /* standard image width */
    height: auto;                /* preserve aspect ratio */
    max-width: 100%;
    display: block;
}

/* Hover-grow effect for images */
.hover-enlarge {
    transition: transform 0.25s;
}
.hover-enlarge:hover {
    transform: scale(1.1);       /* slightly enlarge on hover */
}

/* Container for image + visible text */
.icon-wrapper {
    padding: 0;          /* no extra space */
    margin: 0;           /* remove default spacing */
    position: relative;     /* for absolutely positioned icon-text */
    display: inline-block;  /* shrink-wrap to image width */
}

/* Visible text under icon */
.icon-text {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    
    white-space: nowrap;      /* keep one line unless JS decides to wrap */
    text-align: center;
    max-width: 100%;

    font-weight: normal;        /* make text bold */
    font-size: 1.2rem;        /* larger text */
    color: #e0e0e0;           /* very light gray */
    
    overflow: hidden;
    text-overflow: ellipsis;  /* optional for very long text */
}


/* ============================================================
   8 — HEADER-TEXT SECTIONS (About / Tip / Info / Contact)
   ============================================================ */

/* Container for the simple text sections */
.header-tab-content {
    position: relative;            /* positioning context */
    z-index: 5;                    /* above background but below header */
    display: none;                 /* hidden until active */
    
    padding: 50px 20px;            /* spacing inside container */
    text-align: center;            /* center text horizontally */
}

/* Main big text inside the header sections */
.header-tab-text {
    font-size: 3rem;               /* large display text */
    color: #ffd700;                /* yellow text */
    max-width: 800px;              /* limit width for readability */
    margin: 20px auto;             /* center block with vertical spacing */
    line-height: 1.2;              /* tighter line spacing */
}

/* Show section when active */
.header-tab-content.active {
    display: block;                /* make visible */
    animation: fadeIn 0.4s ease;   /* smooth fade-in effect */
}

/* ============================================================
   9 — MEDIA QUERIES
   ============================================================ */

@media (max-width: 960px) {

    /* Smaller icons for smaller screens */
    ul.icon-grid li a img {
        width: 150px;               /* reduce icon size */
    }

    /* Reduced hover grow effect for smaller screens */
    .hover-enlarge:hover {
        transform: scale(1.08);     /* slightly smaller scale */
    }

    /* Smaller padding for icon clickable wrapper */
    ul.icon-grid li a {
        padding: 6px;               /* reduce internal spacing */
    }
}