/* iggi.boo - Blobitecture Digital Experience */
/* Palette: Muted Vintage */
:root {
    --bone-linen: #f2ece3;
    --oxidized-sage: #8a9e8a;
    --dusty-terracotta: #c4917a;
    --aged-mauve: #9c7e96;
    --charred-umber: #3d3632;
    --parchment-gold: #c9b896;
    --warm-mid: #e8ddd0;
    --warm-deep: #ddd5c8;
    --glass-tint: rgba(138, 158, 138, 0.15);
    --glass-border: rgba(138, 158, 138, 0.30);
    --bg-x: 50%;
    --bg-y: 30%;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    color: var(--charred-umber);
    background: radial-gradient(ellipse at var(--bg-x) var(--bg-y), var(--bone-linen) 0%, var(--warm-mid) 50%, var(--warm-deep) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Spore Canvas */
#sporeCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* Navigation Pills */
#blobNav {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-end;
}

.nav-pill {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charred-umber);
    background: rgba(242, 236, 227, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.nav-pill:hover {
    background: rgba(242, 236, 227, 0.7);
    transform: scale(1.15);
    font-weight: 500;
    padding: 0.5rem 1.8rem;
}

/* Zones */
.zone {
    position: relative;
    width: 100%;
}

/* Hero Zone */
.hero-zone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-blob {
    width: min(80vw, 800px);
    height: min(80vw, 800px);
    max-height: 80vh;
    background: linear-gradient(135deg, var(--oxidized-sage) 0%, var(--aged-mauve) 100%);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: blobBreathe 12s ease-in-out infinite;
    position: relative;
    box-shadow: 0 20px 80px rgba(61, 54, 50, 0.12), 0 8px 32px rgba(138, 158, 138, 0.15);
}

.hero-content {
    text-align: center;
    padding: 3rem;
    max-width: 600px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
    color: var(--bone-linen);
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 20px rgba(61, 54, 50, 0.15);
}

.hero-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.01em;
    color: rgba(242, 236, 227, 0.85);
    line-height: 1.5;
}

@keyframes blobBreathe {
    0%   { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
    25%  { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
    50%  { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
    75%  { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; }
    100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
}

/* Discovery Zone */
.discovery-zone {
    padding: clamp(2rem, 6vw, 8rem) clamp(1rem, 4vw, 6rem);
}

.blob-cluster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1.5rem, 3vw, 4rem);
    margin-bottom: clamp(4rem, 8vw, 10rem);
    position: relative;
}

.cluster-1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1.2fr 0.8fr;
}

.cluster-2 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr 0.6fr 0.8fr;
}

.cluster-3 {
    max-width: 950px;
    margin-left: 10%;
    grid-template-columns: 1.4fr 0.6fr;
}

/* Content Blobs */
.content-blob {
    padding: clamp(1.5rem, 3vw, 3rem);
    position: relative;
    opacity: 0.3;
    transform: scale(0.85);
    transition: opacity 1200ms ease-out, transform 1200ms ease-out, border-radius 1200ms ease-out;
}

.content-blob.revealed {
    opacity: 1;
    transform: scale(1);
}

.blob-primary {
    background: linear-gradient(135deg, var(--oxidized-sage) 0%, rgba(156, 126, 150, 0.6) 100%);
    border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
}

.blob-primary.revealed {
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

.blob-secondary {
    background: linear-gradient(135deg, var(--dusty-terracotta) 0%, rgba(201, 184, 150, 0.7) 100%);
    border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%;
}

.blob-secondary.revealed {
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
}

.blob-accent {
    background: linear-gradient(135deg, var(--aged-mauve) 0%, rgba(138, 158, 138, 0.6) 100%);
    border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%;
}

.blob-accent.revealed {
    border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;
}

/* Glassmorphic Cards */
.glass-card {
    background: rgba(242, 236, 227, 0.45);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(138, 158, 138, 0.25);
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
    box-shadow: 0 8px 32px rgba(61, 54, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 400ms ease, backdrop-filter 400ms ease;
}

.content-blob.revealed .glass-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}

.glass-card:hover {
    transform: scale(1.03);
    background: rgba(242, 236, 227, 0.6);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

.glass-card h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
    color: var(--charred-umber);
    margin-bottom: 1rem;
}

.glass-card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--charred-umber);
    margin-bottom: 0.8rem;
}

.glass-card p {
    color: var(--charred-umber);
    opacity: 0;
    transition: opacity 600ms ease-out;
    transition-delay: 600ms;
}

.content-blob.revealed .glass-card p {
    opacity: 1;
}

.card-label {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aged-mauve);
    margin-bottom: 0.8rem;
    opacity: 0;
    transition: opacity 600ms ease-out;
    transition-delay: 600ms;
}

.content-blob.revealed .card-label {
    opacity: 1;
}

.card-quote {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.6;
}

.card-pullquote {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-align: center;
}

/* Overlapping effect with negative margins */
.cluster-2 .content-blob:nth-child(2) {
    margin-top: -2rem;
}

.cluster-2 .content-blob:nth-child(3) {
    margin-top: -3rem;
}

.cluster-3 .content-blob:nth-child(2) {
    margin-top: 2rem;
}

/* Deep Zone */
.deep-zone {
    padding: clamp(4rem, 8vw, 10rem) 0;
}

.deep-blob-full {
    width: 100%;
    min-height: 60vh;
    background: linear-gradient(135deg, var(--oxidized-sage) 0%, var(--aged-mauve) 50%, var(--dusty-terracotta) 100%);
    clip-path: polygon(
        0% 12%, 5% 5%, 12% 2%, 20% 0%, 30% 1%, 40% 3%, 50% 0%, 60% 2%, 70% 1%, 80% 4%, 88% 2%, 95% 6%, 100% 10%,
        100% 88%, 96% 94%, 90% 97%, 82% 100%, 72% 98%, 62% 100%, 50% 97%, 38% 100%, 28% 98%, 18% 100%, 10% 96%, 4% 93%, 0% 88%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 6vw, 8rem);
    opacity: 0.3;
    transform: scale(0.92);
    transition: opacity 1200ms ease-out, transform 1200ms ease-out;
}

.deep-blob-full.revealed {
    opacity: 1;
    transform: scale(1);
}

.deep-inner {
    max-width: 700px;
    width: 100%;
}

.glass-card-deep {
    background: rgba(242, 236, 227, 0.5);
    border-radius: 35% 65% 50% 50% / 45% 55% 45% 55%;
    padding: clamp(2rem, 4vw, 4rem);
}

.glass-card-deep h2 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
}

.cluster-deep {
    max-width: 1000px;
    margin: clamp(3rem, 6vw, 8rem) auto 0;
    padding: 0 clamp(1rem, 4vw, 6rem);
    grid-template-columns: 1fr 1fr;
}

/* Exit Zone */
.exit-zone {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.exit-blob {
    width: clamp(180px, 30vw, 300px);
    height: clamp(180px, 30vw, 300px);
    background: linear-gradient(135deg, var(--parchment-gold) 0%, var(--dusty-terracotta) 100%);
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: blobBreathe 12s ease-in-out infinite;
    animation-delay: -6s;
    box-shadow: 0 12px 48px rgba(61, 54, 50, 0.1);
    opacity: 0.3;
    transform: scale(0.85);
    transition: opacity 1200ms ease-out, transform 1200ms ease-out;
}

.exit-blob.revealed {
    opacity: 1;
    transform: scale(1);
}

.exit-content {
    text-align: center;
    padding: 1.5rem;
}

.exit-text {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--bone-linen);
    margin-bottom: 0.4rem;
}

.exit-coda {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: rgba(242, 236, 227, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .cluster-1,
    .cluster-2,
    .cluster-3,
    .cluster-deep {
        grid-template-columns: 1fr;
    }

    .cluster-2 .content-blob:nth-child(2),
    .cluster-2 .content-blob:nth-child(3),
    .cluster-3 .content-blob:nth-child(2) {
        margin-top: 0;
    }

    #blobNav {
        top: 1rem;
        right: 1rem;
    }

    .nav-pill {
        padding: 0.4rem 1rem;
        font-size: 0.72rem;
    }

    .hero-blob {
        width: 90vw;
        height: 90vw;
    }
}

@media (max-width: 480px) {
    .deep-blob-full {
        clip-path: none;
        border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    }
}