/* --- Welcome Page Content & Atmospheric Effects --- */
.cloud-section-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

/* --- Atmospheric Mist Layers --- */
.cloud-mist {
    position: absolute;
    width: 200%;
    height: 60px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.14) 15%,
        rgba(240, 245, 255, 0.16) 35%,
        rgba(255, 255, 255, 0.12) 55%,
        rgba(240, 248, 255, 0.14) 75%,
        transparent 100%
    );
    filter: blur(18px);
}

.cloud-mist--1 {
    top: 15%;
    left: -50%;
    height: 50px;
    animation: mist-drift-slow 40s linear infinite;
}

.cloud-mist--2 {
    top: 42%;
    left: -80%;
    height: 70px;
    opacity: 0;
    animation: mist-drift-medium 25s linear 3s infinite;
}

.cloud-mist--3 {
    top: 72%;
    left: -30%;
    height: 45px;
    animation: mist-drift-fast 15s linear 6s infinite;
}

.cloud-mist--4 {
    top: 88%;
    left: -60%;
    height: 55px;
    animation: mist-drift-medium 30s linear 10s infinite reverse;
}

@keyframes mist-drift-slow {
    0%   { transform: translateX(0); opacity: 0; }
    5%   { opacity: 0.14; }
    90%  { opacity: 0.14; }
    100% { transform: translateX(80%); opacity: 0; }
}

@keyframes mist-drift-medium {
    0%   { transform: translateX(0); opacity: 0; }
    8%   { opacity: 0.16; }
    88%  { opacity: 0.16; }
    100% { transform: translateX(75%); opacity: 0; }
}

@keyframes mist-drift-fast {
    0%   { transform: translateX(0); opacity: 0; }
    10%  { opacity: 0.12; }
    85%  { opacity: 0.12; }
    100% { transform: translateX(70%); opacity: 0; }
}

/* --- Twinkling Stars --- */
.cloud-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.star {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 248, 230, 0.9) 0%, rgba(255, 240, 200, 0.4) 40%, transparent 70%);
    opacity: 0;
}

/* Star positions — scattered toward edges, avoiding center */
.star--1  { width: 2px;   height: 2px;   top: 5%;   left: 8%;   animation: star-twinkle 2.8s ease-in-out 0.2s infinite; }
.star--2  { width: 2.5px; height: 2.5px; top: 12%;  left: 22%;  animation: star-twinkle 3.5s ease-in-out 1.1s infinite; }
.star--3  { width: 1.5px; height: 1.5px; top: 8%;   right: 15%; animation: star-twinkle 2.2s ease-in-out 0.8s infinite; }
.star--4  { width: 3px;   height: 3px;   top: 3%;   right: 28%; animation: star-twinkle 4s ease-in-out 2.4s infinite; }
.star--5  { width: 2px;   height: 2px;   top: 18%;  right: 5%;  animation: star-twinkle 2.5s ease-in-out 0.5s infinite; }
.star--6  { width: 1.5px; height: 1.5px; top: 22%;  left: 4%;   animation: star-twinkle-drift 3.2s ease-in-out 1.8s infinite; }
.star--7  { width: 2.5px; height: 2.5px; top: 7%;   left: 42%;  animation: star-twinkle 3.8s ease-in-out 3.1s infinite; }
.star--8  { width: 2px;   height: 2px;   top: 15%;  right: 38%; animation: star-twinkle 2.1s ease-in-out 0.3s infinite; }
.star--9  { width: 3px;   height: 3px;   top: 28%;  left: 12%;  animation: star-twinkle-drift 3.6s ease-in-out 2.0s infinite; }
.star--10 { width: 1.5px; height: 1.5px; top: 32%;  right: 10%; animation: star-twinkle 2.9s ease-in-out 1.5s infinite; }
.star--11 { width: 2px;   height: 2px;   top: 55%;  left: 6%;   animation: star-twinkle 3.3s ease-in-out 0.9s infinite; }
.star--12 { width: 2.5px; height: 2.5px; top: 60%;  right: 8%;  animation: star-twinkle-drift 4s ease-in-out 2.7s infinite; }
.star--13 { width: 1.5px; height: 1.5px; top: 68%;  left: 18%;  animation: star-twinkle 2.4s ease-in-out 3.5s infinite; }
.star--14 { width: 2px;   height: 2px;   top: 75%;  right: 22%; animation: star-twinkle 3.1s ease-in-out 1.2s infinite; }
.star--15 { width: 3px;   height: 3px;   top: 82%;  left: 10%;  animation: star-twinkle 2.6s ease-in-out 0.6s infinite; }
.star--16 { width: 2px;   height: 2px;   top: 85%;  right: 15%; animation: star-twinkle-drift 3.4s ease-in-out 2.3s infinite; }
.star--17 { width: 1.5px; height: 1.5px; top: 90%;  left: 30%;  animation: star-twinkle 2.7s ease-in-out 1.7s infinite; }
.star--18 { width: 2.5px; height: 2.5px; top: 92%;  right: 32%; animation: star-twinkle 3.9s ease-in-out 0.4s infinite; }
.star--19 { width: 2px;   height: 2px;   top: 4%;   left: 55%;  animation: star-twinkle-drift 2.3s ease-in-out 3.0s infinite; }
.star--20 { width: 1.5px; height: 1.5px; top: 10%;  right: 48%; animation: star-twinkle 3.0s ease-in-out 1.4s infinite; }
.star--21 { width: 2.5px; height: 2.5px; top: 95%;  left: 50%;  animation: star-twinkle 2.8s ease-in-out 2.6s infinite; }
.star--22 { width: 2px;   height: 2px;   top: 78%;  right: 42%; animation: star-twinkle-drift 3.7s ease-in-out 0.7s infinite; }
.star--23 { width: 1.5px; height: 1.5px; top: 48%;  left: 3%;   animation: star-twinkle 2.5s ease-in-out 3.3s infinite; }
.star--24 { width: 3px;   height: 3px;   top: 42%;  right: 4%;  animation: star-twinkle 3.2s ease-in-out 1.0s infinite; }
.star--25 { width: 2px;   height: 2px;   top: 88%;  left: 72%;  animation: star-twinkle-drift 2.9s ease-in-out 2.1s infinite; }
.star--26 { width: 2.5px; height: 2.5px; top: 6%;   right: 62%; animation: star-twinkle 3.5s ease-in-out 0.1s infinite; }
.star--27 { width: 1.5px; height: 1.5px; top: 65%;  left: 88%;  animation: star-twinkle 2.2s ease-in-out 2.9s infinite; }
.star--28 { width: 2px;   height: 2px;   top: 35%;  left: 92%;  animation: star-twinkle-drift 3.6s ease-in-out 1.6s infinite; }
.star--29 { width: 3px;   height: 3px;   top: 52%;  right: 88%; animation: star-twinkle 4s ease-in-out 0.8s infinite; }
.star--30 { width: 2px;   height: 2px;   top: 20%;  left: 85%;  animation: star-twinkle 2.6s ease-in-out 3.2s infinite; }

/* Stars 31-50: Extended starfield for denser sky */
.star--31 { width: 1.5px; height: 1.5px; top: 3%;   left: 12%;  animation: star-twinkle 3.1s ease-in-out 0.3s infinite; }
.star--32 { width: 2px;   height: 2px;   top: 8%;   left: 38%;  animation: star-twinkle-drift 4.2s ease-in-out 1.1s infinite; }
.star--33 { width: 2.5px; height: 2.5px; top: 2%;   right: 25%; animation: star-twinkle 2.9s ease-in-out 2.4s infinite; }
.star--34 { width: 1.5px; height: 1.5px; top: 12%;  left: 68%;  animation: star-twinkle 3.8s ease-in-out 0.6s infinite; }
.star--35 { width: 2px;   height: 2px;   top: 5%;   right: 55%; animation: star-twinkle-drift 2.4s ease-in-out 3.5s infinite; }
.star--36 { width: 1px;   height: 1px;   top: 15%;  left: 22%;  animation: star-twinkle 4.5s ease-in-out 1.8s infinite; }
.star--37 { width: 2.5px; height: 2.5px; top: 7%;   right: 78%; animation: star-twinkle 3.3s ease-in-out 0.9s infinite; }
.star--38 { width: 1.5px; height: 1.5px; top: 18%;  left: 45%;  animation: star-twinkle-drift 2.7s ease-in-out 2.0s infinite; }
.star--39 { width: 2px;   height: 2px;   top: 22%;  right: 35%; animation: star-twinkle 3.6s ease-in-out 1.3s infinite; }
.star--40 { width: 1px;   height: 1px;   top: 9%;   left: 82%;  animation: star-twinkle 4.1s ease-in-out 3.8s infinite; }
.star--41 { width: 2px;   height: 2px;   top: 25%;  left: 5%;   animation: star-twinkle-drift 3.0s ease-in-out 0.5s infinite; }
.star--42 { width: 1.5px; height: 1.5px; top: 1%;   right: 42%; animation: star-twinkle 2.3s ease-in-out 2.7s infinite; }
.star--43 { width: 2.5px; height: 2.5px; top: 14%;  left: 58%;  animation: star-twinkle 3.9s ease-in-out 1.5s infinite; }
.star--44 { width: 1px;   height: 1px;   top: 6%;   right: 12%; animation: star-twinkle 4.8s ease-in-out 0.2s infinite; }
.star--45 { width: 2px;   height: 2px;   top: 11%;  right: 68%; animation: star-twinkle-drift 2.6s ease-in-out 3.1s infinite; }
.star--46 { width: 1.5px; height: 1.5px; top: 16%;  left: 35%;  animation: star-twinkle 3.4s ease-in-out 1.9s infinite; }
.star--47 { width: 2px;   height: 2px;   top: 3%;   left: 75%;  animation: star-twinkle 2.8s ease-in-out 0.7s infinite; }
.star--48 { width: 1px;   height: 1px;   top: 20%;  right: 50%; animation: star-twinkle-drift 4.3s ease-in-out 2.5s infinite; }
.star--49 { width: 2.5px; height: 2.5px; top: 8%;   left: 92%;  animation: star-twinkle 3.2s ease-in-out 3.6s infinite; }
.star--50 { width: 1.5px; height: 1.5px; top: 13%;  right: 8%;  animation: star-twinkle 2.5s ease-in-out 1.2s infinite; }

/* --- Shooting Star --- */
.cloud-shooting-star {
    position: absolute;
    top: 8%;
    left: 20%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 240, 200, 0.9) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    z-index: 2;
    animation: shooting-star-streak 18s linear infinite;
}

@keyframes shooting-star-streak {
    0%, 96% { opacity: 0; transform: translate(0, 0); }
    97%     { opacity: 0; transform: translate(0, 0); }
    97.5%   { opacity: 1; box-shadow: -4px 0 6px rgba(255, 240, 200, 0.6), -10px 0 12px rgba(255, 240, 200, 0.3); }
    99.5%   { opacity: 0.8; transform: translate(120px, 50px); box-shadow: -6px 0 8px rgba(255, 240, 200, 0.5), -15px 0 15px rgba(255, 240, 200, 0.2); }
    100%    { opacity: 0; transform: translate(140px, 60px); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.85; }
}

@keyframes star-twinkle-drift {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    50%      { opacity: 0.8; transform: translate(1.5px, -1px); }
}

/* --- Decorative Background Elements --- */
.cloud-decor {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
}

.cloud-decor-img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}

.cloud-decor--1 {
    width: 220px;
    top: 80%;
    left: 32%;
}

.cloud-decor--2 {
    width: 170px;
    top: 16%;
    left: 44%;
}

/* --- Active State: content visible, effects running --- */
.welcome--active .cloud-title {
    animation: cloud-title-breathe 5.5s ease-in-out 0s infinite;
}

/* --- Inactive State: page turned away, effects stopped for performance --- */
.welcome--inactive .cloud-welcome-text {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.welcome--inactive .cloud-decor {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.welcome--inactive .cloud-mist {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.welcome--inactive .cloud-stars .star {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* (Legacy cloud nav float/drift keyframes removed — nav buttons no longer in markup) */

/* --- Welcome Text (static, always visible on the page) --- */
.cloud-welcome-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 6;
    opacity: 1;
    pointer-events: none;
}

.cloud-title {
    font-family: var(--font-whimsical);
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--book-gold-leaf);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(61, 53, 48, 0.3);
    line-height: 1.1;
    position: relative;
}

/* Word spans — static, always visible */
.cloud-word {
    display: inline-block;
    opacity: 1;
}

.cloud-subtitle {
    font-family: var(--font-sc);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--book-gold-leaf);
    margin-bottom: 0;
    opacity: 0.8;
}

@keyframes title-shimmer {
    0%, 85%, 100% { left: -100%; opacity: 0; }
    5%            { opacity: 1; }
    40%           { left: 200%; opacity: 1; }
    45%           { opacity: 0; }
}

/* (Legacy word-reveal keyframes removed — text is now static) */

/* --- Title Breathing (continuous, very subtle) --- */
@keyframes cloud-title-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.012); }
}

/* --- Title shimmer effect (continuous, decorative) --- */
.cloud-title {
    overflow: hidden;
}

.cloud-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 248, 230, 0.2) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 248, 230, 0.2) 60%,
        transparent 100%
    );
    animation: title-shimmer 9s ease-in-out 2s infinite;
    pointer-events: none;
}

/* --- Couple Illustration (Countdown section) --- */
/* (couple silhouette replaced by dancing-couple.png in countdown redesign) */

/* --- OPW Section Content Overrides --- */
/* Schedule: frosted blush panel */
.opw-section--schedule .opw-section-content {
    background: rgba(255, 248, 245, 0.72);
    border-radius: 24px;
    border: 1px solid rgba(212, 184, 130, 0.18);
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}

/* Other content sections: standard frosted white */
/* FAQ: transparent — cards sit directly in the illustrated scene */
.opw-section--faq .opw-section-content {
    background: transparent;
    border: none;
    border-radius: 0;
    max-height: 85vh;
    overflow-y: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Contact: fully transparent — text floats directly in the illustrated garden */
.opw-section--contact .opw-section-content {
    background: transparent;
    border-radius: 0;
    border: none;
    max-height: 85vh;
    overflow-y: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Story: fully transparent — text floats directly on watercolour */
.opw-section--story .opw-section-content {
    background: transparent;
    border-radius: 0;
    border: none;
    max-height: 85vh;
    overflow-y: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Countdown: transparent — content floats in the scene */
.opw-section--countdown .opw-section-content {
    background: rgba(255, 248, 244, 0.15);
    border-radius: 0;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 2rem;
}

/* --- Content Scroll Transition Animations --- */
/* Content slides up when scrolling down, slides down when scrolling back up */
.opw-container .opw-section-content,
.opw-container .opw-hero-content {
    transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.content--hidden-below {
    opacity: 0 !important;
    transform: translateY(60px) !important;
}

.content--hidden-above {
    opacity: 0 !important;
    transform: translateY(-60px) !important;
}

.content--visible {
    opacity: 1 !important;
    transform: none !important;
}

/* --- OPW Responsive --- */

/* Tablet */
@media (max-width: 992px) {
    .opw-hero-text .couple-names {
        font-size: 4rem;
    }

    .opw-hero-content {
        padding: 16vh 2rem 2rem;
    }

    .cloud-title {
        font-size: 3rem;
    }

    .cloud-decor--1 { width: 180px; }
    .cloud-decor--2 { width: 140px; }

    .opw-section-content {
        padding: 4rem 1.5rem 1.5rem;
    }

    .cloud-mist { height: 45px; }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .opw-hero-text .couple-names {
        font-size: 3.2rem;
    }

    .opw-hero-content {
        padding: 14vh 2rem 2rem;
    }

    .cloud-title {
        font-size: 2.8rem;
    }

    .cloud-subtitle {
        font-size: 0.95rem;
        letter-spacing: 3px;
    }

    .cloud-decor--1 { width: 150px; }
    .cloud-decor--2 { width: 120px; }

    .cloud-mist { height: 40px; }

    .opw-section-content {
        padding: 4rem 1.2rem 1.2rem;
    }

    /* Reduce complexity on tablet */
    .hero-bird--3,
    .hero-bird--4 {
        display: none;
    }

    .hero-butterfly--3 {
        display: none;
    }

    .hero-nest {
        display: none;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .opw-hero-text .couple-names {
        font-size: 2.6rem;
    }

    .opw-hero-text .wedding-date {
        font-size: 1.1rem;
    }

    .opw-hero-content {
        padding: 12vh 1.5rem 1.5rem;
    }

    .date-flourish {
        width: 28px;
    }

    .cloud-title {
        font-size: 2rem;
    }

    .cloud-subtitle {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .cloud-decor--1,
    .cloud-decor--2 {
        display: none;
    }

    .cloud-mist { height: 30px; filter: blur(12px); }

    .cloud-stars { display: none; }

    .opw-section-content {
        padding: 4rem 1rem 1rem;
    }

    /* Hide demanding animations on mobile */
    .hero-butterfly,
    .hero-bird,
    .hero-sky-tint,
    .hero-parallax-overlay,
    .hero-grass-ripple,
    .hero-dew,
    .hero-nest,
    .hero-balloon,
    .hero-shooting-star,
    .hero-watercolor-bloom {
        display: none;
    }

    .hero-petal--7,
    .hero-petal--8,
    .hero-petal--9,
    .hero-petal--10 {
        display: none;
    }

    .hero-firefly--11,
    .hero-firefly--12,
    .hero-firefly--13,
    .hero-firefly--14,
    .hero-firefly--15,
    .hero-firefly--16,
    .hero-firefly--17,
    .hero-firefly--18,
    .hero-firefly--19,
    .hero-firefly--20 {
        display: none;
    }

    .hero-golden-underline {
        animation-delay: 2s;
    }

    .song-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .song-remove {
        right: -20px;
    }
}

/* Ultra-wide */
@media (min-width: 2560px) {
    .opw-section-content {
        max-width: 1400px;
    }

    .opw-hero-text .couple-names {
        font-size: 6.5rem;
    }

    .cloud-title {
        font-size: 5rem;
    }

    .cloud-decor--1 { width: 300px; }
    .cloud-decor--2 { width: 240px; }
}

/* ============================================
   Home Page Enhancements — Title Page Design
   ============================================ */

/* --- Wedding date & venue --- */
.cloud-date {
    font-family: var(--font-manuscript-heading);
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: var(--book-gold-leaf);
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    opacity: 1;
}

.cloud-venue {
    font-family: var(--font-manuscript-body);
    font-style: italic;
    font-size: 0.8rem;
    color: rgba(255, 248, 230, 0.7);
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
    opacity: 1;
}

.cloud-seal {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    color: var(--book-gold-leaf);
    opacity: 0.4;
}

/* (Legacy date/venue/seal entry animations removed — content is static) */

/* (Legacy enter-top overrides removed — content is always visible) */

/* (Legacy cloud-seal-appear keyframe removed — seal is static) */

/* --- Botanical border frame --- */
.cloud-border-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.cloud-border-corner {
    position: absolute;
    width: 80px;
    height: 80px;
}

.cloud-border-corner--tl { top: 0; left: 0; }
.cloud-border-corner--tr { top: 0; right: 0; }
.cloud-border-corner--bl { bottom: 0; left: 0; }
.cloud-border-corner--br { bottom: 0; right: 0; }

/* --- Fireflies --- */
.cloud-fireflies {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.cloud-firefly {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 200, 0.8) 0%, transparent 70%);
    box-shadow: 0 0 6px rgba(255, 240, 200, 0.4);
    opacity: 0;
    animation: cloud-firefly-wander 6s ease-in-out infinite;
}

.cloud-firefly--1 { top: 20%; left: 15%; animation-delay: 0s; animation-duration: 5s; }
.cloud-firefly--2 { top: 35%; right: 20%; animation-delay: 1.5s; animation-duration: 7s; }
.cloud-firefly--3 { top: 55%; left: 25%; animation-delay: 3s; animation-duration: 6s; }
.cloud-firefly--4 { top: 70%; right: 15%; animation-delay: 0.8s; animation-duration: 8s; }
.cloud-firefly--5 { top: 45%; left: 10%; animation-delay: 2.2s; animation-duration: 5.5s; }
.cloud-firefly--6 { bottom: 25%; right: 30%; animation-delay: 4s; animation-duration: 7s; }

@keyframes cloud-firefly-wander {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.7; transform: translate(5px, -8px); }
    50% { opacity: 0.9; transform: translate(-3px, -15px); }
    80% { opacity: 0.5; transform: translate(8px, -5px); }
}

/* --- Falling petals --- */
.cloud-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.cloud-petal {
    position: absolute;
    top: -10px;
    border-radius: 50% 0 50% 0;
    animation: cloud-petal-drift 10s ease-in-out infinite;
}

.cloud-petal--1 { left: 15%; width: 8px; height: 8px; background: rgba(193, 124, 116, 0.35); animation-delay: 0s; animation-duration: 10s; }
.cloud-petal--2 { left: 40%; width: 6px; height: 6px; background: rgba(232, 196, 160, 0.3); animation-delay: 2s; animation-duration: 12s; }
.cloud-petal--3 { left: 65%; width: 7px; height: 7px; background: rgba(193, 124, 116, 0.3); animation-delay: 4s; animation-duration: 9s; }
.cloud-petal--4 { left: 80%; width: 5px; height: 5px; background: rgba(212, 196, 232, 0.3); animation-delay: 1.5s; animation-duration: 14s; }
.cloud-petal--5 { left: 30%; width: 6px; height: 6px; background: rgba(232, 196, 160, 0.25); animation-delay: 6s; animation-duration: 11s; }

@keyframes cloud-petal-drift {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    10% { opacity: 0.5; }
    50% { opacity: 0.35; transform: translateY(45vh) rotate(90deg) translateX(10px); }
    90% { opacity: 0.15; }
    100% { opacity: 0; transform: translateY(95vh) rotate(180deg) translateX(-5px); }
}

/* --- Vignette atmosphere --- */
.cloud-section-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
    z-index: 4;
}