/* CSS Custom Properties */
:root {
    /* Colors from DESIGN.md */
    --cyan: #60D8E0;
    --peach: #F8D8C0;
    --purple: #7A7088;
    --mint: #C8E8D0;
    --dark-purple: #3A2848;
    --medium-purple: #4A4458;
    --coral: #FF9870;
    --cream: #F8F0E8;
    --cyan-pulse: #A0E0E8;
    --lavender-mist: #E8D8F0;

    /* Spacing */
    --gap: 8px;

    /* Shadows */
    --shadow-inset: inset -2px -2px 4px rgba(0, 0, 0, 0.08), inset 2px 2px 4px rgba(255, 255, 255, 0.6);
    --shadow-outset: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --glow-cyan: 0 0 8px rgba(96, 216, 224, 0.3), 0 0 24px rgba(96, 216, 224, 0.15), 0 0 48px rgba(96, 216, 224, 0.05);
    --glow-peach: 0 0 8px rgba(248, 216, 192, 0.3), 0 0 24px rgba(248, 216, 192, 0.15), 0 0 48px rgba(248, 216, 192, 0.05);
    --glow-lavender: 0 0 8px rgba(122, 112, 136, 0.3), 0 0 24px rgba(122, 112, 136, 0.15), 0 0 48px rgba(122, 112, 136, 0.05);

    /* Extended color palette matching DESIGN.md */
    --color-1: #60D8E0;
    --color-2: #F8D8C0;
    --color-3: #7A7088;
    --color-4: #C8E8D0;
    --color-5: #3A2848;
    --color-6: #4A4458;
    --color-7: #FF9870;
    --color-8: #F8F0E8;
    --color-9: #A0E0E8;
    --color-10: #E8D8F0;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.7;
    color: #4A4458;
    overflow: hidden;
}

/* Viewport Container */
.viewport {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--cream);
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    width: 90%;
    margin: 0 auto;
    padding: 60px 0;
    auto-rows: minmax(200px, auto);
}

/* Grid Skeleton (Entry Animation) */
.grid-skeleton {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(0deg, var(--cream) 0%, var(--cream) calc(100% - 1px), #E8D8F0 calc(100% - 1px), #E8D8F0 100%),
        linear-gradient(90deg, var(--cream) 0%, var(--cream) calc(100% - 1px), #E8D8F0 calc(100% - 1px), #E8D8F0 100%);
    background-size: calc(8.33% + 8px) calc(200px + 8px);
    background-position: 0 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    animation: gridFadeIn 0.4s ease-out forwards;
}

@keyframes gridFadeIn {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.1;
    }
}

/* Bento Cell Styles */
.bento-cell {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--shadow-inset), var(--shadow-outset);
    position: relative;
    overflow: hidden;
    animation: cellMaterialize 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-fill-mode: both;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Staggered animation for cells */
.bento-cell:nth-child(2) { animation-delay: 100ms; }
.bento-cell:nth-child(3) { animation-delay: 200ms; }
.bento-cell:nth-child(4) { animation-delay: 300ms; }
.bento-cell:nth-child(5) { animation-delay: 400ms; }
.bento-cell:nth-child(6) { animation-delay: 500ms; }
.bento-cell:nth-child(7) { animation-delay: 600ms; }
.bento-cell:nth-child(8) { animation-delay: 700ms; }
.bento-cell:nth-child(9) { animation-delay: 800ms; }
.bento-cell:nth-child(10) { animation-delay: 900ms; }
.bento-cell:nth-child(11) { animation-delay: 1000ms; }

@keyframes cellMaterialize {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Neon glow states for different categories */
.input-mechanics {
    border: 1px solid rgba(96, 216, 224, 0.2);
}

.input-mechanics:hover {
    box-shadow: var(--glow-cyan), var(--shadow-inset), var(--shadow-outset);
}

.process-mechanics {
    border: 1px solid rgba(122, 112, 136, 0.2);
}

.process-mechanics:hover {
    box-shadow: var(--glow-lavender), var(--shadow-inset), var(--shadow-outset);
}

.output-mechanics {
    border: 1px solid rgba(248, 216, 192, 0.2);
}

.output-mechanics:hover {
    box-shadow: var(--glow-peach), var(--shadow-inset), var(--shadow-outset);
}

.narrative, .philosophy, .legacy {
    border: 1px solid rgba(122, 112, 136, 0.2);
}

.narrative:hover, .philosophy:hover, .legacy:hover {
    box-shadow: var(--glow-lavender), var(--shadow-inset), var(--shadow-outset);
}

.audio, .visual, .tools {
    border: 1px solid rgba(96, 216, 224, 0.2);
}

.audio:hover, .visual:hover, .tools:hover {
    box-shadow: var(--glow-cyan), var(--shadow-inset), var(--shadow-outset);
}

.gallery {
    border: 1px solid rgba(248, 216, 192, 0.2);
}

.gallery:hover {
    box-shadow: var(--glow-peach), var(--shadow-inset), var(--shadow-outset);
}

/* Cell Content */
.cell-content {
    position: relative;
    z-index: 1;
}

/* Headings with wave animation */
.cell-heading {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    color: var(--dark-purple);
    display: inline-block;
}

.animated-heading {
    display: inline-flex;
    position: relative;
    gap: 2px;
}

.animated-heading span {
    display: inline-block;
    animation: waveRise 0.6s ease-in-out forwards;
}

.animated-heading span:nth-child(1) { animation-delay: 0ms; }
.animated-heading span:nth-child(2) { animation-delay: 30ms; }
.animated-heading span:nth-child(3) { animation-delay: 60ms; }
.animated-heading span:nth-child(4) { animation-delay: 90ms; }
.animated-heading span:nth-child(5) { animation-delay: 120ms; }
.animated-heading span:nth-child(6) { animation-delay: 150ms; }
.animated-heading span:nth-child(7) { animation-delay: 180ms; }
.animated-heading span:nth-child(8) { animation-delay: 210ms; }
.animated-heading span:nth-child(9) { animation-delay: 240ms; }
.animated-heading span:nth-child(10) { animation-delay: 270ms; }

@keyframes waveRise {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Paragraph text */
.cell-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 400;
    line-height: 1.7;
    color: #4A4458;
    margin-bottom: 20px;
    max-width: 90%;
}

/* Code/Label text */
code, .label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.85rem;
    color: #7A7088;
    letter-spacing: 0.04em;
}

/* Wireframe Icons */
.wireframe-icon {
    width: 60px;
    height: 60px;
    margin-top: 16px;
    position: relative;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.bento-cell:hover .wireframe-icon {
    opacity: 1;
}

/* Icon styles - SVG wireframes */
.tetris-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Cpath d='M10 30 L30 10 L30 50 Z M30 10 L50 30 L30 50'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.coin-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Cline x1='30' y1='10' x2='30' y2='50'/%3E%3Cline x1='15' y1='20' x2='45' y2='40'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.health-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Crect x='15' y='20' width='30' height='20' rx='2'/%3E%3Cline x1='22' y1='30' x2='38' y2='30'/%3E%3Cline x1='30' y1='22' x2='30' y2='38'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.narrative-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Crect x='12' y='15' width='36' height='30' rx='2'/%3E%3Cline x1='16' y1='22' x2='44' y2='22'/%3E%3Cline x1='16' y1='28' x2='44' y2='28'/%3E%3Cline x1='16' y1='34' x2='36' y2='34'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.audio-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Cpath d='M20 25 L20 35 L28 42 L28 18 Z'/%3E%3Cpath d='M38 30 Q40 24 40 30 Q40 36 38 30'/%3E%3Cpath d='M44 28 Q48 20 48 30 Q48 40 44 32'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.visual-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Ccircle cx='30' cy='28' r='8'/%3E%3Cpath d='M10 28 Q15 20 22 20 L38 20 Q45 20 50 28 Q45 36 38 36 L22 36 Q15 36 10 28'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.philosophy-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Ccircle cx='30' cy='25' r='8'/%3E%3Cpath d='M18 40 Q18 35 24 35 L36 35 Q42 35 42 40 L42 45 Q42 48 39 48 L21 48 Q18 48 18 45 Z'/%3E%3Cline x1='26' y1='35' x2='26' y2='32'/%3E%3Cline x1='30' y1='35' x2='30' y2='30'/%3E%3Cline x1='34' y1='35' x2='34' y2='32'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.legacy-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Crect x='12' y='15' width='36' height='30' rx='2'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3Cpath d='M30 16 L35 25 L30 28 L25 25 Z'/%3E%3Cpath d='M30 44 L35 35 L30 32 L25 35 Z'/%3E%3Cpath d='M16 30 L25 25 L28 30 L25 35 Z'/%3E%3Cpath d='M44 30 L35 35 L32 30 L35 25 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.tools-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Cpath d='M12 35 L20 20 L28 25 L20 40 Z'/%3E%3Cpath d='M32 20 L48 28 L42 45 L26 37 Z'/%3E%3Cline x1='20' y1='20' x2='32' y2='20'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.gallery-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cstyle%3E.thin%7Bstroke:%237A7088;stroke-width:1.5;fill:none;%7D%3C/style%3E%3Cg class='thin'%3E%3Crect x='12' y='15' width='18' height='15' rx='1'/%3E%3Crect x='32' y='15' width='16' height='15' rx='1'/%3E%3Crect x='12' y='32' width='18' height='16' rx='1'/%3E%3Crect x='32' y='32' width='16' height='16' rx='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Hover and interaction effects */
.bento-cell {
    cursor: pointer;
}

.bento-cell:hover {
    transform: translateY(-4px);
}

/* Scrollbar styling */
.viewport::-webkit-scrollbar {
    width: 8px;
}

.viewport::-webkit-scrollbar-track {
    background: rgba(200, 232, 208, 0.1);
}

.viewport::-webkit-scrollbar-thumb {
    background: rgba(96, 216, 224, 0.3);
    border-radius: 4px;
}

.viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 216, 224, 0.5);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .bento-grid {
        width: 95%;
    }

    .cell-heading {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .bento-cell {
        grid-column: span 3 !important;
    }

    .bento-cell[style*="span 4"],
    .bento-cell[style*="span 5"],
    .bento-cell[style*="span 6"],
    .bento-cell[style*="span 8"] {
        grid-column: span 6 !important;
    }

    .cell-heading {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    .cell-text {
        font-size: 0.875rem;
    }
}