/* ============================================
   ONE-PAGE-WONDER (OPW) LAYOUT
   ============================================ */

/* --- OPW Layout Overrides --- */
.wedding-layout--opw .wedding-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hide traditional nav when cloud nav is visible */
body.clouds-active .wedding-layout--opw .wedding-header {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.wedding-layout--opw .wedding-footer {
    display: none;
}

.wedding-layout--opw .wedding-main {
    height: 100vh;
    height: 100dvh;
    flex: unset;
    overflow: hidden;
}

/* --- OPW Container & Sections --- */
.opw-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

.opw-section {
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.opw-section-content {
    max-width: 1200px;
    width: 100%;
    padding: 5rem 2rem 2rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Section Backgrounds --- */
.opw-section--clouds {
    background: url('/images/backgrounds/login-bg.jpg') center/cover no-repeat;
}

.opw-section--hero {
    background: url('/images/backgrounds/hero-bg.jpg') center/cover no-repeat;
}

.opw-section--schedule {
    background: url('/images/backgrounds/schedule-bg.jpg') center/cover no-repeat;
}

.opw-section--faq {
    background: url('/images/backgrounds/faq-bg.jpg') center/cover no-repeat;
}

.opw-section--story {
    background: url('/images/backgrounds/story-bg.jpg') center/cover no-repeat;
}

.opw-section--contact {
    background: url('/images/backgrounds/contact-bg.jpg') center/cover no-repeat;
}

.opw-section--countdown {
    background: url('/images/backgrounds/countdown-bg.png') center/cover no-repeat;
}

/* --- Hero Section (OPW) --- */
.opw-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 18vh 3rem 2rem;
    z-index: 2;
}

.opw-hero-text {
    text-align: center;
}

.opw-hero-text .couple-names {
    font-family: 'Cormorant Garamond', var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 5.2rem;
    color: #f7f0e6;
    text-shadow:
        2px 4px 12px rgba(180, 140, 100, 0.4),
        0 2px 20px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
    line-height: 1.15;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

/* Enhanced word-by-word reveal with rotation */
.hero-word {
    display: inline-block;
    opacity: 0;
}

.hero-word--1 {
    animation: hero-word-enter 1.0s ease-out 0.5s forwards;
}

.hero-word--amp {
    animation: hero-word-enter 0.6s ease-out 1.2s forwards;
}

.hero-word--2 {
    animation: hero-word-enter 1.0s ease-out 1.6s forwards;
}

@keyframes hero-word-enter {
    0%   { opacity: 0; transform: translateY(12px) rotate(-2deg); }
    60%  { opacity: 1; transform: translateY(-2px) rotate(0.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Golden underline that draws itself after words appear */
.hero-golden-underline {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-dusty-rose), transparent);
    margin: 0.3rem auto 0;
    opacity: 0;
    animation: hero-underline-draw 1.2s ease-out 2.8s forwards;
}

@keyframes hero-underline-draw {
    0%   { width: 0; opacity: 0; }
    30%  { opacity: 0.6; }
    100% { width: 180px; opacity: 0.5; }
}

/* Date flanking flourishes */
.date-flourish {
    width: 40px;
    height: 12px;
    color: #d4b896;
    opacity: 0.5;
    flex-shrink: 0;
}

.date-flourish--left {
    transform: scaleX(-1);
}

/* Ornamental SVG divider */
.hero-divider {
    width: 120px;
    height: 12px;
    margin: 0.6rem auto 0.5rem;
    color: #f7f0e6;
    opacity: 0;
    animation: hero-divider-enter 0.8s ease-out 2.3s forwards;
}

@keyframes hero-divider-enter {
    0%   { opacity: 0; transform: scaleX(0.5); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* Date — whimsical italic serif in warm champagne */
.opw-hero-text .wedding-date {
    font-family: 'Cormorant Garamond', var(--font-date);
    font-style: italic;
    font-weight: 400;
    font-size: 1.6rem;
    color: #d4b896;
    letter-spacing: 3px;
    text-transform: none;
    text-shadow:
        0 1px 8px rgba(180, 140, 100, 0.35),
        0 0 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: hero-date-enter 1.2s ease-out 2.6s forwards;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.8rem;
}

@keyframes hero-date-enter {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Title shimmer */
.opw-hero-text .couple-names::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 248, 230, 0.15) 40%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 248, 230, 0.15) 60%,
        transparent 100%
    );
    animation: hero-shimmer 12s ease-in-out 4s infinite;
    pointer-events: none;
}

@keyframes hero-shimmer {
    0%, 80%, 100% { left: -100%; opacity: 0; }
    5%            { opacity: 1; }
    35%           { left: 250%; opacity: 1; }
    40%           { opacity: 0; }
}

/* --- Hero RSVP Button --- */
.opw-hero-rsvp {
    margin-top: 1.375rem;
    z-index: 3;
}

.btn-rsvp-hero {
    display: inline-block;
    padding: 0.75rem 3rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(245, 240, 232, 0.75);
    color: #5a4e3c;
    border: 1.5px solid rgba(201, 169, 110, 0.5);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.btn-rsvp-hero:hover {
    background: rgba(245, 240, 232, 0.9);
    border-color: rgba(212, 175, 55, 0.7);
    color: #3d3426;
    transform: scale(1.04);
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-rsvp-hero:active {
    transform: scale(1.0);
}

/* --- Hero Scene Overlays --- */
.hero-scene-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* --- Light Rays --- */
.hero-lightray {
    position: absolute;
    width: 120px;
    height: 60%;
    background: linear-gradient(
        180deg,
        rgba(255, 248, 230, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    transform-origin: top center;
    filter: blur(20px);
}

.hero-lightray--1 {
    top: 0;
    left: 15%;
    transform: rotate(12deg);
    opacity: 0.08;
    animation: lightray-shift 25s ease-in-out infinite;
}

.hero-lightray--2 {
    top: 0;
    left: 45%;
    width: 90px;
    transform: rotate(-5deg);
    opacity: 0.06;
    animation: lightray-shift 30s ease-in-out 5s infinite reverse;
}

.hero-lightray--3 {
    top: 0;
    right: 20%;
    width: 100px;
    transform: rotate(8deg);
    opacity: 0.07;
    animation: lightray-shift 22s ease-in-out 10s infinite;
}

@keyframes lightray-shift {
    0%, 100% { transform: rotate(var(--ray-start, 12deg)) translateX(0); opacity: 0.06; }
    50%      { transform: rotate(var(--ray-end, 8deg)) translateX(30px); opacity: 0.1; }
}

/* --- Hill Mist --- */
.hero-hillmist {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(220, 230, 240, 0.08) 30%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(220, 230, 240, 0.06) 70%,
        transparent 100%
    );
    filter: blur(12px);
    animation: hillmist-breathe 8s ease-in-out infinite;
}

@keyframes hillmist-breathe {
    0%, 100% { opacity: 0.05; }
    50%      { opacity: 0.12; }
}

/* --- Floating Petals --- */
.hero-petal {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.7) 0%, rgba(255, 240, 230, 0.3) 70%, transparent 100%);
    border-radius: 50% 50% 50% 0;
    opacity: 0;
}

.hero-petal--1 { width: 5px;  height: 5px;  left: 12%; animation: petal-fall 8s ease-in-out 0s infinite; }
.hero-petal--2 { width: 7px;  height: 7px;  left: 30%; animation: petal-fall 10s ease-in-out 2s infinite; }
.hero-petal--3 { width: 4px;  height: 4px;  left: 55%; animation: petal-fall 7s ease-in-out 4s infinite; }
.hero-petal--4 { width: 6px;  height: 6px;  left: 72%; animation: petal-fall 9s ease-in-out 1s infinite; }
.hero-petal--5 { width: 5px;  height: 5px;  left: 88%; animation: petal-fall 11s ease-in-out 5s infinite; }
.hero-petal--6 { width: 8px;  height: 8px;  left: 42%; animation: petal-fall 8.5s ease-in-out 3s infinite; }

@keyframes petal-fall {
    0%   { top: -5%; opacity: 0; transform: rotate(0deg) translateX(0); }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.6; }
    100% { top: 105%; opacity: 0; transform: rotate(180deg) translateX(40px); }
}

/* --- Fireflies / Bokeh --- */
.hero-firefly {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 200, 0.8) 0%, rgba(212, 175, 55, 0.3) 40%, transparent 70%);
    opacity: 0;
}

.hero-firefly--1  { width: 4px; height: 4px; bottom: 30%; left: 15%;  animation: firefly-glow 3.2s ease-in-out 0.5s infinite; }
.hero-firefly--2  { width: 5px; height: 5px; bottom: 25%; left: 28%;  animation: firefly-glow 4.0s ease-in-out 1.2s infinite; }
.hero-firefly--3  { width: 3px; height: 3px; bottom: 35%; left: 42%;  animation: firefly-glow 2.8s ease-in-out 2.0s infinite; }
.hero-firefly--4  { width: 6px; height: 6px; bottom: 28%; left: 58%;  animation: firefly-glow 3.5s ease-in-out 0.8s infinite; }
.hero-firefly--5  { width: 4px; height: 4px; bottom: 32%; left: 70%;  animation: firefly-glow 4.5s ease-in-out 1.8s infinite; }
.hero-firefly--6  { width: 5px; height: 5px; bottom: 22%; left: 82%;  animation: firefly-glow 3.0s ease-in-out 3.0s infinite; }
.hero-firefly--7  { width: 3px; height: 3px; bottom: 38%; left: 35%;  animation: firefly-drift 5.0s ease-in-out 0.3s infinite; }
.hero-firefly--8  { width: 4px; height: 4px; bottom: 20%; left: 50%;  animation: firefly-drift 3.8s ease-in-out 2.5s infinite; }
.hero-firefly--9  { width: 5px; height: 5px; bottom: 26%; left: 65%;  animation: firefly-glow 4.2s ease-in-out 1.5s infinite; }
.hero-firefly--10 { width: 3px; height: 3px; bottom: 34%; left: 90%;  animation: firefly-drift 3.6s ease-in-out 0.7s infinite; }

@keyframes firefly-glow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.7; }
}

@keyframes firefly-drift {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    50%      { opacity: 0.65; transform: translate(3px, -2px); }
}

/* --- Petals 7-10 --- */
.hero-petal--7  { width: 6px;  height: 6px;  left: 20%; animation: petal-fall 9.5s ease-in-out 6s infinite; }
.hero-petal--8  { width: 4px;  height: 4px;  left: 65%; animation: petal-fall 7.5s ease-in-out 7s infinite; }
.hero-petal--9  { width: 7px;  height: 7px;  left: 80%; animation: petal-fall 10.5s ease-in-out 2.5s infinite; }
.hero-petal--10 { width: 5px;  height: 5px;  left: 48%; animation: petal-fall 8s ease-in-out 8s infinite; }

/* --- Butterflies --- */
.hero-butterfly {
    position: absolute;
    width: 24px;
    height: 16px;
    z-index: 2;
    pointer-events: none;
}

.butterfly-svg {
    width: 100%;
    height: 100%;
    animation: butterfly-wing 0.4s ease-in-out infinite alternate;
}

.hero-butterfly--1 {
    top: 25%;
    left: 10%;
    animation: butterfly-flight-1 18s ease-in-out infinite;
}

.hero-butterfly--2 {
    top: 35%;
    right: 15%;
    animation: butterfly-flight-2 22s ease-in-out 4s infinite;
}

.hero-butterfly--3 {
    top: 45%;
    left: 50%;
    animation: butterfly-flight-3 20s ease-in-out 8s infinite;
}

@keyframes butterfly-wing {
    0%   { transform: scaleX(1); }
    100% { transform: scaleX(0.6); }
}

@keyframes butterfly-flight-1 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.6; }
    25%  { transform: translate(80px, -30px) rotate(5deg); }
    50%  { transform: translate(160px, 10px) rotate(-3deg); opacity: 0.5; }
    75%  { transform: translate(100px, -20px) rotate(4deg); }
    95%  { opacity: 0.6; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
}

@keyframes butterfly-flight-2 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.5; }
    25%  { transform: translate(-60px, -40px) rotate(-5deg); }
    50%  { transform: translate(-120px, 15px) rotate(3deg); opacity: 0.45; }
    75%  { transform: translate(-70px, -25px) rotate(-4deg); }
    95%  { opacity: 0.5; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
}

@keyframes butterfly-flight-3 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.45; }
    30%  { transform: translate(40px, -50px) rotate(6deg); }
    60%  { transform: translate(-30px, -20px) rotate(-4deg); opacity: 0.4; }
    90%  { transform: translate(20px, -40px) rotate(2deg); }
    95%  { opacity: 0.45; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
}

/* --- Birds in sky --- */
.hero-bird {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 3px solid rgba(80, 70, 60, 0.25);
    border-radius: 50%;
}

.hero-bird--1 {
    top: 12%;
    left: 20%;
    animation: bird-drift 35s linear infinite;
}

.hero-bird--2 {
    top: 8%;
    left: 22%;
    transform: scale(0.7);
    animation: bird-drift 35s linear 0.5s infinite;
}

.hero-bird--3 {
    top: 18%;
    right: 25%;
    transform: scale(0.8);
    animation: bird-drift-reverse 40s linear 3s infinite;
}

.hero-bird--4 {
    top: 14%;
    right: 28%;
    transform: scale(0.6);
    animation: bird-drift-reverse 40s linear 3.5s infinite;
}

@keyframes bird-drift {
    0%   { transform: translateX(0); opacity: 0; }
    5%   { opacity: 0.3; }
    50%  { opacity: 0.25; }
    95%  { opacity: 0.3; }
    100% { transform: translateX(calc(100vw - 100%)); opacity: 0; }
}

@keyframes bird-drift-reverse {
    0%   { transform: translateX(0) scaleX(-1); opacity: 0; }
    5%   { opacity: 0.25; }
    50%  { opacity: 0.2; }
    95%  { opacity: 0.25; }
    100% { transform: translateX(calc(-100vw + 100%)) scaleX(-1); opacity: 0; }
}

/* --- Sky Tint Overlay --- */
.hero-sky-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(180, 200, 220, 0.04) 0%,
        transparent 40%
    );
    animation: sky-tint-shift 60s ease-in-out infinite;
    mix-blend-mode: soft-light;
}

@keyframes sky-tint-shift {
    0%, 100% { background-color: rgba(180, 200, 220, 0.03); }
    50%      { background-color: rgba(220, 200, 160, 0.04); }
}

/* --- Parallax Overlay --- */
.hero-parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.01) 30%,
        rgba(0, 0, 0, 0.03) 60%,
        rgba(0, 0, 0, 0.05) 100%
    );
    animation: parallax-breathe 15s ease-in-out infinite;
}

@keyframes parallax-breathe {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}

/* --- Grass Ripple --- */
.hero-grass-ripple {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(160, 180, 140, 0.04) 20%,
        rgba(160, 180, 140, 0.06) 50%,
        rgba(160, 180, 140, 0.04) 80%,
        transparent 100%
    );
    filter: blur(4px);
    animation: grass-sway 6s ease-in-out infinite;
}

@keyframes grass-sway {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(15px); }
}

/* --- Dew Sparkles --- */
.hero-dew {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    opacity: 0;
}

.hero-dew--1 {
    bottom: 35%;
    left: 25%;
    animation: dew-twinkle 14s ease-in-out 2s infinite;
}

.hero-dew--2 {
    bottom: 38%;
    left: 60%;
    animation: dew-twinkle 12s ease-in-out 6s infinite;
}

.hero-dew--3 {
    bottom: 32%;
    right: 20%;
    animation: dew-twinkle 15s ease-in-out 10s infinite;
}

@keyframes dew-twinkle {
    0%, 85%, 100% { opacity: 0; transform: scale(1); }
    90%           { opacity: 0.8; transform: scale(1.5); }
    95%           { opacity: 0.4; transform: scale(1); }
}

/* --- Bird's Nest Easter Egg --- */
.hero-nest {
    position: absolute;
    bottom: 42%;
    right: 8%;
    width: 24px;
    height: 20px;
    cursor: default;
    z-index: 2;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.nest-svg {
    width: 100%;
    height: 100%;
}

.nest-bird-svg {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 14px;
    height: 12px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-nest:hover {
    opacity: 0.8;
}

.hero-nest:hover .nest-bird-svg {
    transform: translateX(-50%) scale(1);
    animation: nest-bird-bounce 0.6s ease-in-out 0.3s;
}

@keyframes nest-bird-bounce {
    0%, 100% { transform: translateX(-50%) scale(1) translateY(0); }
    50%      { transform: translateX(-50%) scale(1) translateY(-4px); }
}

/* --- Ambient Sound Toggle --- */
.ambient-sound-toggle {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(181, 196, 177, 0.4);
    background: rgba(250, 245, 240, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.5;
    padding: 0;
}

.ambient-sound-toggle:hover {
    opacity: 0.8;
    border-color: rgba(181, 196, 177, 0.7);
    background: rgba(250, 245, 240, 0.8);
}

.sound-icon {
    width: 16px;
    height: 16px;
    color: var(--color-warm-charcoal);
}

/* --- Hot Air Balloon --- */
.hero-balloon {
    position: absolute;
    top: 8%;
    right: 100%;
    width: 28px;
    height: 40px;
    z-index: 2;
    animation: balloon-drift 45s linear 3s infinite;
}

.balloon-svg {
    width: 100%;
    height: 100%;
}

@keyframes balloon-drift {
    0%   { transform: translate(0, 0); opacity: 0; }
    3%   { opacity: 0.6; }
    50%  { transform: translate(calc(100vw + 60px), -20px); opacity: 0.5; }
    97%  { opacity: 0.6; }
    100% { transform: translate(calc(200vw + 120px), 0); opacity: 0; }
}

/* Balloon bobbing (applied to SVG for independent motion) */
.hero-balloon .balloon-svg {
    animation: balloon-bob 4s ease-in-out infinite;
}

@keyframes balloon-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* --- Shooting Star --- */
.hero-shooting-star {
    position: absolute;
    top: 10%;
    left: 30%;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 248, 230, 0.8), rgba(255, 248, 230, 0.3), transparent);
    border-radius: 1px;
    opacity: 0;
    transform: rotate(-25deg);
    animation: shooting-star 25s linear infinite;
}

@keyframes shooting-star {
    0%, 95%, 100% { opacity: 0; transform: rotate(-25deg) translateX(0); }
    96%           { opacity: 0; transform: rotate(-25deg) translateX(0); }
    97%           { opacity: 0.9; }
    98.5%         { opacity: 0.3; transform: rotate(-25deg) translateX(200px); }
    99%           { opacity: 0; transform: rotate(-25deg) translateX(250px); }
}

/* --- Watercolor Bloom Reveals (one-shot on page load) --- */
.hero-watercolor-bloom {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    filter: blur(30px);
}

.hero-watercolor-bloom--1 {
    width: 200px;
    height: 200px;
    top: 30%;
    left: 10%;
    background: radial-gradient(circle, rgba(232, 196, 188, 0.12) 0%, transparent 70%);
    animation: watercolor-bloom 2.5s ease-out 0.3s forwards;
}

.hero-watercolor-bloom--2 {
    width: 160px;
    height: 160px;
    top: 50%;
    right: 15%;
    background: radial-gradient(circle, rgba(181, 196, 177, 0.10) 0%, transparent 70%);
    animation: watercolor-bloom 2.5s ease-out 0.8s forwards;
}

.hero-watercolor-bloom--3 {
    width: 180px;
    height: 180px;
    bottom: 25%;
    left: 45%;
    background: radial-gradient(circle, rgba(212, 204, 232, 0.08) 0%, transparent 70%);
    animation: watercolor-bloom 2.5s ease-out 1.3s forwards;
}

@keyframes watercolor-bloom {
    0%   { opacity: 0; transform: scale(0.3); }
    40%  { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* --- Additional Fireflies (sky/horizon area) --- */
.hero-firefly--11 { width: 3px; height: 3px; top: 25%; left: 20%;   animation: firefly-glow 3.8s ease-in-out 1.0s infinite; }
.hero-firefly--12 { width: 4px; height: 4px; top: 30%; left: 45%;   animation: firefly-drift 4.5s ease-in-out 2.2s infinite; }
.hero-firefly--13 { width: 3px; height: 3px; top: 35%; right: 20%;  animation: firefly-glow 3.2s ease-in-out 0.6s infinite; }
.hero-firefly--14 { width: 5px; height: 5px; top: 28%; right: 35%;  animation: firefly-glow 4.0s ease-in-out 3.0s infinite; }
.hero-firefly--15 { width: 3px; height: 3px; top: 22%; left: 65%;   animation: firefly-drift 3.5s ease-in-out 1.5s infinite; }
.hero-firefly--16 { width: 4px; height: 4px; top: 40%; left: 10%;   animation: firefly-glow 4.2s ease-in-out 0.8s infinite; }
.hero-firefly--17 { width: 3px; height: 3px; top: 32%; right: 50%;  animation: firefly-drift 3.0s ease-in-out 2.5s infinite; }
.hero-firefly--18 { width: 5px; height: 5px; top: 18%; left: 80%;   animation: firefly-glow 3.6s ease-in-out 1.8s infinite; }
.hero-firefly--19 { width: 4px; height: 4px; top: 42%; right: 10%;  animation: firefly-drift 4.8s ease-in-out 3.5s infinite; }
.hero-firefly--20 { width: 3px; height: 3px; top: 15%; left: 35%;   animation: firefly-glow 3.4s ease-in-out 0.4s infinite; }