/* ggoomimi.com - Fairycore Dreamscape */

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

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, #FFF0F5 0%, #FFF0F5 15%, #F8EEFA 40%, #F3EAFF 65%, #F0E6FF 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Karla', sans-serif;
    color: #5B4A7A;
}

/* Aurora Streaks */
.aurora-streaks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.aurora-band {
    position: absolute;
    width: 200%;
    height: 300px;
}

.aurora-band-1 {
    top: 10%;
    left: -30%;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 182, 193, 0.05) 50%, transparent 70%);
    transform: rotate(-15deg);
}

.aurora-band-2 {
    top: 45%;
    left: -20%;
    background: linear-gradient(135deg, transparent 30%, rgba(212, 160, 232, 0.05) 50%, transparent 70%);
    transform: rotate(-8deg);
}

.aurora-band-3 {
    top: 75%;
    left: -25%;
    background: linear-gradient(135deg, transparent 30%, rgba(181, 234, 215, 0.05) 50%, transparent 70%);
    transform: rotate(-12deg);
}

/* Home Glyph */
.home-glyph {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 100;
    opacity: 0.3;
    transition: opacity 0.6s ease;
    text-decoration: none;
}

.home-glyph:hover {
    opacity: 0.6;
}

/* Cloud Sections */
.cloud {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cloud-1 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-2 {
    min-height: 120vh;
    padding: 120px 5vw;
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: flex-start;
}

.cloud-3 {
    min-height: 120vh;
    padding: 120px 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-4 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-5 {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 120px;
}

/* Cloud Containers */
.cloud-container {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 40% 60% 55% 45% / 55% 45% 40% 60%;
    box-shadow: 0 8px 32px rgba(212, 160, 232, 0.15);
    padding: 48px;
    position: relative;
}

.cloud-container-hero {
    max-width: 600px;
    text-align: center;
    padding: 64px 80px;
}

.cloud-container-left {
    max-width: 520px;
    margin-left: 10vw;
}

.cloud-container-right {
    max-width: 480px;
    margin-left: 15vw;
}

.cloud-container-garden {
    max-width: 640px;
}

.cloud-container-return {
    max-width: 400px;
    text-align: center;
    padding: 48px 64px;
}

/* Typography */
.hero-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 64px);
    color: #5B4A7A;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: 22px;
    color: #D4A0E8;
    transform: rotate(-2deg);
}

.caveat-text {
    font-family: 'Caveat', cursive;
    font-weight: 400;
}

.section-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #5B4A7A;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-bottom: 24px;
}

.body-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: #6B5B7B;
    margin-bottom: 20px;
}

.body-text:last-of-type {
    margin-bottom: 0;
}

.quote-text {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #5B4A7A;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.whisper-line {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: #5B4A7A;
    text-align: center;
    line-height: 1.3;
}

.whisper-text {
    text-align: center;
}

.return-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #5B4A7A;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.return-line {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: #9B8BA8;
}

/* Annotations */
.annotation {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #D4A0E8;
    opacity: 0.6;
    display: inline-block;
}

.annotation-1 {
    transform: rotate(-5deg);
    margin-left: 12vw;
    margin-top: -40px;
}

.annotation-2 {
    display: block;
    margin-top: 16px;
    transform: rotate(3deg);
    text-align: right;
}

.annotation-3 {
    display: block;
    margin-top: 16px;
    transform: rotate(-3deg);
}

/* Floating Orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: float-drift 10s ease-in-out infinite alternate;
}

.orb-pink {
    background: #FFB6C1;
    opacity: 0.2;
}

.orb-lavender {
    background: #D4A0E8;
    opacity: 0.2;
}

.orb-mint {
    background: #B5EAD7;
    opacity: 0.25;
}

/* Cloud 1 orbs */
.orb-1 {
    width: 50px;
    height: 50px;
    top: 25%;
    left: 30%;
    animation-duration: 10s;
}

.orb-2 {
    width: 35px;
    height: 35px;
    top: 40%;
    right: 25%;
    animation-duration: 12s;
    animation-delay: -3s;
}

.orb-3 {
    width: 45px;
    height: 45px;
    bottom: 30%;
    left: 55%;
    animation-duration: 8s;
    animation-delay: -5s;
}

/* Cloud 2 orbs */
.orb-4 {
    width: 40px;
    height: 40px;
    top: 10%;
    left: 60%;
    animation-duration: 11s;
}

.orb-5 {
    width: 30px;
    height: 30px;
    top: 50%;
    right: 15%;
    animation-duration: 9s;
    animation-delay: -2s;
}

.orb-6 {
    width: 55px;
    height: 55px;
    bottom: 20%;
    left: 20%;
    animation-duration: 12s;
    animation-delay: -4s;
}

.orb-7 {
    width: 25px;
    height: 25px;
    bottom: 40%;
    right: 30%;
    animation-duration: 10s;
    animation-delay: -6s;
}

/* Cloud 3 orbs */
.orb-8 {
    width: 60px;
    height: 60px;
    top: 15%;
    left: 10%;
    animation-duration: 11s;
}

.orb-9 {
    width: 40px;
    height: 40px;
    top: 30%;
    right: 20%;
    animation-duration: 9s;
    animation-delay: -2s;
}

.orb-10 {
    width: 35px;
    height: 35px;
    bottom: 25%;
    left: 40%;
    animation-duration: 10s;
    animation-delay: -5s;
}

.orb-11 {
    width: 50px;
    height: 50px;
    bottom: 10%;
    right: 35%;
    animation-duration: 12s;
    animation-delay: -3s;
}

.orb-12 {
    width: 20px;
    height: 20px;
    top: 60%;
    left: 65%;
    animation-duration: 8s;
    animation-delay: -7s;
}

/* Cloud 5 orbs */
.orb-13 {
    width: 45px;
    height: 45px;
    top: 30%;
    left: 50%;
    animation-duration: 10s;
}

.orb-fade {
    animation: float-drift-fade 5s ease-in-out forwards;
}

/* Sparkle Dots */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D4A0E8;
    pointer-events: none;
    animation: sparkle-blink 3s ease-in-out infinite;
}

.sparkle-1 { top: 22%; right: 35%; animation-delay: 0s; }
.sparkle-2 { top: 15%; left: 45%; animation-delay: 0.5s; }
.sparkle-3 { top: 55%; right: 25%; animation-delay: 1.2s; }
.sparkle-4 { bottom: 20%; left: 30%; animation-delay: 2.1s; }
.sparkle-5 { top: 8%; left: 25%; animation-delay: 0.3s; }
.sparkle-6 { top: 25%; right: 15%; animation-delay: 1.5s; }
.sparkle-7 { top: 50%; left: 15%; animation-delay: 0.8s; }
.sparkle-8 { bottom: 30%; right: 20%; animation-delay: 2.3s; }
.sparkle-9 { bottom: 15%; left: 55%; animation-delay: 1.8s; }
.sparkle-10 { top: 30%; left: 35%; animation-delay: 0.4s; }
.sparkle-11 { top: 45%; right: 30%; animation-delay: 1.7s; }
.sparkle-12 { bottom: 35%; left: 60%; animation-delay: 2.5s; }
.sparkle-13 { top: 25%; left: 30%; animation-delay: 0.6s; }
.sparkle-14 { bottom: 40%; right: 35%; animation-delay: 1.9s; }

/* Mandala */
.mandala {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
    animation: scale-hover 4s ease-in-out infinite;
}

.mandala-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #D4A0E8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mandala-ring-1 {
    width: 200px;
    height: 200px;
    opacity: 0.2;
}

.mandala-ring-2 {
    width: 140px;
    height: 140px;
    opacity: 0.1;
}

.mandala-ring-3 {
    width: 80px;
    height: 80px;
    opacity: 0.05;
}

/* Animations */
@keyframes float-drift {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-40px);
    }
}

@keyframes float-drift-fade {
    0% {
        transform: translateY(0);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-80px);
        opacity: 0;
    }
}

@keyframes sparkle-blink {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes scale-hover {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blur-to-clear {
    0% {
        filter: blur(6px);
        opacity: 0.5;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

/* Reveal States */
.fade-reveal {
    opacity: 0;
    transform: translateY(20px);
}

.fade-reveal.visible {
    animation: fade-in 1500ms ease-out forwards;
}

.fade-reveal-slow {
    opacity: 0;
    transform: translateY(20px);
}

.fade-reveal-slow.visible {
    animation: fade-in 2000ms ease-out forwards;
}

.blur-focus {
    filter: blur(6px);
    opacity: 0.5;
}

.blur-focus.visible {
    animation: blur-to-clear 800ms ease-out forwards;
}

/* Responsive */
@media (max-width: 768px) {
    .cloud-container {
        padding: 32px;
        border-radius: 30% 50% 45% 40% / 45% 40% 35% 50%;
    }

    .cloud-container-hero {
        padding: 40px 32px;
    }

    .cloud-container-left {
        margin-left: 5vw;
        max-width: 85vw;
    }

    .cloud-container-right {
        margin-left: 8vw;
        max-width: 85vw;
    }

    .cloud-2 {
        gap: 80px;
    }

    .annotation-1 {
        margin-left: 8vw;
    }

    .whisper-line {
        font-size: 28px;
    }
}