/* =================================
   WELCOME SCREEN
================================= */

#welcomeScreen {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 40%,
            #49346f 0%,
            #1b1635 45%,
            #080812 100%
        );

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


#welcomeScreen.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.welcome-content {

    text-align: center;

    animation:
        welcomeAppear 1.5s ease;
}


.welcome-flower {

    font-size: 80px;

    margin-bottom: 15px;

    animation:
        flowerFloat 3s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 20px rgba(255, 150, 210, 0.7)
        );
}


.welcome-content h1 {

    margin: 0;

    font-size: 48px;

    letter-spacing: 3px;

    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.5),
        0 0 35px rgba(255, 105, 180, 0.5);
}


.welcome-content p {

    margin: 20px 0 30px;

    font-size: 20px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.8);
}


/* =================================
   ENTER BUTTON
================================= */

#enterButton {

    padding: 16px 38px;

    border: none;

    border-radius: 40px;

    font-size: 18px;

    font-weight: 600;

    color: white;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #ff69b4,
            #9c6ade
        );

    box-shadow:
        0 0 25px rgba(255, 105, 180, 0.4);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


#enterButton:hover {

    transform: scale(1.08);

    box-shadow:
        0 0 40px rgba(255, 105, 180, 0.7);
}


#enterButton:active {

    transform: scale(0.96);
}


/* =================================
   ANIMATIONS
================================= */

@keyframes welcomeAppear {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(0.95);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes flowerFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {

        transform:
            translateY(-12px)
            rotate(3deg);
    }
}


/* =================================
   GARDEN STARTING STATE
================================= */

#garden {

    opacity: 0;

    transition:
        opacity 1s ease;
}


#garden.visible {

    opacity: 1;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    overflow: hidden;

    font-family: Arial, sans-serif;

    color: white;

    background:
        radial-gradient(
            circle at 50% 20%,
            #33245c 0%,
            #17132e 45%,
            #080812 100%
        );

    text-align: center;
}


/* ================================
   TITLE
================================ */

h1 {
    margin: 18px 0 12px;

    font-size: 32px;

    font-weight: 600;

    letter-spacing: 2px;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 25px rgba(255, 105, 180, 0.6);
}


/* ================================
   CAMERA AREA
================================ */

.camera-container {

    position: relative;

    width: 860px;

    max-width: 92vw;

    height: 62vh;

    margin: auto;

    overflow: hidden;

    border-radius: 25px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 0 30px rgba(255, 105, 180, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.5);

    background: #111;
}


/* ================================
   VIDEO
================================ */

#webcam {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transform: scaleX(-1);
}


/* ================================
   CANVAS
================================ */

#canvas {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    transform: scaleX(-1);

    pointer-events: none;
}

/* A floating memory reveal layered above the camera canvas. */
.memory-reveal {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    width: min(320px, 44vw);
    opacity: 0;
    transform: translateY(12px) rotate(2deg) scale(.96);
    pointer-events: none;
    visibility: hidden;
    isolation: isolate;
    --memory-glow: rgba(255, 183, 218, .78);
    --memory-aura: rgba(202, 157, 255, .52);
}

.memory-reveal[data-memory-tone="lavender"] { --memory-glow: rgba(206, 176, 255, .82); --memory-aura: rgba(168, 139, 255, .58); }
.memory-reveal[data-memory-tone="sunshine"] { --memory-glow: rgba(255, 218, 139, .82); --memory-aura: rgba(255, 174, 133, .55); }
.memory-reveal[data-memory-tone="peach"] { --memory-glow: rgba(255, 177, 153, .82); --memory-aura: rgba(255, 143, 189, .55); }

.memory-reveal.is-visible {
    visibility: visible;
    animation: memoryRevealIn .9s cubic-bezier(.16,1.25,.42,1) forwards,
        memoryRevealOut .7s ease 6.3s forwards;
}

.memory-reveal::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -26px;
    border-radius: 24px;
    background: radial-gradient(ellipse, rgba(255,204,238,.96), var(--memory-aura) 48%, rgba(255,238,188,.2) 66%, transparent 76%);
    filter: blur(17px) saturate(1.25);
    opacity: 0;
}

.memory-reveal::after {
    content: "✦   ♡   ✧   ♡   ✦";
    position: absolute;
    z-index: 2;
    top: -24px;
    right: 0;
    left: 0;
    text-align: center;
    white-space: nowrap;
    color: #fff4bd;
    font-size: clamp(18px, 3vw, 27px);
    text-shadow: 0 0 7px #fff, 0 0 16px #ffb7e8, 0 0 24px #c49aff;
    opacity: 0;
}

.memory-reveal.is-visible::before {
    animation: memoryAuraBloom 2.4s ease-in-out infinite alternate;
}

.memory-reveal.is-visible::after {
    animation: memoryStarDrift 1.8s ease-in-out infinite alternate;
}

.memory-reveal__frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 12px 12px 0;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,250,255,.98), rgba(255,234,247,.96));
    box-shadow: 0 18px 48px rgba(12,7,25,.48), 0 0 24px var(--memory-glow), 0 0 58px var(--memory-aura), inset 0 0 0 1px rgba(255,255,255,.78);
    color: #492e50;
}

.memory-reveal__frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -35%;
    bottom: -35%;
    left: -65%;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.82), transparent);
    transform: rotate(12deg);
}

.memory-reveal__frame::after {
    content: "✿";
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff0fb;
    font-size: clamp(54px, 10vw, 96px);
    text-shadow: 0 0 12px #fff, 0 0 28px var(--memory-glow), 0 0 48px var(--memory-aura);
    opacity: 0;
    pointer-events: none;
}

.memory-reveal.is-visible .memory-reveal__frame::after {
    animation: memoryFlowerBloom 1.15s cubic-bezier(.16, 1, .3, 1) .12s both;
}
.memory-reveal.is-visible .memory-reveal__frame {
    animation: memoryFrameFloat 4.6s ease-in-out 1s infinite alternate;
}

.memory-reveal__corners {
    position: absolute;
    z-index: 3;
    inset: 12px;
    pointer-events: none;
}

.memory-reveal__corners::before,
.memory-reveal__corners::after {
    content: "✧";
    position: absolute;
    color: #fffdf2;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 0 7px #fff, 0 0 14px var(--memory-glow), 0 0 22px var(--memory-aura);
}

.memory-reveal.is-visible .memory-reveal__corners::before,
.memory-reveal.is-visible .memory-reveal__corners::after {
    animation: memoryCornerTwinkle 2s ease-in-out infinite alternate;
}

.memory-reveal__corners::before { top: 6px; left: 6px; }
.memory-reveal__corners::after { right: 6px; bottom: 6px; animation-delay: 1s; }

.memory-reveal.is-visible .memory-reveal__frame::before {
    animation: memoryPhotoShine 1.25s ease-out .35s both;
}

.memory-reveal.is-visible .memory-reveal__image {
    animation: memoryPhotoBloom .8s cubic-bezier(.2,.8,.2,1) .12s both;
}

.memory-reveal__image,
.memory-reveal__placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 13px;
    object-fit: cover;
    background: #fff8fc;
    box-shadow: 0 5px 15px rgba(45,23,54,.18), inset 0 0 0 1px rgba(255,255,255,.72);
    filter: saturate(1.06) contrast(1.025);
}

.memory-reveal [hidden] { display: none !important; }

.memory-reveal__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    background: linear-gradient(145deg, #ffe7f1, #e9e1ff);
    text-align: center;
}

.memory-reveal__placeholder span { font-size: 30px; }
.memory-reveal__placeholder strong { font-size: 13px; }
.memory-reveal__placeholder small { font-size: 10px; opacity: .75; }

.memory-reveal__caption {
    margin: 10px 2px 12px;
    color: #50345a;
    font: 700 15px/1.4 Arial, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

@keyframes memoryRevealIn {
    0% { opacity: 0; filter: blur(8px); transform: translateY(32px) rotate(8deg) scale(.72); }
    58% { opacity: 1; filter: blur(0); transform: translateY(-5px) rotate(-2deg) scale(1.045); }
    78% { transform: translateY(1px) rotate(1deg) scale(.99); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0) scale(1); }
}

@keyframes memoryRevealOut {
    to { opacity: 0; transform: translateY(-10px) rotate(-2deg) scale(.97); visibility: hidden; }
}

@keyframes memoryAuraBloom {
    from { opacity: .48; transform: scale(.94); filter: blur(17px) saturate(1.1); }
    to { opacity: 1; transform: scale(1.1); filter: blur(21px) saturate(1.45); }
}

@keyframes memoryStarDrift {
    from { opacity: .35; transform: translateY(5px) scale(.82) rotate(-9deg); }
    to { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(8deg); }
}

@keyframes memoryFlowerBloom {
    0% { opacity: 0; transform: scale(.08) rotate(-35deg); filter: blur(8px); }
    45% { opacity: .9; transform: scale(1.18) rotate(10deg); filter: blur(0); }
    100% { opacity: 0; transform: scale(1.65) rotate(35deg); filter: blur(2px); }
}

@keyframes memoryFrameFloat {
    from { transform: translateY(0) rotate(-.35deg); }
    to { transform: translateY(-6px) rotate(.35deg); }
}

@keyframes memoryCornerTwinkle {
    from { opacity: .38; transform: scale(.78) rotate(-12deg); }
    to { opacity: 1; transform: scale(1.12) rotate(12deg); }
}

@keyframes memoryPhotoShine {
    from { left: -65%; }
    to { left: 130%; }
}

@keyframes memoryPhotoBloom {
    0% { filter: brightness(1.55) saturate(.72) blur(3px); transform: scale(1.08); }
    65% { filter: brightness(1.08) saturate(1.18) blur(0); transform: scale(1.01); }
    100% { filter: brightness(1) saturate(1.05) blur(0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .memory-reveal.is-visible { animation: memoryRevealIn .01ms forwards, memoryRevealOut .01ms 6.3s forwards; }
    .memory-reveal::before, .memory-reveal::after { animation: none; }
    .memory-reveal.is-visible .memory-reveal__frame,
    .memory-reveal__corners::before,
    .memory-reveal__corners::after,
    .memory-reveal.is-visible .memory-reveal__frame::before,
    .memory-reveal.is-visible .memory-reveal__frame::after,
    .memory-reveal.is-visible .memory-reveal__image { animation: none; }
}


/* ================================
   CAMERA OVERLAY
================================ */

.camera-container::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: 25px;

    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.35);

}


/* ================================
   START BUTTON
================================ */

button {

    position: relative;

    z-index: 20;

    margin-top: 18px;

    padding: 14px 32px;

    border: none;

    border-radius: 30px;

    font-size: 17px;

    font-weight: 600;

    color: white;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #ff69b4,
            #9c6ade
        );

    box-shadow:
        0 8px 25px rgba(255, 105, 180, 0.3);

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}


button:hover {

    transform: translateY(-2px) scale(1.04);

    box-shadow:
        0 12px 35px rgba(255, 105, 180, 0.5);
}


button:active {

    transform: scale(0.96);
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

    h1 {
        font-size: 25px;
    }

    .camera-container {

        width: 95vw;

        height: 60vh;

        border-radius: 18px;
    }

    button {

        font-size: 15px;

        padding: 12px 25px;
    }
}

/* =====================================
   FLOWER MODE MENU
===================================== */

.flower-mode-menu {
    margin: 25px auto;
    text-align: center;
}

.flower-mode-menu h2 {
    margin-bottom: 8px;
}

.flower-mode-menu p {
    margin-bottom: 18px;
    opacity: 0.8;
}

.flower-mode-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.flower-mode-btn {
    padding: 12px 22px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 25px;

    background: rgba(255, 255, 255, 0.10);
    color: white;

    font-size: 16px;
    cursor: pointer;

    transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.flower-mode-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
}

.flower-mode-btn.active {
    background: rgba(255, 170, 220, 0.30);
    border-color: rgba(255, 190, 230, 0.9);

    box-shadow:
        0 0 15px rgba(255, 170, 220, 0.45);
}
/* =====================================
   FLOATING FLOWER MODE SWITCHER
===================================== */

#flowerModeSwitcher {
    position: fixed;

    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;

    padding: 7px;

    border-radius: 30px;

    background: rgba(20, 10, 30, 0.55);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25);

    z-index: 9999;
pointer-events: auto;
}


/* Individual buttons */

.flower-mode-btn {

    border: none;

    padding: 10px 18px;

    border-radius: 22px;

    background: transparent;

    color: white;

    font-size: 15px;

    cursor: pointer;

    transition:
        all 0.25s ease;
}


/* Hover */

.flower-mode-btn:hover {

    background: rgba(255, 255, 255, 0.12);

    transform: translateY(-1px);
}


/* Selected mode */

.flower-mode-btn.active {

    background:
        rgba(255, 170, 220, 0.35);

    box-shadow:
        0 0 15px rgba(255, 170, 220, 0.45);

    border: 1px solid
        rgba(255, 210, 240, 0.7);
}


/* Small screens */

@media (max-width: 600px) {
    .memory-reveal { width: min(300px, 72vw); top: 12px; right: 12px; }

    #flowerModeSwitcher {

        bottom: 15px;

        padding: 5px;
    }

    .flower-mode-btn {

        padding: 9px 14px;

        font-size: 14px;
    }
}
/* =====================================
   TIME-OF-DAY GARDEN ATMOSPHERE
===================================== */
body {
    --garden-background: radial-gradient(circle at 50% 20%, #33245c 0%, #17132e 45%, #080812 100%);
    --welcome-background: radial-gradient(circle at 50% 40%, #49346f 0%, #1b1635 45%, #080812 100%);
    --camera-glow: rgba(255, 105, 180, 0.15);
    background: var(--garden-background);
    transition: background 1.4s ease;
}

body #welcomeScreen {
    background: var(--welcome-background);
    transition: opacity 1s ease, visibility 1s ease, background 1.4s ease;
}

body .camera-container {
    box-shadow: 0 0 34px var(--camera-glow), 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: box-shadow 1.4s ease;
}

body[data-time-theme="dawn"] {
    --garden-background: radial-gradient(circle at 50% 18%, #75577f 0%, #39284f 48%, #151328 100%);
    --welcome-background: radial-gradient(circle at 50% 40%, #9a718e 0%, #463253 48%, #17152b 100%);
    --camera-glow: rgba(255, 176, 160, 0.24);
}

body[data-time-theme="day"] {
    --garden-background: radial-gradient(circle at 50% 18%, #456a79 0%, #243b52 48%, #101b2b 100%);
    --welcome-background: radial-gradient(circle at 50% 40%, #668995 0%, #30465b 48%, #121d2d 100%);
    --camera-glow: rgba(147, 220, 214, 0.22);
}

body[data-time-theme="sunset"] {
    --garden-background: radial-gradient(circle at 50% 18%, #87506f 0%, #43294f 48%, #171329 100%);
    --welcome-background: radial-gradient(circle at 50% 40%, #ad6c78 0%, #563453 48%, #19142c 100%);
    --camera-glow: rgba(255, 151, 133, 0.24);
}

body[data-time-theme="night"] {
    --garden-background: radial-gradient(circle at 50% 18%, #33245c 0%, #17132e 45%, #080812 100%);
    --welcome-background: radial-gradient(circle at 50% 40%, #49346f 0%, #1b1635 45%, #080812 100%);
    --camera-glow: rgba(179, 133, 255, 0.2);
}
/* =====================================
   SLOW, LIVING BACKGROUND LIGHT
===================================== */
body {
    background-size: 150% 150%;
    background-position: 20% 35%;
    animation: gardenSkyDrift 34s ease-in-out infinite alternate;
}

body #welcomeScreen {
    background-size: 150% 150%;
    background-position: 24% 30%;
    animation: gardenSkyDrift 38s ease-in-out infinite alternate;
}

body .camera-container {
    animation: cameraGlowBreath 9s ease-in-out infinite;
}

@keyframes gardenSkyDrift {
    0% { background-position: 20% 35%; }
    50% { background-position: 78% 48%; }
    100% { background-position: 34% 76%; }
}

@keyframes cameraGlowBreath {
    0%, 100% { box-shadow: 0 0 28px var(--camera-glow), 0 20px 60px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 42px var(--camera-glow), 0 20px 60px rgba(0, 0, 0, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
    body,
    body #welcomeScreen,
    body .camera-container {
        animation: none;
    }
}
/* =====================================
   TIME-AWARE FOREST LAKE BACKDROP
===================================== */
body {
    position: relative;
    isolation: isolate;
    --sky-top: #162033;
    --sky-wash: rgba(53, 49, 86, 0.38);
    --horizon-glow: rgba(136, 158, 191, 0.42);
    --lake-top: #203b47;
    --lake-bottom: #101c2d;
    --far-hills: #263346;
    --far-forest: #1b2d36;
    --near-forest: #0b171f;
    --sun-color: #f6c982;
    --moon-color: #e6e4f4;
    --star-color: #f4edce;
    --bird-color: #f6e6cd;
    --reflection-color: #f5cf9b;
    --ripple-color: #c4dfd8;
    --welcome-overlay: rgba(15, 15, 29, 0.48);
}

#scenicBackdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#scenicBackdrop svg {
    display: block;
    width: 100%;
    height: 100%;
}

body #welcomeScreen {
    background: var(--welcome-overlay);
}

body[data-time-theme="dawn"] {
    --sky-top: #98748a;
    --sky-wash: rgba(255, 194, 153, 0.34);
    --horizon-glow: rgba(255, 190, 163, 0.52);
    --lake-top: #536879;
    --lake-bottom: #1c3140;
    --far-hills: #566071;
    --far-forest: #344844;
    --near-forest: #172b2a;
    --sun-color: #ffd2a0;
    --bird-color: #59434a;
    --star-opacity: 0.08;
    --bird-opacity: 0.72;
    --welcome-overlay: rgba(48, 31, 48, 0.43);
}

body[data-time-theme="day"] {
    --sky-top: #75a3aa;
    --sky-wash: rgba(205, 225, 206, 0.24);
    --horizon-glow: rgba(224, 239, 209, 0.42);
    --lake-top: #56858a;
    --lake-bottom: #1d4650;
    --far-hills: #58766e;
    --far-forest: #345747;
    --near-forest: #17382f;
    --sun-color: #fff0b5;
    --bird-color: #354b4d;
    --star-opacity: 0;
    --bird-opacity: 0.68;
    --welcome-overlay: rgba(20, 43, 49, 0.43);
}

body[data-time-theme="sunset"] {
    --sky-top: #9b6072;
    --sky-wash: rgba(255, 153, 117, 0.34);
    --horizon-glow: rgba(255, 155, 128, 0.56);
    --lake-top: #59465c;
    --lake-bottom: #1c273b;
    --far-hills: #574056;
    --far-forest: #342b42;
    --near-forest: #181b2c;
    --sun-color: #ffb478;
    --bird-color: #523841;
    --star-opacity: 0.12;
    --bird-opacity: 0.68;
    --welcome-overlay: rgba(51, 24, 43, 0.45);
}

body[data-time-theme="night"] {
    --sky-top: #111629;
    --sky-wash: rgba(62, 54, 100, 0.33);
    --horizon-glow: rgba(124, 145, 204, 0.4);
    --lake-top: #1e3046;
    --lake-bottom: #080f1d;
    --far-hills: #20283d;
    --far-forest: #172333;
    --near-forest: #090f19;
    --moon-color: #e7e8ff;
    --star-opacity: 0.9;
    --bird-opacity: 0;
    --welcome-overlay: rgba(8, 10, 23, 0.45);
}

.scene-stars { opacity: var(--star-opacity, 0); }
.scene-stars circle { animation: starTwinkle 3.2s ease-in-out infinite alternate; }
.scene-stars circle:nth-child(3n) { animation-delay: -1.4s; }
.scene-stars circle:nth-child(3n + 1) { animation-delay: -2.3s; }
.scene-sun { display: none; filter: drop-shadow(0 0 18px var(--sun-color)); }
.sun-halo { opacity: 0.2; filter: url(#celestialGlow); }
body[data-time-theme="dawn"] .sun-dawn,
body[data-time-theme="day"] .sun-day,
body[data-time-theme="sunset"] .sun-sunset { display: block; }
.scene-moon { display: none; filter: drop-shadow(0 0 22px rgba(208, 220, 255, 0.45)); }
body[data-time-theme="night"] .scene-moon { display: block; }
.sun-reflection { display: block; }
.moon-reflection { display: none; }
body[data-time-theme="night"] .sun-reflection { display: none; }
body[data-time-theme="night"] .moon-reflection { display: block; }
.scene-birds { opacity: var(--bird-opacity, 0); animation: daylightFlockPass 48s linear 3s infinite; transform-box: fill-box; transform-origin: center; }
.scene-birds path { transform-box: fill-box; transform-origin: center; animation: distantBirdFlutter .72s ease-in-out infinite alternate; }
.scene-birds path:nth-child(2) { animation-delay: -.24s; }
.scene-birds path:nth-child(3) { animation-delay: -.48s; }
body[data-time-theme="night"] .scene-birds,
body[data-time-theme="night"] .scene-birds path { opacity: 0; animation: none; }
.lake-ripples path { transform-box: fill-box; transform-origin: center; }
.lake-ripples path:nth-child(1) { animation: waterRippleDrift 11s ease-in-out infinite alternate; }
.lake-ripples path:nth-child(2) { animation: waterRippleDrift 15s ease-in-out -6s infinite alternate-reverse; }

@keyframes starTwinkle { from { opacity: 0.48; } to { opacity: 1; } }
@keyframes daylightFlockPass {
    0%, 9%, 100% { opacity: 0; transform: translate(-680px, 18px); }
    12% { opacity: .76; }
    65% { opacity: .7; transform: translate(850px, -48px); }
    70% { opacity: 0; transform: translate(1020px, -58px); }
}
@keyframes distantBirdFlutter {
    from { transform: translateY(0) scaleY(.94); }
    to { transform: translateY(-1px) scaleY(1.04); }
}
@keyframes waterRippleDrift { from { transform: translateX(-5px); opacity: .62; } to { transform: translateX(6px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    #scenicBackdrop *, body, body #welcomeScreen, body .camera-container { animation: none !important; }
}
/* Slow lake mist, strongest at dawn and dusk. */
body { --mist-color: #e3e9ee; --mist-opacity: 0.2; }
body[data-time-theme="dawn"] { --mist-color: #f5d8d3; --mist-opacity: 0.48; }
body[data-time-theme="day"] { --mist-color: #e2eee7; --mist-opacity: 0.14; }
body[data-time-theme="sunset"] { --mist-color: #f2c7c0; --mist-opacity: 0.38; }
body[data-time-theme="night"] { --mist-color: #bfcee5; --mist-opacity: 0.26; }
.lake-mist {
    opacity: var(--mist-opacity);
    animation: lakeMistDrift 32s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes lakeMistDrift {
    from { transform: translateX(-18px) translateY(1px); }
    to { transform: translateX(22px) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .lake-mist { animation: none !important; }
}
/* Slow cloud drift adds depth to the changing sky. */
body { --cloud-color: rgba(242, 222, 222, 0.12); --cloud-opacity: 0.42; }
body[data-time-theme="dawn"] { --cloud-color: rgba(255, 218, 203, 0.38); --cloud-opacity: 0.78; }
body[data-time-theme="day"] { --cloud-color: rgba(224, 241, 228, 0.42); --cloud-opacity: 0.72; }
body[data-time-theme="sunset"] { --cloud-color: rgba(255, 196, 177, 0.35); --cloud-opacity: 0.68; }
body[data-time-theme="night"] { --cloud-color: rgba(188, 197, 226, 0.16); --cloud-opacity: 0.32; }
.scene-clouds {
    opacity: var(--cloud-opacity);
    animation: cloudDrift 52s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes cloudDrift {
    from { transform: translateX(-24px); }
    to { transform: translateX(30px); }
}
@media (prefers-reduced-motion: reduce) {
    .scene-clouds { animation: none !important; }
}
/* Fireflies near the shore add a quiet nighttime and twilight shimmer. */
body { --firefly-color: #ffe9a2; --firefly-opacity: 0.18; }
body[data-time-theme="dawn"] { --firefly-color: #ffe4a0; --firefly-opacity: 0.42; }
body[data-time-theme="day"] { --firefly-color: #fff0ad; --firefly-opacity: 0.08; }
body[data-time-theme="sunset"] { --firefly-color: #ffd88f; --firefly-opacity: 0.48; }
body[data-time-theme="night"] { --firefly-color: #e6ddff; --firefly-opacity: 0.68; }
.scene-fireflies {
    opacity: var(--firefly-opacity);
    filter: drop-shadow(0 0 7px var(--firefly-color));
}
.scene-fireflies circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: shoreFireflyTwinkle 2.8s ease-in-out infinite alternate;
}
.scene-fireflies circle:nth-child(3n) { animation-delay: -1.7s; }
.scene-fireflies circle:nth-child(3n + 1) { animation-delay: -0.9s; }
@keyframes shoreFireflyTwinkle {
    from { opacity: 0.38; transform: scale(0.78); }
    to { opacity: 1; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .scene-fireflies circle { animation: none !important; }
}
/* Light on the lake widens and narrows gently with the water shimmer. */
.sun-reflection,
.moon-reflection {
    transform-box: fill-box;
    transform-origin: center top;
    animation: reflectionShimmer 8s ease-in-out infinite alternate;
}
@keyframes reflectionShimmer {
    from { opacity: 0.62; transform: scaleX(0.88) translateX(-5px); }
    to { opacity: 1; transform: scaleX(1.08) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .sun-reflection,
    .moon-reflection { animation: none !important; }
}

/* The sailboat is part of the SVG lake layer, so it stays on the water and remains clickable. */
#scenicBackdrop { z-index: 0; pointer-events: none; }
#lakeBoat { pointer-events: all; cursor: pointer; }
#boatArtwork { filter: drop-shadow(0 2px 4px rgba(8, 22, 30, .5)); }
.boat-hull { fill: #805b48; stroke: #f3d5a6; stroke-width: 1.4; stroke-linejoin: round; }
.boat-sail-main { fill: #fff1cf; stroke: #d4b9a4; stroke-width: 1; stroke-linejoin: round; }
.boat-sail-small { fill: #e7c5dc; stroke: #cda9c2; stroke-width: 1; stroke-linejoin: round; }
.boat-mast { stroke: #6b4a3c; stroke-width: 2; stroke-linecap: round; }
.boat-waterline { fill: none; stroke: rgba(222, 244, 238, .85); stroke-width: 1.5; stroke-linecap: round; }
#lakeBoat.sailing #boatArtwork { animation: boatBob 1.4s ease-in-out infinite alternate; }
#lakeBoat.sailed { opacity: 0; pointer-events: none; }
@keyframes boatBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
#lakeBoat:focus { outline: none; }
#lakeBoat:focus-visible { filter: drop-shadow(0 0 5px rgba(255, 241, 207, .95)); }
body #welcomeScreen { pointer-events: none; }
body #welcomeScreen .welcome-content { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #lakeBoat.sailing #boatArtwork { animation: none !important; } }.boat-wake { fill: none; stroke: rgba(222, 244, 238, .88); stroke-width: 1.7; stroke-linecap: round; opacity: 0; }
#lakeBoat.sailing .boat-wake { opacity: .72; animation: wakeRipple 1.1s ease-in-out infinite alternate; }
@keyframes wakeRipple { from { opacity: .42; } to { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { #lakeBoat.sailing .boat-wake { animation: none !important; opacity: .7; } }
/* Keep the inactive garden from covering the lake boat on the welcome screen. */
#garden:not(.visible), #garden:not(.visible) * { pointer-events: none !important; }
#lakeBoat { pointer-events: all; cursor: pointer; }
/* Allow clicks on the visible background to reach the lake boat around the garden UI. */
#garden { pointer-events: none; }
#garden > * { pointer-events: auto; }
#garden:not(.visible), #garden:not(.visible) * { pointer-events: none !important; }
/* Let lake clicks pass through the welcome text while preserving its buttons. */
body #welcomeScreen .welcome-content { pointer-events: none; }
body #welcomeScreen button { pointer-events: auto; }

/* A soft, subtle water reflection sits just beneath the hull. */
body { --boat-reflection-color: rgba(191, 205, 235, .18); }
body[data-time-theme="dawn"] { --boat-reflection-color: rgba(255, 209, 191, .2); }
body[data-time-theme="day"] { --boat-reflection-color: rgba(255, 243, 207, .18); }
body[data-time-theme="sunset"] { --boat-reflection-color: rgba(255, 180, 147, .22); }
body[data-time-theme="night"] { --boat-reflection-color: rgba(190, 198, 245, .19); }
.boat-reflection { fill: var(--boat-reflection-color); opacity: .35; filter: blur(2px); }
.boat-reflection path + path { fill: none; stroke: var(--boat-reflection-color); stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
#lakeBoat.sailing .boat-reflection { animation: boatReflectionShimmer 2.4s ease-in-out infinite alternate; }
@keyframes boatReflectionShimmer { from { opacity: .2; } to { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { #lakeBoat.sailing .boat-reflection { animation: none !important; } }
/* A quiet idle float keeps the boat gently buoyant between trips. */
#lakeBoat:not(.sailing):not(.sailed) #boatArtwork {
    animation: boatIdleBob 3.8s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
}
@keyframes boatIdleBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-.6deg); }
}
@media (prefers-reduced-motion: reduce) {
    #lakeBoat #boatArtwork { animation: none !important; }
}


/* A quiet hover cue makes the little boat feel clickable. */
#boatArtwork { transition: filter .22s ease, transform .22s ease; }
#lakeBoat:hover #boatArtwork,
#lakeBoat:focus-visible #boatArtwork {
    filter: drop-shadow(0 0 5px rgba(255, 232, 184, .68));
}
@media (prefers-reduced-motion: reduce) { #boatArtwork { transition: none; } }

/* Smooth the boat's reset at the far shore and its return to the starting point. */
#lakeBoat { transition: opacity .45s ease; }
#lakeBoat.sailed { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #lakeBoat { transition: none; } }

/* Blend the scenic colors when the time-of-day theme changes. */
#scenicBackdrop svg stop { transition: stop-color 3.5s ease; }
#scenicBackdrop svg path,
#scenicBackdrop svg circle,
#scenicBackdrop svg ellipse,
#scenicBackdrop svg rect { transition: fill 3.5s ease, stroke 3.5s ease; }
@media (prefers-reduced-motion: reduce) {
    #scenicBackdrop svg stop,
    #scenicBackdrop svg path,
    #scenicBackdrop svg circle,
    #scenicBackdrop svg ellipse,
    #scenicBackdrop svg rect { transition: none; }
}

/* A faint tapered trail and soft head glow keep the occasional meteor subtle. */
.scene-meteor { display: none; filter: drop-shadow(0 0 2px rgba(205, 220, 255, .45)); transform-origin: 390px 125px; }
body[data-time-theme="night"] .scene-meteor { display: block; animation: nightMeteor 42s linear 5s infinite; }
@keyframes nightMeteor {
    0%, 10%, 100% { opacity: 0; transform: translate(0, 0); }
    10.5% { opacity: .86; transform: translate(0, 0); }
    14% { opacity: 0; transform: translate(440px, 155px); }
    14.1%, 99% { opacity: 0; transform: translate(440px, 155px); }
}
@media (prefers-reduced-motion: reduce) { body[data-time-theme="night"] .scene-meteor { display: none; animation: none !important; } }





/* Compact music player */
.garden-music {
    position: fixed;
    z-index: 20;
    left: 18px;
    bottom: 18px;
    width: min(340px, calc(100vw - 36px));
    padding: 12px 14px 10px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, rgba(38, 48, 70, .88), rgba(92, 58, 104, .84));
    box-shadow: 0 10px 32px rgba(15, 24, 42, .3), 0 0 22px rgba(255, 170, 225, .2);
    backdrop-filter: blur(14px);
    font: 14px/1.3 Arial, sans-serif;
}

.garden-music__heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.garden-music__heading span { color: #ffd5f0; font-size: 20px; }
.garden-music__controls { display: flex; align-items: center; gap: 8px; }
.garden-music__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.13);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.garden-music__toggle:not(:disabled):hover { background: rgba(255,190,230,.3); }
.garden-music__toggle:disabled { opacity: .45; cursor: not-allowed; }
.garden-music__volume-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.garden-music__volume { width: 72px; accent-color: #ff9cdb; }
.garden-music__loop { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; }
.garden-music__loop input { accent-color: #ff9cdb; }
.garden-music__status { overflow: hidden; margin: 8px 0 0; color: rgba(255,255,255,.82); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.garden-music button:focus-visible,
.garden-music input:focus-visible { outline: 2px solid #ffe4f6; outline-offset: 2px; }

@media (max-width: 600px) {
    .garden-music { left: 10px; bottom: 10px; width: min(340px, calc(100vw - 20px)); padding: 10px 12px; }
}
.garden-music__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.1);
    font: 24px/1 Arial, sans-serif;
    cursor: pointer;
}
.garden-music__step:hover:not(:disabled) { background: rgba(255,190,230,.3); }
.garden-music__step:disabled { opacity: .4; cursor: not-allowed; }









/* Quick gesture guide above the garden mode controls. */
.garden-how-to {
    position: fixed;
    z-index: 9998;
    right: 16px;
    bottom: 108px;
    left: 16px;
    width: fit-content;
    max-width: min(680px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: rgba(255, 255, 255, .94);
    background: rgba(25, 35, 52, .62);
    box-shadow: 0 5px 20px rgba(8, 16, 26, .18);
    backdrop-filter: blur(10px);
    font-size: 13px;
    line-height: 1.4;
    pointer-events: none;
}

@media (max-width: 600px) {
    .garden-how-to {
        bottom: 78px;
        padding: 8px 12px;
        border-radius: 16px;
        font-size: 12px;
    }
}