/* prototype.moe -- Kawaii Softcore Pastel */
:root {
    --pink: #FF6B9D;
    --baby-blue: #B3E5FC;
    --lavender: #D4B3FF;
    --cream: #FFF5F9;
    --plum: #5A4E6B;
    --lemon: #FFE66D;
    --mint: #A8E6CF;
    --rose: #FFB3D9;
    --lavender-cream: #F5E6F0;
    --mauve: #C8A2D4;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; color: var(--plum); background: linear-gradient(135deg, #FFF5F9 0%, #F0E6FF 50%, #E6F5FF 100%); min-height: 100vh; overflow-x: hidden; }

.sparkle-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sparkle { position: absolute; opacity: 0; animation: sparkle-float linear infinite; }
@keyframes sparkle-float {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

.blob { position: fixed; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0; }
.blob-1 { width: 400px; height: 400px; background: var(--lavender); opacity: 0.08; top: 20%; left: -10%; }
.blob-2 { width: 300px; height: 300px; background: var(--baby-blue); opacity: 0.06; top: 50%; right: -5%; }
.blob-3 { width: 350px; height: 350px; background: var(--rose); opacity: 0.06; bottom: 10%; left: 30%; }

main { position: relative; z-index: 1; padding: 0 24px; max-width: 900px; margin: 0 auto; }

.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-circle { width: min(80vw, 500px); height: min(80vw, 500px); border-radius: 50%; border: 4px solid; border-image: linear-gradient(135deg, var(--rose), var(--baby-blue)) 1; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 60px rgba(255,179,217,0.3), 0 0 120px rgba(179,229,252,0.15); background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); opacity: 0; transform: scale(0); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hero-circle.on { opacity: 1; transform: scale(1); }

.kawaii-face { width: 60px; height: 40px; margin-bottom: 16px; }
.face-small { width: 40px; height: 28px; margin-bottom: 8px; }
.eye { animation: blink 4s ease-in-out infinite; }
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.hero-title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: clamp(32px, 8vw, 72px); color: var(--pink); letter-spacing: 0.04em; }
.hero-sub { font-family: 'Caveat', cursive; font-size: 18px; color: var(--mauve); transform: rotate(-2deg); margin-top: 4px; }
.heart-pulse { width: 24px; height: 24px; margin-top: 16px; animation: pulse-heart 2s ease-in-out infinite; }
@keyframes pulse-heart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.pill-divider { display: flex; justify-content: center; gap: 8px; padding: 32px 0; }
.pill { width: 60px; height: 8px; border-radius: 4px; }
.pill-pink { background: var(--rose); }
.pill-blue { background: var(--baby-blue); }
.pill-lavender { background: var(--lavender); }

.bubble-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 -8px; }

.bubble { border-radius: 50px; padding: 2rem 2.5rem; box-shadow: inset 0 2px 8px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.05); position: relative; opacity: 0; transform: scale(0.85) translateY(30px); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease, box-shadow 0.3s; backdrop-filter: blur(4px); }
.bubble.visible { opacity: 1; transform: scale(1) translateY(0); }
.bubble:hover { transform: scale(1) translateY(-4px); box-shadow: inset 0 2px 8px rgba(0,0,0,0.04), 0 8px 30px rgba(255,179,217,0.2); }

.bubble-large { flex: 1 1 340px; max-width: 500px; }
.bubble-medium { flex: 1 1 260px; max-width: 380px; }
.bubble-small { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.bubble-pink { background: rgba(255,179,217,0.25); border: 2px solid rgba(255,179,217,0.4); }
.bubble-blue { background: rgba(179,229,252,0.25); border: 2px solid rgba(179,229,252,0.4); }
.bubble-lavender { background: rgba(212,179,255,0.25); border: 2px solid rgba(212,179,255,0.4); }
.bubble-mint { background: rgba(168,230,207,0.25); border: 2px solid rgba(168,230,207,0.4); }
.bubble-yellow { background: rgba(255,230,109,0.2); border: 2px solid rgba(255,230,109,0.35); }

.float-1 { animation: float-bubble 6s ease-in-out infinite; }
.float-2 { animation: float-bubble 7s ease-in-out infinite 1s; }
.float-3 { animation: float-bubble 5s ease-in-out infinite 2s; }
@keyframes float-bubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bubble.visible.float-1 { animation: float-bubble 6s ease-in-out infinite; }
.bubble.visible.float-2 { animation: float-bubble 7s ease-in-out infinite 1s; }
.bubble.visible.float-3 { animation: float-bubble 5s ease-in-out infinite 2s; }

.bubble-label { font-family: 'Caveat', cursive; font-size: 14px; color: var(--mauve); display: block; margin-bottom: 4px; transform: rotate(-2deg); }
.bubble-title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 24px; color: var(--pink); margin-bottom: 8px; }
.bubble-text { color: var(--plum); }

.heart-icon { width: 32px; height: 32px; }

.bottom-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; padding: 12px 24px; border-radius: 40px; background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); z-index: 100; }
.nav-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: transform 0.3s; }
.nav-dot:hover { transform: scale(1.15); }
.nav-dot-pink { background: rgba(255,107,157,0.15); color: var(--pink); }
.nav-dot-blue { background: rgba(179,229,252,0.3); color: #5DADE2; }
.nav-dot-lavender { background: rgba(212,179,255,0.2); color: #9B59B6; }

@media (max-width: 768px) {
    .hero-circle { width: 90vw; height: 90vw; }
    .bubble-large, .bubble-medium { flex: 1 1 100%; max-width: 100%; }
}