:root {
    /* Viewport-responsive typography */
    --font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 1.75vw, 1rem);
    --font-size-base: clamp(1rem, 2vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 2.5vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 3.5vw, 2.5rem);
    
    /* Spacing system */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2rem);
    
    /* Layout constraints */
    --header-width: clamp(200px, 20vw, 300px);
    --side-padding: clamp(1rem, 3vw, 2rem);
    
    /* Fixed 3-row layout variables */
    --row-count: 3;
    --row-gap: clamp(10px, 2vh, 20px);
    
    /* Calculated shape size for perfect 3-row fit */
    --available-height: calc(100vh - 2 * var(--side-padding));
    --shape-size: calc((var(--available-height) - (var(--row-count) - 1) * var(--row-gap)) / var(--row-count));
    
    /* Colors */
    --color-primary: #ff6600;
    --color-text: #333;
    --color-background:#ffffff;
    --color-border: rgba(0, 0, 0, 0.1);
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100%;
}


body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.5;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
#mesh-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
/* Header styles - fixed on the left */
.header {
    background: var(--color-background);
    width: var(--header-width);
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    top: 0;
    padding: var(--side-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
    flex-shrink: 0; /* Prevent header from shrinking */
    overflow-y: auto; /* Allow scrolling if content is too tall */
}

.header-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.logo {
    width: clamp(60px, 60%, 120px);
    height: clamp(60px, 60%, 120px);
    aspect-ratio: 1/1; /* New addition */
    background: #000;
    flex-shrink: 0;
    border-radius: 4px;
    margin-bottom: var(--space-md);
}

.text-content {
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-md); /* New addition */
}

.name {
    font-size: var(--font-size-xl);
    font-weight: bold;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dynamic-text {
    font-size: var(--font-size-lg);
    line-height: 1.5;
    height: 1.5em;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* New: Filter menu styles */
.filter-menu {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    order: 3; /* Ensure it comes after logo and text */
}

.filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.filter-item {
    width: 100%;
}

.filter-link {
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
    display: block;
    padding: 0.5rem;
    border-radius: 4px;
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
}

.filter-link:hover {
    color: var(--color-primary);
    background: rgba(255, 102, 0, 0.08);
}

.filter-link.active {
    background: var(--color-primary);
    color: white;
    font-weight: 500;
}

.filter-count {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 20px;
    padding: 0 8px;
    font-size: 0.8em;
    margin-left: 5px;
    min-width: 20px;
    text-align: center;
}

.filter-link:not(.active) .filter-count {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
}

/* Menu styles */
.menu {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1000;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    width: 60%;
    height: 60%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.menu-icon:hover {
    transform: scale(1.1);
}

.menu-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(100%, 300px);
    height: 100vh;
    height: 100dvh;
    background: var(--color-background);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 999;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.menu-panel.open {
    right: 0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 998;
    backdrop-filter: blur(4px);
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.menu-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.menu-close:hover {
    transform: scale(1.1);
}

.menu-content {
    margin-top: var(--space-lg);
}

.menu-list {
    list-style: none;
}

.menu-item {
    margin-bottom: var(--space-md);
}

.menu-link {
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    transition: color 0.3s ease;
    display: block;
    padding: var(--space-xs) 0;
}

.menu-link:hover {
    color: var(--color-primary);
}

/* Main content area - scrollable container */
.container {
    flex: 1;
    height: 100vh;
    height: 100dvh;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
    padding: var(--side-padding);
    display: flex;
    align-items: center;
}

.grid-container {
    height: var(--available-height);
    width: max-content; /* Allow container to expand */
    padding-right: var(--space-lg); /* Add padding at end for better scrolling */
}

/* Using flexbox for row-first layout */
.grid {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    flex-wrap: wrap; /* Allow items to wrap in columns */
    height: var(--available-height); /* Fixed height to contain exactly 3 rows */
    gap: var(--row-gap);
    align-content: flex-start; /* Start from left */
    width: max-content; /* Allow container to expand horizontally */
}

/* Shape styles */
.shape-container {
    position: relative;
    width: var(--shape-size);
    height: var(--shape-size);
    transition: transform 0.3s ease;
    margin-right: var(--row-gap); /* Gap between columns */
}

.shape-container:hover {
    transform: scale(1.05);
    z-index: 2;
}

.shape, .shape-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(90deg * var(--rotation, 0)));
    transform-origin: center center;
    transition: all 0.3s ease;
}

.shape-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    pointer-events: none;
}

.shape-container:hover .shape-overlay {
    opacity: 1;
}

.shape-name {
    position: absolute;
    transition: all 0.3s ease;
    font-weight: bold;
    padding: var(--space-xs);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    width: 80%;
    max-width: 120px;
    left: 50%;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(calc(-90deg * var(--rotation, 0)));
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* New: Shadow effects for shapes on hover */
.shape-container:hover .triangle,
.shape-container:hover .semicircle,
.shape-container:hover .plus-shape,
.shape-container:hover .quarter-circle {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
}

.shape-container:hover .circle {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.shape-container:hover .square,
.shape-container:hover .rectangle {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

/* Individual shape styles */
.square, .square-overlay { 
    background: var(--color, #ff6600); 
}

.rectangle, .rectangle-overlay { 
    background: var(--color, #666666); 
}

.circle, .circle-overlay {
    background: var(--color, #000000);
    border-radius: 50%;
}
.quarter-circle, .quarter-circle-overlay {
    background: var(--color, #666666);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 100% 0;
    width: 100%;
    height: 100%;
}
.semicircle, .semicircle-overlay {
    background: var(--color, #ff6600);
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 0%, 0% 50%);
}
.triangle, .triangle-overlay {
    background: var(--color, #666666);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.plus-shape, .plus-shape-overlay {
    background: var(--color, #000000);
    clip-path: polygon(
        35% 0,    /* Top left of top bar */
        65% 0,    /* Top right of top bar */
        65% 35%,  /* Right edge to horizontal bar */
        100% 35%, /* Start of horizontal bar right */
        100% 65%, /* End of horizontal bar right */
        65% 65%,  /* Right edge from horizontal bar */
        65% 100%, /* Bottom right of bottom bar */
        35% 100%, /* Bottom left of bottom bar */
        35% 65%,  /* Left edge from horizontal bar */
        0 65%,    /* End of horizontal bar left */
        0 35%,    /* Start of horizontal bar left */
        35% 35%   /* Left edge to horizontal bar */
    );
}

.quarter-pattern .shape-overlay {
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.shape-container:hover .quarter-pattern .shape-overlay {
    opacity: 1;
}

/* Enhanced scrolling experience */
.container {
    scroll-snap-type: x proximity; /* Smoother snap scrolling */
}

/* Custom scrollbar for horizontal scrolling */
.container::-webkit-scrollbar {
    height: 8px;
}

.container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.container::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.container::-webkit-scrollbar-thumb:hover {
    background: #e25d00;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    :root {
        --header-width: 140px;
    }
    
    .header-content {
        gap: var(--space-sm);
    }
    
    .logo {
        width: clamp(60px, 80%, 80px);
        height: clamp(60px, 80%, 80px);
    }
    
    .filter-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 480px) {
    :root {
        --header-width: 100px;
        --row-count: 2; /* Reduce to 2 rows on small screens */
    }
    
    .logo {
        width: clamp(60px, 80%, 80px);
        height: clamp(60px, 80%, 80px);
    }
    
    .name {
        font-size: clamp(1.2rem, 5vw, var(--font-size-lg));
    }
    
    .dynamic-text {
        font-size: var(--font-size-sm);
    }
    
    .filter-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
    
    .filter-count {
        font-size: 0.7em;
        padding: 0 5px;
    }
}

/* Touch device optimizations */
@media (hover: none) {
    .shape-container:hover {
        transform: none;
    }
    
    .shape-overlay {
        opacity: 0.7;
        background: rgba(255, 255, 255, 0.7);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    :root {
        --color-primary: #ff4400;
        --color-text: #000;
        --color-border: #000;
    }
    
    .filter-link:hover {
        text-decoration: underline;
    }
}

/* Print styles */
@media print {
    html, body, .container {
        overflow: visible !important;
        height: auto !important;
    }
    
    .menu, .menu-panel, .menu-overlay {
        display: none;
    }
    
    .header {
        height: auto;
        position: static;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    
    .container, .grid-container {
        display: block;
    }
    
    .grid {
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }
    
    .shape-container {
        page-break-inside: avoid;
        display: inline-block;
        margin: var(--space-md);
    }
}