/* yongzoon.net - Scandinavian Candy Portfolio */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --nordic-white: #FAFAF8;
    --candy-pink: #E060A0;
    --candy-teal: #40C8B0;
    --candy-yellow: #F0C840;
    --candy-violet: #8060D0;
    --text-dark: #2A2040;
    --text-body: #3A3050;
}

body {
    background: var(--nordic-white);
    color: var(--text-dark);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    overflow-x: hidden;
    position: relative;
}

/* Dotted Divider */
.dotted-divider {
    position: fixed;
    left: 35%;
    top: 0;
    width: 2px;
    height: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(42, 32, 64, 0.15) 0px,
        rgba(42, 32, 64, 0.15) 2px,
        transparent 2px,
        transparent 6px
    );
    z-index: 5;
    animation: dividerDraw 0.6s ease forwards 0.2s;
}
@keyframes dividerDraw { to { height: 100%; } }

/* Bubbles */
.bubble {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: bubbleBounce 3s ease-in-out infinite alternate;
}
.bubble-1 { width: 40px; height: 40px; background: rgba(224, 96, 160, 0.15); top: 12%; left: 32%; }
.bubble-2 { width: 24px; height: 24px; background: rgba(64, 200, 176, 0.15); top: 35%; left: 33%; animation-delay: 0.5s; }
.bubble-3 { width: 50px; height: 50px; background: rgba(240, 200, 64, 0.15); top: 55%; right: 8%; animation-delay: 1s; }
.bubble-4 { width: 30px; height: 30px; background: rgba(128, 96, 208, 0.15); top: 75%; left: 31%; animation-delay: 1.5s; }
.bubble-5 { width: 20px; height: 20px; background: rgba(224, 96, 160, 0.15); top: 90%; right: 15%; animation-delay: 0.8s; }
@keyframes bubbleBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

/* Asymmetric Sections */
.asym-section {
    display: flex;
    min-height: 70vh;
    position: relative;
    z-index: 2;
}
.section-hero { min-height: 80vh; align-items: center; }

.asym-left {
    flex: 0 0 35%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 48px 24px 48px 60px;
    position: relative;
}
.asym-right {
    flex: 0 0 65%;
    padding: 48px 60px 48px 40px;
    display: flex;
    align-items: center;
}

/* Section Labels */
.section-label {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--text-dark);
    text-align: right;
}
.sticky-label {
    position: sticky;
    top: 48px;
}

/* Color Blocks */
.color-block {
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: -1;
}
.color-pink { background: rgba(224, 96, 160, 0.1); }
.color-teal { background: rgba(64, 200, 176, 0.1); }

/* Content Blocks */
.content-block {
    opacity: 0;
    transform: translateY(30px);
}
.content-block.visible {
    animation: bounceEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bounceEnter {
    0% { opacity: 0; transform: translateY(30px); }
    70% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}
.content-block:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease;
}

/* Typography */
.display-title {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}
.dot-net {
    color: var(--candy-pink);
}
.body-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.75;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.data-link {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--candy-pink);
    display: block;
}

/* Illustrations */
.illustration {
    position: absolute;
    left: calc(35% - 40px);
    width: 80px;
    height: 80px;
    z-index: 6;
    transition: transform 0.2s ease;
}
.illustration:hover {
    animation: wiggle 0.2s ease;
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}
.illo-hero { top: 30%; }
.illo-work { top: 20%; }
.illo-method { top: 25%; }
.illo-about { top: 20%; }

/* Footer */
.site-footer {
    text-align: center;
    padding: 3rem 2rem;
    position: relative;
    z-index: 2;
}
.footer-text {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--candy-pink);
}

@media (max-width: 768px) {
    .asym-section { flex-direction: column; }
    .asym-left { flex: none; padding: 24px 1.5rem; justify-content: flex-start; }
    .asym-right { flex: none; padding: 0 1.5rem 24px; }
    .dotted-divider { display: none; }
    .illustration { display: none; }
    .sticky-label { position: static; }
    .color-block { display: none; }
}