/* iggi.boo - Inflated 3D Playful Haunted Toy Store */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background: #1B1040;
    color: #D0C4E0;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    overflow-x: hidden;
}

/* Floating Spheres Background */
#floating-spheres {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sphere {
    position: absolute;
    border-radius: 50%;
    animation: sphereFloat linear infinite;
}

@keyframes sphereFloat {
    0% { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-120vh) rotate(360deg); }
}

/* Hero Section */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 96px;
    color: #F4E7FF;
    display: flex;
    align-items: baseline;
    gap: 0;
    background: linear-gradient(135deg, #C77DFF, #FF6FB7, #6FFFE9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(199, 125, 255, 0.3));
}

.letter {
    display: inline-block;
    transform: scale(0);
    animation: letterBounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.letter[data-index="0"] { animation-delay: 0ms; }
.letter[data-index="1"] { animation-delay: 120ms; }
.letter[data-index="2"] { animation-delay: 240ms; }
.letter[data-index="3"] { animation-delay: 360ms; }
.letter[data-index="4"] { animation-delay: 480ms; }
.letter[data-index="5"] { animation-delay: 600ms; }
.letter[data-index="6"] { animation-delay: 720ms; }
.letter[data-index="7"] { animation-delay: 840ms; }

@keyframes letterBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.hero-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #D0C4E0;
    margin-top: 16px;
    opacity: 0;
    animation: fadeIn 600ms ease-out 1.5s forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.scroll-hint {
    position: absolute;
    bottom: 40px;
    opacity: 0;
    animation: fadeIn 600ms ease-out 2s forwards;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border: 2px solid #C77DFF;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    animation: scrollBob 2s ease-in-out infinite;
}

@keyframes scrollBob {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(8px); }
}

/* Bento Grid */
#bento-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 40px 24px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Bubble Panels */
.bubble-panel {
    border-radius: 24px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(199, 125, 255, 0.15);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bubble-panel.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bubble-panel:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 48px rgba(199, 125, 255, 0.25);
}

.panel-welcome { grid-column: 1 / 6; grid-row: 1 / 3; }
.panel-explore { grid-column: 6 / 13; grid-row: 1 / 2; }
.panel-dream { grid-column: 6 / 9; grid-row: 2 / 3; }
.panel-play { grid-column: 9 / 13; grid-row: 2 / 3; }
.panel-feature { grid-column: 1 / 13; grid-row: 3 / 5; }
.panel-bounce { grid-column: 1 / 5; grid-row: 5 / 6; }
.panel-glow { grid-column: 5 / 9; grid-row: 5 / 6; }
.panel-float { grid-column: 9 / 13; grid-row: 5 / 6; }
.panel-about { grid-column: 1 / 8; grid-row: 6 / 7; }
.panel-contact { grid-column: 8 / 13; grid-row: 6 / 7; }

.bubble-panel h2 {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 36px;
    color: #F4E7FF;
    margin-bottom: 12px;
}

.bubble-panel h3 {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 20px;
    color: #F4E7FF;
    margin-bottom: 8px;
}

.bubble-panel p {
    color: #D0C4E0;
    font-size: 17px;
    line-height: 1.7;
}

/* Bubble Creatures */
.bubble-creature {
    position: absolute;
    top: 16px;
    right: 16px;
}

.creature-body {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: creatureBreathe 3s ease-in-out infinite;
}

.creature-body.small { width: 36px; height: 36px; }

.creature-lilac .creature-body { background: radial-gradient(circle, #C77DFF, #8B6FBF); }
.creature-aqua .creature-body { background: radial-gradient(circle, #6FFFE9, #40B8A8); }
.creature-pink .creature-body { background: radial-gradient(circle, #FF6FB7, #D04A8D); }

@keyframes creatureBreathe {
    0%, 100% { transform: scale(0.98); }
    50% { transform: scale(1.02); }
}

.creature-eye {
    width: 6px;
    height: 6px;
    background: #1B1040;
    border-radius: 50%;
    position: absolute;
    top: 40%;
}
.creature-eye.left { left: 30%; }
.creature-eye.right { right: 30%; }

/* Glow Orbs */
.glow-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    bottom: -20px;
    right: -20px;
    pointer-events: none;
    filter: blur(40px);
}
.orb-pink { background: #FF6FB7; opacity: 0.3; }
.orb-aqua { background: #6FFFE9; opacity: 0.2; }
.orb-lilac { background: #C77DFF; opacity: 0.25; }

/* Ghost Parade */
.ghost-parade {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 32px;
}

.ghost {
    width: 80px;
    animation: ghostBob 4s ease-in-out infinite;
}

.ghost-1 { animation-delay: 0s; }
.ghost-2 { animation-delay: 0.8s; }
.ghost-3 { animation-delay: 1.6s; }

@keyframes ghostBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.feature-content { text-align: center; }

/* Nav Pill */
#nav-pill {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(199, 125, 255, 0.2);
    z-index: 100;
    transition: background 300ms ease;
}

.nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 200ms ease;
}

.nav-btn:hover { background: rgba(199, 125, 255, 0.2); }

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8B6FBF;
    transition: background 200ms ease, transform 200ms ease;
}

.nav-btn.active .nav-dot {
    background: #C77DFF;
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(199, 125, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 56px; }
    #bento-grid { grid-template-columns: 1fr; }
    .bubble-panel { grid-column: 1 !important; grid-row: auto !important; }
    .ghost-parade { gap: 20px; }
    .ghost { width: 60px; }
}