/* ============================================================
   ppuzzl.in -- Surreal Dreamscape Portal
   Colors: #E8D5F5, #FFD5E5, #D5F5E3, #2D1B3D, #F5D78E, #B8E6FF
   Fonts: Syne (display 800), Outfit (body 400)
   ============================================================ */

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

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

body {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #2D1B3D;
    background: #E8D5F5;
    overflow-x: hidden;
}

/* ============================================================
   DREAM ZONES -- Each section is a 100vh dreamscape
   ============================================================ */

.dream-zone {
    position: relative;
    width: 100%;
    min-height: 200vh;
    overflow: hidden;
}

.zone-lilac {
    background: #E8D5F5;
}

.zone-pink {
    background: #FFD5E5;
}

.zone-mint {
    background: #D5F5E3;
}

.zone-sky {
    background: #B8E6FF;
}

.zone-deep {
    background: #E8D5F5;
    min-height: 100vh;
}

/* ============================================================
   ZONE CONTENT -- Sticky frame for scroll-based transforms
   ============================================================ */

.zone-content {
    position: relative;
    height: 200vh;
    width: 100%;
}

.zone-deep .zone-content {
    height: 100vh;
}

.sticky-frame {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.hero-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 6rem);
    color: #2D1B3D;
    letter-spacing: -0.02em;
    text-align: center;
    transform-origin: center center;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.hero-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #2D1B3D;
    opacity: 0.6;
    margin-top: 1rem;
    letter-spacing: 0.15em;
    text-transform: lowercase;
}

.zone-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: #2D1B3D;
    text-align: center;
    max-width: 80vw;
    transform-origin: center center;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.zone-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    color: #2D1B3D;
    opacity: 0.7;
    text-align: center;
    max-width: 500px;
    margin-top: 1.5rem;
    padding: 0 2rem;
}

.finale-title {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.finale-title.revealed {
    opacity: 1;
}

/* ============================================================
   FLOATING BLOBS -- Amorphous shapes drifting in dreamscapes
   ============================================================ */

.blob {
    position: absolute;
    border-radius: 40% 60% 65% 35% / 55% 40% 60% 45%;
    opacity: 0.4;
    z-index: 1;
    will-change: transform;
    pointer-events: none;
}

/* Zone 1 Blobs -- Lilac */
.blob-1 {
    width: 300px;
    height: 300px;
    background: #FFD5E5;
    top: 10%;
    left: -5%;
    animation: drift1 18s ease-in-out infinite;
}

.blob-2 {
    width: 200px;
    height: 220px;
    background: #B8E6FF;
    top: 30%;
    right: -3%;
    border-radius: 55% 45% 50% 50% / 40% 60% 40% 60%;
    animation: drift2 22s ease-in-out infinite;
}

.blob-3 {
    width: 150px;
    height: 160px;
    background: #F5D78E;
    bottom: 25%;
    left: 15%;
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    animation: drift3 15s ease-in-out infinite;
}

/* Zone 2 Blobs -- Pink */
.blob-4 {
    width: 260px;
    height: 280px;
    background: #E8D5F5;
    top: 15%;
    right: 5%;
    animation: drift2 20s ease-in-out infinite;
}

.blob-5 {
    width: 180px;
    height: 190px;
    background: #D5F5E3;
    top: 50%;
    left: 8%;
    border-radius: 50% 50% 40% 60% / 60% 40% 55% 45%;
    animation: drift1 16s ease-in-out infinite;
}

.blob-6 {
    width: 120px;
    height: 130px;
    background: #F5D78E;
    bottom: 20%;
    right: 20%;
    border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
    animation: drift3 19s ease-in-out infinite;
}

/* Zone 3 Blobs -- Mint */
.blob-7 {
    width: 280px;
    height: 260px;
    background: #FFD5E5;
    top: 20%;
    left: -2%;
    border-radius: 55% 45% 40% 60% / 50% 50% 55% 45%;
    animation: drift3 21s ease-in-out infinite;
}

.blob-8 {
    width: 200px;
    height: 210px;
    background: #B8E6FF;
    top: 45%;
    right: 3%;
    animation: drift1 17s ease-in-out infinite;
}

.blob-9 {
    width: 140px;
    height: 150px;
    background: #E8D5F5;
    bottom: 30%;
    left: 25%;
    border-radius: 60% 40% 50% 50% / 45% 55% 50% 50%;
    animation: drift2 14s ease-in-out infinite;
}

/* Zone 4 Blobs -- Sky */
.blob-10 {
    width: 240px;
    height: 250px;
    background: #D5F5E3;
    top: 10%;
    right: 10%;
    border-radius: 50% 50% 55% 45% / 55% 45% 50% 50%;
    animation: drift2 23s ease-in-out infinite;
}

.blob-11 {
    width: 180px;
    height: 170px;
    background: #F5D78E;
    top: 55%;
    left: 5%;
    animation: drift3 18s ease-in-out infinite;
}

.blob-12 {
    width: 130px;
    height: 140px;
    background: #FFD5E5;
    bottom: 15%;
    right: 25%;
    border-radius: 45% 55% 50% 50% / 50% 50% 55% 45%;
    animation: drift1 20s ease-in-out infinite;
}

/* Zone 5 Blobs -- Deep */
.blob-13 {
    width: 320px;
    height: 300px;
    background: #FFD5E5;
    top: 10%;
    left: -8%;
    opacity: 0.3;
    animation: drift1 25s ease-in-out infinite;
}

.blob-14 {
    width: 250px;
    height: 260px;
    background: #D5F5E3;
    bottom: 10%;
    right: -5%;
    border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;
    opacity: 0.3;
    animation: drift2 22s ease-in-out infinite;
}

/* ============================================================
   LENS FLARE -- Radial gradient light blooms in Soft Gold
   ============================================================ */

.lens-flare {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 215, 142, 0.5) 0%, rgba(245, 215, 142, 0.15) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.flare-1 {
    width: 500px;
    height: 500px;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.flare-2 {
    width: 400px;
    height: 400px;
    top: -80px;
    right: 10%;
}

.flare-3 {
    width: 450px;
    height: 450px;
    bottom: -60px;
    left: 20%;
}

.flare-4 {
    width: 350px;
    height: 350px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.flare-5 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245, 215, 142, 0.35) 0%, rgba(245, 215, 142, 0.1) 40%, transparent 65%);
}

/* ============================================================
   HIDDEN ELEMENTS -- Progressive disclosure on deep scroll
   ============================================================ */

.hidden-element {
    position: fixed;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: #F5D78E;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.6s ease-out;
    user-select: none;
}

.hidden-element.visible {
    opacity: 0.25;
}

.hidden-1 {
    font-size: 8rem;
    top: 20%;
    left: 10%;
}

.hidden-2 {
    font-size: 6rem;
    top: 60%;
    right: 12%;
}

.hidden-3 {
    font-size: 10rem;
    top: 40%;
    left: 55%;
}

.hidden-4 {
    font-size: 5rem;
    bottom: 25%;
    left: 30%;
}

.hidden-5 {
    font-size: 7rem;
    top: 15%;
    right: 25%;
}

/* ============================================================
   BLOB DRIFT ANIMATIONS
   ============================================================ */

@keyframes drift1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -20px) rotate(5deg);
    }
    50% {
        transform: translate(-15px, 25px) rotate(-3deg);
    }
    75% {
        transform: translate(20px, 10px) rotate(4deg);
    }
}

@keyframes drift2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-25px, 15px) rotate(-4deg);
    }
    50% {
        transform: translate(20px, -30px) rotate(6deg);
    }
    75% {
        transform: translate(-10px, -15px) rotate(-2deg);
    }
}

@keyframes drift3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(18px, 22px) rotate(3deg);
    }
    66% {
        transform: translate(-22px, -12px) rotate(-5deg);
    }
}

/* ============================================================
   SCROLL-BASED SCALE INDICATOR (applied via JS)
   ============================================================ */

.scale-up {
    transform: scale(1.15);
}

.scale-down {
    transform: scale(0.85);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    .blob {
        opacity: 0.3;
    }

    .blob-1, .blob-4, .blob-7, .blob-10, .blob-13 {
        width: 180px;
        height: 180px;
    }

    .blob-2, .blob-5, .blob-8, .blob-11, .blob-14 {
        width: 120px;
        height: 130px;
    }

    .blob-3, .blob-6, .blob-9, .blob-12 {
        width: 80px;
        height: 90px;
    }

    .lens-flare {
        opacity: 0.6;
    }

    .hidden-element {
        font-size: 4rem !important;
    }

    .zone-text {
        max-width: 90vw;
    }
}

@media (max-width: 480px) {
    .hero-subtitle {
        letter-spacing: 0.08em;
    }

    .blob {
        opacity: 0.2;
    }
}