/* ppuzzl.bar — Dopamine Neon Burst */
:root {
    --bg: #0D0D0D;
    --card: #1A1A1A;
    --card-hover: #242424;
    --pink: #FF2D78;
    --cyan: #00F0FF;
    --green: #39FF14;
    --purple: #BF40FF;
    --orange: #FF6D00;
    --text: #A0A0A0;
    --white: #FFFFFF;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Sora', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; }

#hero { height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero-title { font-weight: 800; font-size: 120px; letter-spacing: -0.02em; color: var(--white); display: flex; gap: 2px; }
.letter { opacity: 0; transition: opacity 0.3s, text-shadow 0.3s; }
.letter.on { opacity: 1; }
.letter[data-color="pink"].on { text-shadow: 0 0 20px var(--pink), 0 0 40px var(--pink), 0 0 80px rgba(255,45,120,0.3); }
.letter[data-color="cyan"].on { text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan), 0 0 80px rgba(0,240,255,0.3); }
.letter[data-color="green"].on { text-shadow: 0 0 20px var(--green), 0 0 40px var(--green), 0 0 80px rgba(57,255,20,0.3); }
.letter[data-color="purple"].on { text-shadow: 0 0 20px var(--purple), 0 0 40px var(--purple), 0 0 80px rgba(191,64,255,0.3); }
.letter[data-color="orange"].on { text-shadow: 0 0 20px var(--orange), 0 0 40px var(--orange), 0 0 80px rgba(255,109,0,0.3); }
.hero-sub { font-weight: 800; font-size: 48px; color: var(--cyan); opacity: 0; transition: opacity 0.2s; text-shadow: 0 0 20px var(--cyan), 0 0 40px rgba(0,240,255,0.4); letter-spacing: -0.02em; }
.hero-sub.on { opacity: 1; }

.gradient-orbs { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
.gradient-orbs.on { opacity: 1; }
.orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(80px); }
.orb-pink { background: var(--pink); opacity: 0.08; top: 10%; left: 15%; }
.orb-cyan { background: var(--cyan); opacity: 0.08; top: 60%; right: 10%; }
.orb-green { background: var(--green); opacity: 0.06; bottom: 20%; left: 40%; }
.orb-purple { background: var(--purple); opacity: 0.07; top: 30%; right: 30%; }

.hero-title .letter { animation: colorCycle 4s infinite; }
@keyframes colorCycle {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

#bento { max-width: 1100px; margin: 0 auto; padding: 40px 20px 120px; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento-card { background: var(--card); border-radius: 20px; padding: 32px; border: 2px solid transparent; position: relative; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s, background 0.2s, box-shadow 0.2s; }
.bento-card.visible { opacity: 1; transform: translateY(0); }
.span-2x1 { grid-column: span 2; }
.span-1x2 { grid-row: span 2; }

.neon-pink .bento-card, .bento-card.neon-pink { border-color: var(--pink); box-shadow: 0 0 15px rgba(255,45,120,0.25), 0 0 30px rgba(255,45,120,0.12); }
.neon-cyan .bento-card, .bento-card.neon-cyan { border-color: var(--cyan); box-shadow: 0 0 15px rgba(0,240,255,0.25), 0 0 30px rgba(0,240,255,0.12); }
.neon-green .bento-card, .bento-card.neon-green { border-color: var(--green); box-shadow: 0 0 15px rgba(57,255,20,0.25), 0 0 30px rgba(57,255,20,0.12); }
.neon-purple .bento-card, .bento-card.neon-purple { border-color: var(--purple); box-shadow: 0 0 15px rgba(191,64,255,0.25), 0 0 30px rgba(191,64,255,0.12); }
.neon-orange .bento-card, .bento-card.neon-orange { border-color: var(--orange); box-shadow: 0 0 15px rgba(255,109,0,0.25), 0 0 30px rgba(255,109,0,0.12); }

.bento-card:hover { background: var(--card-hover); }
.bento-card.neon-pink:hover { box-shadow: 0 0 30px rgba(255,45,120,0.4), 0 0 60px rgba(255,45,120,0.2); }
.bento-card.neon-cyan:hover { box-shadow: 0 0 30px rgba(0,240,255,0.4), 0 0 60px rgba(0,240,255,0.2); }
.bento-card.neon-green:hover { box-shadow: 0 0 30px rgba(57,255,20,0.4), 0 0 60px rgba(57,255,20,0.2); }
.bento-card.neon-purple:hover { box-shadow: 0 0 30px rgba(191,64,255,0.4), 0 0 60px rgba(191,64,255,0.2); }
.bento-card.neon-orange:hover { box-shadow: 0 0 30px rgba(255,109,0,0.4), 0 0 60px rgba(255,109,0,0.2); }

.card-label { font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.neon-pink .card-label { color: var(--pink); }
.neon-cyan .card-label { color: var(--cyan); }
.neon-green .card-label { color: var(--green); }
.neon-purple .card-label { color: var(--purple); }
.neon-orange .card-label { color: var(--orange); }
.card-title { font-weight: 800; font-size: 28px; color: var(--white); letter-spacing: -0.02em; margin: 8px 0 12px; }
.card-body { font-weight: 400; font-size: 15px; color: var(--text); line-height: 1.6; }

.pulse-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: pulse 2s infinite; }
.top-right { top: 12px; right: 12px; }
.bottom-left { bottom: 12px; left: 12px; }
.neon-pink .pulse-dot { background: var(--pink); }
.neon-cyan .pulse-dot { background: var(--cyan); }
.neon-green .pulse-dot { background: var(--green); }
.neon-purple .pulse-dot { background: var(--purple); }
.neon-orange .pulse-dot { background: var(--orange); }
.bento-card:hover .pulse-dot { animation-duration: 0.5s; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }

.bottom-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100%); z-index: 100; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bottom-nav.on { transform: translateX(-50%) translateY(0); }
.nav-pill { display: flex; gap: 8px; background: rgba(26,26,26,0.9); border: 1px solid rgba(255,255,255,0.1); border-radius: 40px; padding: 8px 16px; backdrop-filter: blur(10px); }
.nav-item { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; color: var(--text); padding: 8px 20px; border-radius: 24px; transition: color 0.2s, text-shadow 0.2s; }
.nav-item.neon-pink:hover { color: var(--pink); text-shadow: 0 0 10px rgba(255,45,120,0.5); }
.nav-item.neon-cyan:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(0,240,255,0.5); }

@media (max-width: 768px) {
    .hero-title { font-size: 60px; }
    .hero-sub { font-size: 28px; }
    .bento-grid { grid-template-columns: 1fr; }
    .span-2x1 { grid-column: span 1; }
}