/* ppuzzl.party — Neon Maximalist Chaos */
:root {
    --pink: #FF2D7B;
    --cyan: #00F0FF;
    --lime: #BFFF00;
    --orange: #FF6B1A;
    --violet: #8B00FF;
    --void: #0A0A0F;
    --ghost: #F0F0FF;
    --charcoal: #1A1A2E;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; color: #FFFFFF; background: var(--void); overflow-x: hidden; }

.page-container { position: relative; width: 100%; }

.zone { position: relative; min-height: 100vh; padding: 60px 24px; }
.zone-spill { height: 100vh; display: flex; align-items: center; justify-content: center; }

.scatter-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.scatter-letter { font-family: 'Bowlby One SC', sans-serif; font-size: 80px; display: inline-block; transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; }
.scatter-letter.scattered { position: absolute; }
.scatter-letter.assembled { position: relative; }
.neon-pink { color: var(--pink); text-shadow: 0 0 20px var(--pink), 3px 3px 0 var(--cyan); }
.neon-cyan { color: var(--cyan); text-shadow: 0 0 20px var(--cyan), 3px 3px 0 var(--pink); }
.neon-lime { color: var(--lime); text-shadow: 0 0 20px var(--lime), 3px 3px 0 var(--violet); }
.neon-orange { color: var(--orange); text-shadow: 0 0 20px var(--orange), 3px 3px 0 var(--lime); }
.neon-violet { color: var(--violet); text-shadow: 0 0 20px var(--violet), 3px 3px 0 var(--orange); }

.zone-heap { min-height: 150vh; position: relative; }
.heap-card { position: absolute; width: 320px; background: var(--charcoal); padding: 28px; border-width: 4px; border-style: solid; transition: transform 0.3s, z-index 0s, box-shadow 0.3s; z-index: 10; }
.heap-card:hover { z-index: 100; transform: rotate(0deg) scale(1.08); }
.neon-border-pink { border-color: var(--pink); }
.neon-border-pink:hover { box-shadow: 0 0 30px var(--pink); }
.neon-border-cyan { border-color: var(--cyan); }
.neon-border-cyan:hover { box-shadow: 0 0 30px var(--cyan); }
.neon-border-lime { border-color: var(--lime); }
.neon-border-lime:hover { box-shadow: 0 0 30px var(--lime); }
.neon-border-violet { border-color: var(--violet); }
.neon-border-violet:hover { box-shadow: 0 0 30px var(--violet); }
.neon-border-orange { border-color: var(--orange); }
.neon-border-orange:hover { box-shadow: 0 0 30px var(--orange); }
.card-badge { font-family: 'Rubik Mono One', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; display: inline-block; transform: rotate(-5deg); margin-bottom: 8px; }
.card-badge.neon-lime { background: var(--lime); color: var(--void); }
.card-badge.neon-orange { background: var(--orange); color: var(--void); }
.card-badge.neon-cyan { background: var(--cyan); color: var(--void); }
.card-title { font-family: 'Bowlby One SC', sans-serif; font-size: 24px; margin-bottom: 8px; }
.card-text { font-size: 15px; color: rgba(255,255,255,0.85); }

.zone-scatter { min-height: 100vh; position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 700px; margin: 0 auto; padding-top: 80px; }
.bubble { padding: 24px 32px; border: 3px solid var(--void); border-radius: 20px; position: relative; max-width: 500px; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bubble.visible { transform: scale(1); }
.bubble-left { align-self: flex-start; }
.bubble-right { align-self: flex-end; }
.bubble::after { content: ''; position: absolute; width: 16px; height: 16px; background: inherit; border: 3px solid var(--void); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bubble-left::after { bottom: -14px; left: 30px; }
.bubble-right::after { bottom: -14px; right: 30px; }
.neon-bg-pink { background: var(--pink); color: var(--void); }
.neon-bg-cyan { background: var(--cyan); color: var(--void); }
.neon-bg-lime { background: var(--lime); color: var(--void); }
.neon-bg-violet { background: var(--violet); color: var(--ghost); }
.bubble p { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; }

.zone-blackhole { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.big-piece { width: 200px; height: 200px; animation: spinPiece 12s linear infinite; }
.big-piece .piece-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 20px var(--pink)); }
@keyframes spinPiece { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cta-text { font-family: 'Bowlby One SC', sans-serif; font-size: 48px; color: var(--ghost); animation: wobble 3s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.float-dots { position: fixed; bottom: 24px; right: 24px; display: flex; gap: 10px; z-index: 200; }
.dot { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; animation: dotBounce 3s ease-in-out infinite; }
.dot-pink { background: var(--pink); box-shadow: 0 0 12px var(--pink); animation-duration: 2.5s; }
.dot-cyan { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation-duration: 3s; }
.dot-lime { background: var(--lime); box-shadow: 0 0 12px var(--lime); animation-duration: 3.5s; }
.dot-orange { background: var(--orange); box-shadow: 0 0 12px var(--orange); animation-duration: 4s; }
.dot-violet { background: var(--violet); box-shadow: 0 0 12px var(--violet); animation-duration: 4.5s; }
@keyframes dotBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes neonPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
.heap-card { animation: neonPulse 3s infinite; }
.heap-card:nth-child(1) { animation-delay: 0s; }
.heap-card:nth-child(2) { animation-delay: 0.5s; }
.heap-card:nth-child(3) { animation-delay: 1s; }
.heap-card:nth-child(4) { animation-delay: 1.5s; }
.heap-card:nth-child(5) { animation-delay: 2s; }
.heap-card:nth-child(6) { animation-delay: 2.5s; }

@media (max-width: 768px) {
    .scatter-letter { font-size: 40px; }
    .heap-card { position: relative; width: 100%; top: auto !important; left: auto !important; margin-bottom: 16px; transform: rotate(-3deg); }
    .cta-text { font-size: 28px; }
    .big-piece { width: 140px; height: 140px; }
}