/* mujun.works - Colors: #0A0A0A, #FFFFFF, #E03040, #F0D020, #2060E0, #20C060, #E060A0, #D0D0D0 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0A0A0A; color: #FFFFFF; font-family: 'Barlow', sans-serif; font-size: 0.95rem; line-height: 1.6; }

/* Hero */
.hero { padding: 4rem 2rem 2rem; text-align: center; }
.hero-title { font-family: 'Bebas Neue', cursive; font-size: clamp(4rem, 10vw, 8rem); letter-spacing: 0.04em; text-transform: uppercase; color: #E03040; animation: colorCycle 2s step-end forwards; }
@keyframes colorCycle {
    0% { color: #E03040; } 10% { color: #F0D020; } 20% { color: #2060E0; } 30% { color: #20C060; }
    40% { color: #E060A0; } 50% { color: #F0D020; } 60% { color: #E03040; } 70% { color: #2060E0; }
    80% { color: #20C060; } 90% { color: #E060A0; } 100% { color: #E03040; }
}
.hero-sub { font-family: 'Bebas Neue', cursive; font-size: 1.5rem; letter-spacing: 0.08em; color: #F0D020; }

/* Marquee Strip */
.marquee-strip { overflow: hidden; padding: 1rem 0; border-top: 3px solid #0A0A0A; border-bottom: 3px solid #0A0A0A; background: #0A0A0A; margin-bottom: 2rem; }
.marquee-inner { display: flex; gap: 2rem; white-space: nowrap; animation: marqueeScroll 30s linear infinite; width: max-content; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-text { font-family: 'Bebas Neue', cursive; font-size: 1rem; letter-spacing: 0.06em; }

/* Portfolio Grid */
.portfolio-grid { max-width: 1200px; margin: 0 auto; padding: 0 2rem 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px; }

/* Work Items */
.work-item { aspect-ratio: 1; padding: 2rem; border: 3px solid #0A0A0A; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; position: relative; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.2s, transform 0.2s; }
.work-item.visible { opacity: 1; transform: translateY(0); }

/* Pop Colors */
.pop-red { background: #E03040; color: #FFFFFF; }
.pop-yellow { background: #F0D020; color: #0A0A0A; }
.pop-blue { background: #2060E0; color: #FFFFFF; }
.pop-green { background: #20C060; color: #0A0A0A; }
.pop-pink { background: #E060A0; color: #FFFFFF; }

/* Inverted States - hard toggle */
.pop-red:hover { background: #FFFFFF; color: #E03040; }
.pop-yellow:hover { background: #0A0A0A; color: #F0D020; }
.pop-blue:hover { background: #FFFFFF; color: #2060E0; }
.pop-green:hover { background: #0A0A0A; color: #20C060; }
.pop-pink:hover { background: #FFFFFF; color: #E060A0; }

/* Ben-Day Dots */
.dots::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px); background-size: 12px 12px; pointer-events: none; }
.dots[data-text-dark="true"]::before { background: radial-gradient(circle, rgba(10,10,10,0.08) 2px, transparent 2px); background-size: 12px 12px; }

/* Typography */
.work-title { font-family: 'Bebas Neue', cursive; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.5rem; line-height: 1.1; }
.work-desc { font-size: 0.9rem; line-height: 1.5; opacity: 0.85; }

/* Speech Bubble */
.speech-bubble { font-family: 'Bebas Neue', cursive; font-size: 1.1rem; letter-spacing: 0.04em; background: #FFFFFF; color: #0A0A0A; border: 3px solid #0A0A0A; border-radius: 20px; padding: 0.5rem 1rem; display: inline-block; margin-bottom: 1rem; position: relative; }
.speech-bubble::after { content: ''; position: absolute; bottom: -10px; left: 20px; border: 6px solid transparent; border-top-color: #0A0A0A; }

/* Responsive */
@media (max-width: 600px) {
    .portfolio-grid { grid-template-columns: 1fr; }
}