/* ==========================================
   ENHANCED BENTO GRID LAYOUT
   Extracted from home_page.html for caching
   ========================================== */

/* Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 1rem;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .col-span-2 {
        grid-column: span 1 !important;
    }
    .row-span-2 {
        grid-row: span 1 !important;
    }
}

/* Column & Row Spans */
.col-span-2 { grid-column: span 2; }
.row-span-2 { grid-row: span 2; }

/* Base Bento Item */
.bento-item {
    position: relative;
    border-radius: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bento-item:hover:not(.tilt-active) {
    transform: translateY(-4px);
    border-color: var(--glass-border-hover);
}

/* Glow effect on hover */
.bento-item-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bento-item-glow.green { background: radial-gradient(circle at 50% 50%, rgba(48, 255, 178, 0.15), transparent 70%); }
.bento-item-glow.cyan { background: radial-gradient(circle at 50% 50%, rgba(30, 231, 255, 0.15), transparent 70%); }
.bento-item-glow.purple { background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15), transparent 70%); }
.bento-item-glow.yellow { background: radial-gradient(circle at 50% 50%, rgba(255, 204, 0, 0.1), transparent 70%); }
.bento-item-glow.pink { background: radial-gradient(circle at 50% 50%, rgba(255, 59, 141, 0.15), transparent 70%); }

.bento-item:hover .bento-item-glow { opacity: 1; }

/* Circuit pattern background */
.bento-circuit-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, var(--glass-border) 1px, transparent 1px),
        linear-gradient(var(--glass-border) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    mask-image: radial-gradient(ellipse at 80% 20%, black 0%, transparent 70%);
}

/* Hero Card */
.bento-hero {
    background: linear-gradient(135deg, var(--cyber-bg-tertiary) 0%, var(--cyber-bg-secondary) 100%);
    min-height: 280px;
}

.bento-hero:hover {
    box-shadow: 0 0 40px rgba(48, 255, 178, 0.15);
}

/* Data Flow Animation */
.bento-data-flow {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
}

.data-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dataFlow 4s linear infinite;
}

.data-line.delay-1 { animation-delay: 1.3s; }
.data-line.delay-2 { animation-delay: 2.6s; }

@keyframes dataFlow {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: -200; }
}

/* Hex Grid Overlay */
.bento-hex-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2330ffb2' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* Corner decorations */
.bento-corner-decor {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.4;
}

.bento-corner-decor.top-right {
    top: 0;
    right: 0;
    border-top: 2px solid var(--neon-green);
    border-right: 2px solid var(--neon-green);
    border-top-right-radius: 1rem;
}

.bento-corner-decor.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
    border-bottom-left-radius: 1rem;
}

/* Terminal Mini Style */
.cyber-terminal-mini {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
}

/* Hero title glow */
.hero-title {
    text-shadow: 0 0 30px rgba(48, 255, 178, 0.2);
}

/* Icon Containers */
.bento-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.bento-icon-container.green {
    background: rgba(48, 255, 178, 0.15);
    color: var(--neon-green);
}
.bento-icon-container.cyan {
    background: rgba(30, 231, 255, 0.15);
    color: var(--neon-cyan);
}
.bento-icon-container.purple {
    background: rgba(168, 85, 247, 0.15);
    color: var(--neon-purple);
}
.bento-icon-container.orange {
    background: rgba(255, 107, 53, 0.15);
    color: var(--neon-orange);
}
.bento-icon-container.yellow {
    background: rgba(255, 204, 0, 0.15);
    color: var(--neon-yellow);
}
.bento-icon-container.dark {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
}

.bento-item:hover .bento-icon-container {
    transform: scale(1.1);
}

/* Binary Rain Effect */
.bento-binary-rain {
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--neon-green);
    opacity: 0.15;
    pointer-events: none;
}

.bento-binary-rain span {
    animation: binaryFade 2s ease-in-out infinite;
}

.bento-binary-rain span:nth-child(2) { animation-delay: 0.5s; }
.bento-binary-rain span:nth-child(3) { animation-delay: 1s; }
.bento-binary-rain span:nth-child(4) { animation-delay: 1.5s; }

@keyframes binaryFade {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.4; }
}

/* Mini Chart */
.bento-mini-chart {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 16px;
}

.bento-mini-chart span {
    width: 3px;
    background: var(--neon-green);
    border-radius: 1px;
    opacity: 0.5;
}

.bento-mini-chart span:nth-child(1) { height: 40%; }
.bento-mini-chart span:nth-child(2) { height: 70%; }
.bento-mini-chart span:nth-child(3) { height: 50%; }
.bento-mini-chart span:nth-child(4) { height: 90%; }
.bento-mini-chart span:nth-child(5) { height: 60%; }

/* Node Pattern */
.bento-node-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
}

/* Scan Line Effect */
.bento-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
    opacity: 0;
    animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

/* GitHub Commit Graph */
.bento-commit-graph {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.3;
    pointer-events: none;
}

.commit-row {
    display: flex;
    gap: 2px;
}

.commit-row span {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--neon-green);
}

.commit-row span.l1 { opacity: 0.2; }
.commit-row span.l2 { opacity: 0.4; }
.commit-row span.l3 { opacity: 0.6; }
.commit-row span.l4 { opacity: 0.9; }

/* Activity Bars */
.bento-activity-bar {
    width: 6px;
    height: 12px;
    background: var(--neon-green);
    border-radius: 2px;
    transition: transform 0.2s ease;
}

.bento-activity-bar.l1 { opacity: 0.3; height: 6px; }
.bento-activity-bar.l2 { opacity: 0.5; height: 9px; }
.bento-activity-bar.l3 { opacity: 0.7; height: 12px; }
.bento-activity-bar.l4 { opacity: 0.9; height: 15px; }
.bento-activity-bar.l5 { opacity: 1; height: 12px; }

.bento-item:hover .bento-activity-bar {
    transform: scaleY(1.2);
}

/* Profile Scan Effect */
.bento-profile-scan {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border: 1px dashed var(--neon-purple);
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
}

.bento-profile-scan::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px dashed var(--neon-purple);
    border-radius: 50%;
    opacity: 0.5;
    animation: profilePulse 2s ease-in-out infinite;
}

@keyframes profilePulse {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.4; }
}

/* Floating Particles */
.bento-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bento-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--neon-cyan);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
}

.bento-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.bento-particles span:nth-child(2) { left: 30%; top: 60%; animation-delay: 1.5s; }
.bento-particles span:nth-child(3) { left: 50%; top: 30%; animation-delay: 3s; }
.bento-particles span:nth-child(4) { left: 70%; top: 70%; animation-delay: 4.5s; }
.bento-particles span:nth-child(5) { left: 90%; top: 40%; animation-delay: 6s; }

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.6; }
}

/* Geometric Pattern */
.bento-geo-pattern {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 60px;
    height: 60px;
    opacity: 0.5;
    pointer-events: none;
}

/* Radar Sweep */
.bento-radar-sweep {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
}

.bento-radar-sweep::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--neon-green);
    border-radius: 50%;
    animation: radarPing 2s ease-out infinite;
}

@keyframes radarPing {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Waveform */
.bento-waveform {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 30px;
    pointer-events: none;
}

.wave-path {
    stroke-dasharray: 200;
    animation: waveMove 3s linear infinite;
}

@keyframes waveMove {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* Card Variants hover effects */
.bento-blog:hover { border-color: var(--neon-green); box-shadow: 0 0 25px rgba(48, 255, 178, 0.2); }
.bento-notes:hover { border-color: var(--neon-cyan); box-shadow: 0 0 25px rgba(30, 231, 255, 0.2); }
.bento-resume:hover { border-color: var(--neon-purple); box-shadow: 0 0 25px rgba(168, 85, 247, 0.2); }
.bento-projects:hover { border-color: var(--neon-cyan); box-shadow: 0 0 25px rgba(30, 231, 255, 0.2); }
.bento-github:hover { border-color: var(--neon-green); box-shadow: 0 0 25px rgba(48, 255, 178, 0.2); }
.bento-search:hover { border-color: var(--neon-green); box-shadow: 0 0 25px rgba(48, 255, 178, 0.2); }

/* Latest Post Card */
.bento-latest {
    background: linear-gradient(135deg, var(--cyber-bg-elevated) 0%, var(--cyber-bg-tertiary) 100%);
}

.bento-accent-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-purple));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bento-latest:hover .bento-accent-bar { opacity: 1; }

/* Pulse dot */
.bento-pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--neon-green);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(48, 255, 178, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(48, 255, 178, 0); }
}

/* Tech Stack Tags */
.bento-tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.875rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    border-radius: 9999px;
    background: rgba(48, 255, 178, 0.1);
    color: var(--neon-green);
    border: 1px solid rgba(48, 255, 178, 0.3);
    transition: all 0.2s ease;
}

.bento-tech-tag:hover {
    background: rgba(48, 255, 178, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(48, 255, 178, 0.3);
}

.bento-tech-tag.cyan {
    background: rgba(30, 231, 255, 0.1);
    color: var(--neon-cyan);
    border-color: rgba(30, 231, 255, 0.3);
}
.bento-tech-tag.cyan:hover {
    background: rgba(30, 231, 255, 0.2);
    box-shadow: 0 0 10px rgba(30, 231, 255, 0.3);
}

.bento-tech-tag.purple {
    background: rgba(168, 85, 247, 0.1);
    color: var(--neon-purple);
    border-color: rgba(168, 85, 247, 0.3);
}
.bento-tech-tag.purple:hover {
    background: rgba(168, 85, 247, 0.2);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

/* Search ring effect */
.bento-search-ring {
    padding: 1rem;
    border-radius: 50%;
    border: 2px dashed var(--glass-border);
    transition: all 0.3s ease;
}

.bento-item:hover .bento-search-ring {
    border-color: var(--neon-green);
    border-style: solid;
}

/* Social Icons */
.bento-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

.bento-social-icon:hover {
    background: rgba(48, 255, 178, 0.15);
    color: var(--neon-green);
    border-color: var(--neon-green);
    transform: translateY(-2px);
}

/* Badge */
.cyber-badge-green {
    background: rgba(48, 255, 178, 0.15);
    color: var(--neon-green);
    border: 1px solid rgba(48, 255, 178, 0.3);
}

/* Text Utilities */
.cyber-text-purple { color: var(--neon-purple); }
.cyber-text-pink { color: var(--neon-pink); }
.cyber-text-orange { color: var(--neon-orange); }
.group:hover .group-hover\:cyber-text-green { color: var(--neon-green); }
.group:hover .group-hover\:cyber-text-cyan { color: var(--neon-cyan); }
.group:hover .group-hover\:cyber-text-purple { color: var(--neon-purple); }
.group:hover .group-hover\:cyber-text-pink { color: var(--neon-pink); }

/* Line Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Typing effect for terminal - JS controlled */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================
   LIGHT THEME OVERRIDES
   ========================================== */
html[data-theme="light"] .bento-item {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(42, 161, 152, 0.2);
}

html[data-theme="light"] .bento-hero {
    background: linear-gradient(135deg, #e4ddc8 0%, #fdf6e3 100%);
}

html[data-theme="light"] .cyber-terminal-mini {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(42, 161, 152, 0.2);
}

html[data-theme="light"] .bento-circuit-bg {
    opacity: 0.15;
}

html[data-theme="light"] .bento-icon-container.green {
    background: rgba(133, 153, 0, 0.15);
    color: #859900;
}

html[data-theme="light"] .bento-icon-container.cyan {
    background: rgba(42, 161, 152, 0.15);
    color: #2aa198;
}

html[data-theme="light"] .bento-icon-container.purple {
    background: rgba(108, 113, 196, 0.15);
    color: #6c71c4;
}

html[data-theme="light"] .bento-icon-container.orange {
    background: rgba(203, 75, 22, 0.15);
    color: #cb4b16;
}

html[data-theme="light"] .bento-icon-container.dark {
    background: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .bento-tech-tag {
    background: rgba(133, 153, 0, 0.1);
    color: #859900;
    border-color: rgba(133, 153, 0, 0.3);
}

html[data-theme="light"] .bento-tech-tag.cyan {
    background: rgba(42, 161, 152, 0.1);
    color: #2aa198;
    border-color: rgba(42, 161, 152, 0.3);
}

html[data-theme="light"] .bento-tech-tag.purple {
    background: rgba(108, 113, 196, 0.1);
    color: #6c71c4;
    border-color: rgba(108, 113, 196, 0.3);
}

html[data-theme="light"] .bento-social-icon {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(42, 161, 152, 0.2);
}

html[data-theme="light"] .bento-social-icon:hover {
    background: rgba(133, 153, 0, 0.1);
    color: #859900;
    border-color: #859900;
}

html[data-theme="light"] .bento-corner-decor.top-right {
    border-color: #859900;
}

html[data-theme="light"] .bento-corner-decor.bottom-left {
    border-color: #2aa198;
}

html[data-theme="light"] .bento-item-glow.green { background: radial-gradient(circle at 50% 50%, rgba(133, 153, 0, 0.1), transparent 70%); }
html[data-theme="light"] .bento-item-glow.cyan { background: radial-gradient(circle at 50% 50%, rgba(42, 161, 152, 0.1), transparent 70%); }
html[data-theme="light"] .bento-item-glow.purple { background: radial-gradient(circle at 50% 50%, rgba(108, 113, 196, 0.1), transparent 70%); }

html[data-theme="light"] .bento-binary-rain { color: #859900; }
html[data-theme="light"] .bento-mini-chart span { background: #859900; }
html[data-theme="light"] .commit-row span { background: #859900; }
html[data-theme="light"] .bento-activity-bar { background: #859900; }
html[data-theme="light"] .bento-particles span { background: #2aa198; }
html[data-theme="light"] .bento-profile-scan { border-color: #6c71c4; }
html[data-theme="light"] .bento-profile-scan::before { border-color: #6c71c4; }
html[data-theme="light"] .bento-radar-sweep::before { border-color: #859900; }

/* Minimal Animation - Only pulse for status */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}