/* ========================================
   Forest Theme
   Deep woodland greens, earthy browns
   with floating fireflies and falling leaves
   ======================================== */

[data-theme="forest"] {
    --sidebar-bg: #0a1a0a;
    --sidebar-header-bg: #0e220e;
    --topbar-bg: #0e220e;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(26, 46, 26, 0.96);
    --card-header-bg: #1f3620;
    --card-border: #2d4a2d;

    --table-bg: rgba(26, 46, 26, 0.96);
    --table-header-bg: #1f3620;
    --table-border: #2d4a2d;
    --table-hover-bg: #243a24;
    --table-stripe-bg: #162816;

    --text-primary: #e0f0d8;
    --text-secondary: #a8c8a0;
    --text-muted: #6a8a60;
    --text-inverse: #0a1a0a;

    --border-color: #2d4a2d;
    --border-light: #3a5e3a;
    --sidebar-header-border: rgba(45, 74, 45, 0.3);
    --topbar-border: rgba(45, 74, 45, 0.3);

    --scrollbar-thumb: #2d4a2d;
    --scrollbar-thumb-hover: #3a5e3a;

    --sidebar-text: #a8c8a0;
    --sidebar-text-hover: #c8e850;
    --sidebar-active-bg: rgba(200, 232, 80, 0.1);
    --sidebar-active-text: #c8e850;
    --sidebar-active-border: #c8e850;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(200, 232, 80, 0.05);

    --topbar-text: #a8c8a0;
    --topbar-text-active: #c8e850;

    --btn-primary-bg: #4a8c30;
    --btn-primary-bg-hover: #5ca840;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #1f3620;
    --btn-secondary-bg-hover: #2d4a2d;
    --btn-secondary-text: #a8c8a0;
    --btn-secondary-border: #2d4a2d;
    --btn-outline-border: #3a5e3a;
    --btn-outline-text: #a8c8a0;

    --input-bg: #162816;
    --input-border: #2d4a2d;
    --input-text: #e0f0d8;
    --input-placeholder: #6a8a60;
    --input-focus-border: #c8e850;
    --input-disabled-bg: #0a1a0a;

    --dropdown-bg: #1a2e1a;
    --dropdown-border: #2d4a2d;
    --dropdown-text: #a8c8a0;
    --dropdown-hover-bg: #243a24;
    --dropdown-hover-text: #c8e850;

    --modal-bg: #1a2e1a;
    --modal-header-bg: #1f3620;
    --modal-border: #2d4a2d;
    --modal-backdrop: rgba(10, 26, 10, 0.88);

    --alert-info-bg: rgba(100, 200, 255, 0.08);
    --alert-info-border: #64c8ff;
    --alert-info-text: #80d8ff;
    --alert-success-bg: rgba(100, 220, 80, 0.1);
    --alert-success-border: #64dc50;
    --alert-success-text: #80e870;
    --alert-warning-bg: rgba(220, 180, 60, 0.1);
    --alert-warning-border: #dcb43c;
    --alert-warning-text: #e8c450;
    --alert-danger-bg: rgba(220, 80, 80, 0.08);
    --alert-danger-border: #dc5050;
    --alert-danger-text: #e87070;

    --success-color: #64dc50;
    --success-hover: #50b040;
    --warning-color: #dcb43c;
    --warning-hover: #b09030;
    --danger-color: #dc5050;
    --danger-hover: #b04040;

    --progress-bg: #1f3620;

    --avatar-bg: #4a8c30;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 4px 20px rgba(10, 40, 10, 0.3);
    --link-color: #80c850;
    --link-hover-color: #a0e070;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    /* --page-bg / --content-bg are transparent (animated body shows through),
       so --tl-bg-base uses the solid darkest colour from the body gradient. */
    --tl-bg-base:        #061006;
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0a1a0a);

    /* signature leaf-green / firefly glow */
    --tl-accent-primary:        var(--sidebar-active-text, var(--link-color));
    --tl-accent-primary-light:  var(--sidebar-text-hover, var(--link-hover-color, var(--link-color)));
    --tl-accent-primary-dark:   var(--link-color, var(--btn-primary-bg));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color, var(--btn-primary-bg)));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #fff);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #64dc50);
    --tl-error:   var(--danger-color, #dc5050);
    --tl-warning: var(--warning-color, #dcb43c);
    --tl-info:    var(--alert-info-text, var(--link-color, #4a9eff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(220, 80, 80, .12));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #dc5050));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0, 0, 0, .3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0, 0, 0, .4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0, 0, 0, .5));
}

/* Forest theme personality */
[data-theme="forest"] {
    --focus-ring-color: rgba(200, 232, 80, 0.25);
    --border-radius-card: 10px;
    --border-radius-btn: 6px;
    --scrollbar-track: #0a1a0a;
}

[data-theme="forest"] ::selection {
    background-color: rgba(200, 232, 80, 0.25);
    color: #e0f0d8;
}

/* backdrop-filter removed for performance — cards use opaque backgrounds */

/* ========================================
   Forest Floor Background
   Layered depth — dark canopy overhead,
   light shafts breaking through, dark floor
   ======================================== */

[data-theme="forest"] body {
    background:
        /* Sunlight shafts — diagonal beams from upper-left */
        linear-gradient(155deg, rgba(160, 200, 60, 0.06) 0%, transparent 15%),
        linear-gradient(145deg, transparent 25%, rgba(180, 220, 80, 0.04) 30%, transparent 38%),
        linear-gradient(160deg, transparent 50%, rgba(140, 190, 50, 0.03) 55%, transparent 62%),
        linear-gradient(140deg, transparent 70%, rgba(160, 210, 60, 0.04) 74%, transparent 80%),
        /* Canopy dappled patches — warm spots where light hits */
        radial-gradient(ellipse 300px 150px at 25% 20%, rgba(120, 180, 40, 0.06), transparent),
        radial-gradient(ellipse 200px 120px at 65% 35%, rgba(140, 200, 60, 0.05), transparent),
        radial-gradient(ellipse 250px 100px at 80% 15%, rgba(120, 180, 40, 0.04), transparent),
        /* Vignette — darker at edges like looking through a clearing */
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 10, 0, 0.3) 100%),
        /* Forest depth gradient */
        linear-gradient(180deg,
            #061006 0%,
            #0c1e0c 10%,
            #122a12 25%,
            #0f240f 45%,
            #0b1e0b 65%,
            #071407 80%,
            #040e04 100%
        ) fixed !important;
}

/* ========================================
   Floating Fireflies
   Close layer: warm yellow-green, breathe
   slowly in and out, drift gently
   Far layer: cooler/dimmer, different rhythm
   ======================================== */

[data-theme="forest"]:not([data-effects-off]):not([data-effect-fireflies-off]) body::before {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem);
    pointer-events: none;
    z-index: 9998;
    background-image:
        /* Warm close fireflies — bigger glow halos */
        radial-gradient(circle 5px at 90px 220px, rgba(200, 240, 60, 0.0), transparent),
        radial-gradient(circle 4px at 260px 380px, rgba(210, 245, 70, 0.0), transparent),
        radial-gradient(circle 5px at 440px 160px, rgba(190, 235, 50, 0.0), transparent),
        radial-gradient(circle 4px at 600px 420px, rgba(210, 245, 70, 0.0), transparent),
        radial-gradient(circle 5px at 740px 300px, rgba(200, 240, 60, 0.0), transparent),
        radial-gradient(circle 4px at 920px 200px, rgba(190, 235, 50, 0.0), transparent),
        radial-gradient(circle 5px at 160px 480px, rgba(210, 245, 70, 0.0), transparent),
        radial-gradient(circle 4px at 380px 110px, rgba(200, 240, 60, 0.0), transparent),
        radial-gradient(circle 5px at 670px 520px, rgba(190, 235, 50, 0.0), transparent),
        radial-gradient(circle 4px at 850px 400px, rgba(210, 245, 70, 0.0), transparent);
    background-size: 1000px 600px;
    animation: fireflies-breathe 6s ease-in-out infinite;
}

[data-theme="forest"]:not([data-effects-off]):not([data-effect-fireflies-off]) body::after {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem);
    pointer-events: none;
    z-index: 9998;
    background-image:
        /* Distant cool fireflies — smaller, dimmer */
        radial-gradient(circle 3px at 130px 320px, rgba(160, 210, 40, 0.0), transparent),
        radial-gradient(circle 2.5px at 310px 200px, rgba(170, 215, 45, 0.0), transparent),
        radial-gradient(circle 3px at 520px 470px, rgba(160, 210, 40, 0.0), transparent),
        radial-gradient(circle 2.5px at 700px 140px, rgba(170, 215, 45, 0.0), transparent),
        radial-gradient(circle 3px at 870px 370px, rgba(160, 210, 40, 0.0), transparent),
        radial-gradient(circle 2.5px at 210px 520px, rgba(170, 215, 45, 0.0), transparent),
        radial-gradient(circle 3px at 470px 270px, rgba(160, 210, 40, 0.0), transparent),
        radial-gradient(circle 2.5px at 770px 500px, rgba(170, 215, 45, 0.0), transparent);
    background-size: 1000px 600px;
    animation: fireflies-breathe-far 9s ease-in-out infinite;
}

/* Fireflies breathe — opacity pulses while drifting slightly */
@keyframes fireflies-breathe {
    0% {
        background-image:
            radial-gradient(circle 5px at 90px 220px, rgba(200, 240, 60, 0.5), transparent 6px),
            radial-gradient(circle 4px at 260px 380px, rgba(210, 245, 70, 0.1), transparent 5px),
            radial-gradient(circle 5px at 440px 160px, rgba(190, 235, 50, 0.6), transparent 6px),
            radial-gradient(circle 4px at 600px 420px, rgba(210, 245, 70, 0.2), transparent 5px),
            radial-gradient(circle 5px at 740px 300px, rgba(200, 240, 60, 0.05), transparent 6px),
            radial-gradient(circle 4px at 920px 200px, rgba(190, 235, 50, 0.4), transparent 5px),
            radial-gradient(circle 5px at 160px 480px, rgba(210, 245, 70, 0.6), transparent 6px),
            radial-gradient(circle 4px at 380px 110px, rgba(200, 240, 60, 0.1), transparent 5px),
            radial-gradient(circle 5px at 670px 520px, rgba(190, 235, 50, 0.3), transparent 6px),
            radial-gradient(circle 4px at 850px 400px, rgba(210, 245, 70, 0.5), transparent 5px);
        background-position: 0px 0px;
    }
    33% {
        background-image:
            radial-gradient(circle 5px at 90px 220px, rgba(200, 240, 60, 0.1), transparent 6px),
            radial-gradient(circle 4px at 260px 380px, rgba(210, 245, 70, 0.5), transparent 5px),
            radial-gradient(circle 5px at 440px 160px, rgba(190, 235, 50, 0.15), transparent 6px),
            radial-gradient(circle 4px at 600px 420px, rgba(210, 245, 70, 0.6), transparent 5px),
            radial-gradient(circle 5px at 740px 300px, rgba(200, 240, 60, 0.5), transparent 6px),
            radial-gradient(circle 4px at 920px 200px, rgba(190, 235, 50, 0.1), transparent 5px),
            radial-gradient(circle 5px at 160px 480px, rgba(210, 245, 70, 0.1), transparent 6px),
            radial-gradient(circle 4px at 380px 110px, rgba(200, 240, 60, 0.6), transparent 5px),
            radial-gradient(circle 5px at 670px 520px, rgba(190, 235, 50, 0.05), transparent 6px),
            radial-gradient(circle 4px at 850px 400px, rgba(210, 245, 70, 0.15), transparent 5px);
        background-position: 12px -8px;
    }
    66% {
        background-image:
            radial-gradient(circle 5px at 90px 220px, rgba(200, 240, 60, 0.3), transparent 6px),
            radial-gradient(circle 4px at 260px 380px, rgba(210, 245, 70, 0.05), transparent 5px),
            radial-gradient(circle 5px at 440px 160px, rgba(190, 235, 50, 0.4), transparent 6px),
            radial-gradient(circle 4px at 600px 420px, rgba(210, 245, 70, 0.1), transparent 5px),
            radial-gradient(circle 5px at 740px 300px, rgba(200, 240, 60, 0.15), transparent 6px),
            radial-gradient(circle 4px at 920px 200px, rgba(190, 235, 50, 0.6), transparent 5px),
            radial-gradient(circle 5px at 160px 480px, rgba(210, 245, 70, 0.4), transparent 6px),
            radial-gradient(circle 4px at 380px 110px, rgba(200, 240, 60, 0.05), transparent 5px),
            radial-gradient(circle 5px at 670px 520px, rgba(190, 235, 50, 0.6), transparent 6px),
            radial-gradient(circle 4px at 850px 400px, rgba(210, 245, 70, 0.3), transparent 5px);
        background-position: -8px 6px;
    }
    100% {
        background-image:
            radial-gradient(circle 5px at 90px 220px, rgba(200, 240, 60, 0.5), transparent 6px),
            radial-gradient(circle 4px at 260px 380px, rgba(210, 245, 70, 0.1), transparent 5px),
            radial-gradient(circle 5px at 440px 160px, rgba(190, 235, 50, 0.6), transparent 6px),
            radial-gradient(circle 4px at 600px 420px, rgba(210, 245, 70, 0.2), transparent 5px),
            radial-gradient(circle 5px at 740px 300px, rgba(200, 240, 60, 0.05), transparent 6px),
            radial-gradient(circle 4px at 920px 200px, rgba(190, 235, 50, 0.4), transparent 5px),
            radial-gradient(circle 5px at 160px 480px, rgba(210, 245, 70, 0.6), transparent 6px),
            radial-gradient(circle 4px at 380px 110px, rgba(200, 240, 60, 0.1), transparent 5px),
            radial-gradient(circle 5px at 670px 520px, rgba(190, 235, 50, 0.3), transparent 6px),
            radial-gradient(circle 4px at 850px 400px, rgba(210, 245, 70, 0.5), transparent 5px);
        background-position: 0px 0px;
    }
}

@keyframes fireflies-breathe-far {
    0% {
        background-image:
            radial-gradient(circle 3px at 130px 320px, rgba(160, 210, 40, 0.25), transparent 4px),
            radial-gradient(circle 2.5px at 310px 200px, rgba(170, 215, 45, 0.05), transparent 3px),
            radial-gradient(circle 3px at 520px 470px, rgba(160, 210, 40, 0.3), transparent 4px),
            radial-gradient(circle 2.5px at 700px 140px, rgba(170, 215, 45, 0.1), transparent 3px),
            radial-gradient(circle 3px at 870px 370px, rgba(160, 210, 40, 0.05), transparent 4px),
            radial-gradient(circle 2.5px at 210px 520px, rgba(170, 215, 45, 0.3), transparent 3px),
            radial-gradient(circle 3px at 470px 270px, rgba(160, 210, 40, 0.2), transparent 4px),
            radial-gradient(circle 2.5px at 770px 500px, rgba(170, 215, 45, 0.05), transparent 3px);
        background-position: 0px 0px;
    }
    50% {
        background-image:
            radial-gradient(circle 3px at 130px 320px, rgba(160, 210, 40, 0.05), transparent 4px),
            radial-gradient(circle 2.5px at 310px 200px, rgba(170, 215, 45, 0.3), transparent 3px),
            radial-gradient(circle 3px at 520px 470px, rgba(160, 210, 40, 0.05), transparent 4px),
            radial-gradient(circle 2.5px at 700px 140px, rgba(170, 215, 45, 0.25), transparent 3px),
            radial-gradient(circle 3px at 870px 370px, rgba(160, 210, 40, 0.3), transparent 4px),
            radial-gradient(circle 2.5px at 210px 520px, rgba(170, 215, 45, 0.05), transparent 3px),
            radial-gradient(circle 3px at 470px 270px, rgba(160, 210, 40, 0.05), transparent 4px),
            radial-gradient(circle 2.5px at 770px 500px, rgba(170, 215, 45, 0.3), transparent 3px);
        background-position: -15px 10px;
    }
    100% {
        background-image:
            radial-gradient(circle 3px at 130px 320px, rgba(160, 210, 40, 0.25), transparent 4px),
            radial-gradient(circle 2.5px at 310px 200px, rgba(170, 215, 45, 0.05), transparent 3px),
            radial-gradient(circle 3px at 520px 470px, rgba(160, 210, 40, 0.3), transparent 4px),
            radial-gradient(circle 2.5px at 700px 140px, rgba(170, 215, 45, 0.1), transparent 3px),
            radial-gradient(circle 3px at 870px 370px, rgba(160, 210, 40, 0.05), transparent 4px),
            radial-gradient(circle 2.5px at 210px 520px, rgba(170, 215, 45, 0.3), transparent 3px),
            radial-gradient(circle 3px at 470px 270px, rgba(160, 210, 40, 0.2), transparent 4px),
            radial-gradient(circle 2.5px at 770px 500px, rgba(170, 215, 45, 0.05), transparent 3px);
        background-position: 0px 0px;
    }
}

/* ========================================
   Forest Floor Mist
   Deep layered fog rolling along the bottom
   with gentle horizontal drift
   ======================================== */

[data-theme="forest"]:not([data-effects-off]):not([data-effect-mist-off]) #page-root::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: -20%;
    width: 140%;
    height: 150px;
    pointer-events: none;
    z-index: 9997;
    background:
        /* Top wispy layer */
        radial-gradient(ellipse 400px 40px at 20% 20%, rgba(140, 180, 120, 0.08), transparent),
        radial-gradient(ellipse 350px 35px at 60% 30%, rgba(150, 190, 130, 0.06), transparent),
        radial-gradient(ellipse 450px 45px at 80% 15%, rgba(140, 180, 120, 0.07), transparent),
        /* Main fog bank */
        radial-gradient(ellipse 500px 80px at 30% 60%, rgba(160, 200, 140, 0.12), transparent),
        radial-gradient(ellipse 600px 90px at 70% 70%, rgba(150, 190, 130, 0.10), transparent),
        /* Dense bottom */
        linear-gradient(to top,
            rgba(140, 180, 120, 0.16) 0%,
            rgba(150, 190, 130, 0.10) 20%,
            rgba(140, 180, 120, 0.05) 45%,
            transparent 100%
        );
    animation: mist-drift 25s ease-in-out infinite alternate;
}

@keyframes mist-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(60px); }
}

/* ========================================
   Light Shafts from Canopy
   Diagonal beams visible in the upper area
   ======================================== */

[data-theme="forest"]:not([data-effects-off]):not([data-effect-lightshafts-off]) #page-root::before {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem);
    pointer-events: none;
    z-index: 1;
    background:
        /* Shaft 1 — wide, from upper-left */
        linear-gradient(150deg,
            transparent 10%,
            rgba(180, 220, 80, 0.03) 12%,
            rgba(200, 240, 100, 0.06) 14%,
            rgba(180, 220, 80, 0.03) 16%,
            transparent 18%
        ),
        /* Shaft 2 — narrower, steeper */
        linear-gradient(140deg,
            transparent 35%,
            rgba(160, 200, 60, 0.02) 36.5%,
            rgba(180, 230, 80, 0.05) 38%,
            rgba(160, 200, 60, 0.02) 39.5%,
            transparent 41%
        ),
        /* Shaft 3 — right side */
        linear-gradient(160deg,
            transparent 60%,
            rgba(170, 210, 70, 0.02) 62%,
            rgba(190, 240, 90, 0.04) 63.5%,
            rgba(170, 210, 70, 0.02) 65%,
            transparent 67%
        );
    animation: shafts-shimmer 10s ease-in-out infinite alternate;
}

@keyframes shafts-shimmer {
    0% { opacity: 0.6; }
    30% { opacity: 1; }
    60% { opacity: 0.7; }
    100% { opacity: 0.9; }
}

/* ========================================
   Canopy Edge — SVG leaf silhouettes
   Hanging down from the nav bar, scrolls
   away with page content
   ======================================== */

[data-theme="forest"] .top-row {
    position: relative;
    background: linear-gradient(180deg, #030a03 0%, #0e220e 100%) !important;
}

[data-theme="forest"] article.content {
    position: relative;
    padding-top: 0 !important;
    overflow-x: clip;
}

[data-theme="forest"]:not([data-effects-off]):not([data-effect-canopy-off]) article.content::before {
    content: '';
    display: block;
    width: calc(200% + 6rem);
    margin-left: -1.5rem;
    height: 50px;
    margin-top: -2px;
    pointer-events: none;
    flex-shrink: 0;
    /* Dark canopy colour — masked by leaf shapes */
    background: linear-gradient(180deg, #0a1a0a 0%, #0e220e 30%, rgba(14, 34, 14, 0.7) 60%, rgba(10, 26, 10, 0.3) 80%, transparent 100%);
    /*
       Leaf silhouette mask — 800px tile with varied leaves:
       - Broad rounded, narrow pointed, asymmetric wind-blown
       - Compound clusters (2-3 leaves from one stem)
       - Different sizes (18-42px) and slight tilts
       - Dense band at top (12px solid) for seamless join to nav
    */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 50'%3E%3Crect x='0' y='0' width='800' height='12' fill='white'/%3E%3Cpath d='M18,12 C24,22 26,34 20,42 C15,34 14,22 18,12Z' fill='white'/%3E%3Cpath d='M40,11 C44,18 43,26 40,30 C37,26 36,18 40,11Z' fill='white'/%3E%3Cpath d='M62,12 C70,20 72,32 62,40 C52,32 54,20 62,12Z' fill='white'/%3E%3Cpath d='M90,12 C93,24 92,36 90,44 C88,36 87,24 90,12Z' fill='white'/%3E%3Cpath d='M108,11 C112,18 111,24 108,28 C105,24 104,18 108,11Z' fill='white'/%3E%3Cpath d='M118,12 C122,20 121,26 118,30 C115,26 114,20 118,12Z' fill='white'/%3E%3Cpath d='M148,12 C142,24 138,36 144,44 C150,36 154,24 148,12Z' fill='white'/%3E%3Cpath d='M170,12 C176,22 178,32 172,38 C166,30 165,20 170,12Z' fill='white'/%3E%3Cpath d='M195,11 C199,20 198,30 195,36 C192,30 191,20 195,11Z' fill='white'/%3E%3Cpath d='M210,12 C214,18 213,24 210,28 C207,24 206,18 210,12Z' fill='white'/%3E%3Cpath d='M222,12 C228,22 230,32 224,38 C219,30 218,22 222,12Z' fill='white'/%3E%3Cpath d='M255,12 C261,26 264,40 258,48 C252,38 250,24 255,12Z' fill='white'/%3E%3Cpath d='M275,11 C279,20 278,28 275,34 C272,28 271,20 275,11Z' fill='white'/%3E%3Cpath d='M290,12 C294,18 293,24 290,28 C287,24 286,18 290,12Z' fill='white'/%3E%3Cpath d='M300,12 C306,20 308,28 302,34 C297,28 296,20 300,12Z' fill='white'/%3E%3Cpath d='M330,12 C334,24 333,36 330,42 C327,36 326,24 330,12Z' fill='white'/%3E%3Cpath d='M355,11 C360,22 362,34 356,42 C351,34 350,22 355,11Z' fill='white'/%3E%3Cpath d='M378,12 C382,18 381,24 378,28 C375,24 374,18 378,12Z' fill='white'/%3E%3Cpath d='M388,12 C392,20 391,28 388,34 C385,28 384,20 388,12Z' fill='white'/%3E%3Cpath d='M415,12 C409,24 406,38 412,46 C418,38 422,24 415,12Z' fill='white'/%3E%3Cpath d='M440,11 C446,22 448,34 442,42 C436,32 435,20 440,11Z' fill='white'/%3E%3Cpath d='M465,12 C469,18 468,24 465,28 C462,24 461,18 465,12Z' fill='white'/%3E%3Cpath d='M478,12 C484,24 486,36 480,44 C474,34 473,22 478,12Z' fill='white'/%3E%3Cpath d='M505,11 C509,20 508,30 505,36 C502,30 501,20 505,11Z' fill='white'/%3E%3Cpath d='M525,12 C529,18 528,24 525,28 C522,24 521,18 525,12Z' fill='white'/%3E%3Cpath d='M540,12 C546,22 548,32 542,40 C536,32 535,22 540,12Z' fill='white'/%3E%3Cpath d='M568,12 C574,26 576,40 570,48 C564,38 562,24 568,12Z' fill='white'/%3E%3Cpath d='M595,11 C599,20 598,28 595,34 C592,28 591,20 595,11Z' fill='white'/%3E%3Cpath d='M612,12 C616,18 615,24 612,28 C609,24 608,18 612,12Z' fill='white'/%3E%3Cpath d='M630,12 C636,22 638,34 632,42 C626,32 625,20 630,12Z' fill='white'/%3E%3Cpath d='M660,12 C664,24 663,36 660,44 C657,36 656,24 660,12Z' fill='white'/%3E%3Cpath d='M685,11 C689,18 688,26 685,30 C682,26 681,18 685,11Z' fill='white'/%3E%3Cpath d='M700,12 C706,20 708,30 702,36 C696,28 695,20 700,12Z' fill='white'/%3E%3Cpath d='M728,12 C722,24 718,36 724,44 C730,36 734,24 728,12Z' fill='white'/%3E%3Cpath d='M755,11 C761,22 764,36 758,44 C752,34 750,22 755,11Z' fill='white'/%3E%3Cpath d='M780,12 C784,18 783,26 780,30 C777,26 776,18 780,12Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 50'%3E%3Crect x='0' y='0' width='800' height='12' fill='white'/%3E%3Cpath d='M18,12 C24,22 26,34 20,42 C15,34 14,22 18,12Z' fill='white'/%3E%3Cpath d='M40,11 C44,18 43,26 40,30 C37,26 36,18 40,11Z' fill='white'/%3E%3Cpath d='M62,12 C70,20 72,32 62,40 C52,32 54,20 62,12Z' fill='white'/%3E%3Cpath d='M90,12 C93,24 92,36 90,44 C88,36 87,24 90,12Z' fill='white'/%3E%3Cpath d='M108,11 C112,18 111,24 108,28 C105,24 104,18 108,11Z' fill='white'/%3E%3Cpath d='M118,12 C122,20 121,26 118,30 C115,26 114,20 118,12Z' fill='white'/%3E%3Cpath d='M148,12 C142,24 138,36 144,44 C150,36 154,24 148,12Z' fill='white'/%3E%3Cpath d='M170,12 C176,22 178,32 172,38 C166,30 165,20 170,12Z' fill='white'/%3E%3Cpath d='M195,11 C199,20 198,30 195,36 C192,30 191,20 195,11Z' fill='white'/%3E%3Cpath d='M210,12 C214,18 213,24 210,28 C207,24 206,18 210,12Z' fill='white'/%3E%3Cpath d='M222,12 C228,22 230,32 224,38 C219,30 218,22 222,12Z' fill='white'/%3E%3Cpath d='M255,12 C261,26 264,40 258,48 C252,38 250,24 255,12Z' fill='white'/%3E%3Cpath d='M275,11 C279,20 278,28 275,34 C272,28 271,20 275,11Z' fill='white'/%3E%3Cpath d='M290,12 C294,18 293,24 290,28 C287,24 286,18 290,12Z' fill='white'/%3E%3Cpath d='M300,12 C306,20 308,28 302,34 C297,28 296,20 300,12Z' fill='white'/%3E%3Cpath d='M330,12 C334,24 333,36 330,42 C327,36 326,24 330,12Z' fill='white'/%3E%3Cpath d='M355,11 C360,22 362,34 356,42 C351,34 350,22 355,11Z' fill='white'/%3E%3Cpath d='M378,12 C382,18 381,24 378,28 C375,24 374,18 378,12Z' fill='white'/%3E%3Cpath d='M388,12 C392,20 391,28 388,34 C385,28 384,20 388,12Z' fill='white'/%3E%3Cpath d='M415,12 C409,24 406,38 412,46 C418,38 422,24 415,12Z' fill='white'/%3E%3Cpath d='M440,11 C446,22 448,34 442,42 C436,32 435,20 440,11Z' fill='white'/%3E%3Cpath d='M465,12 C469,18 468,24 465,28 C462,24 461,18 465,12Z' fill='white'/%3E%3Cpath d='M478,12 C484,24 486,36 480,44 C474,34 473,22 478,12Z' fill='white'/%3E%3Cpath d='M505,11 C509,20 508,30 505,36 C502,30 501,20 505,11Z' fill='white'/%3E%3Cpath d='M525,12 C529,18 528,24 525,28 C522,24 521,18 525,12Z' fill='white'/%3E%3Cpath d='M540,12 C546,22 548,32 542,40 C536,32 535,22 540,12Z' fill='white'/%3E%3Cpath d='M568,12 C574,26 576,40 570,48 C564,38 562,24 568,12Z' fill='white'/%3E%3Cpath d='M595,11 C599,20 598,28 595,34 C592,28 591,20 595,11Z' fill='white'/%3E%3Cpath d='M612,12 C616,18 615,24 612,28 C609,24 608,18 612,12Z' fill='white'/%3E%3Cpath d='M630,12 C636,22 638,34 632,42 C626,32 625,20 630,12Z' fill='white'/%3E%3Cpath d='M660,12 C664,24 663,36 660,44 C657,36 656,24 660,12Z' fill='white'/%3E%3Cpath d='M685,11 C689,18 688,26 685,30 C682,26 681,18 685,11Z' fill='white'/%3E%3Cpath d='M700,12 C706,20 708,30 702,36 C696,28 695,20 700,12Z' fill='white'/%3E%3Cpath d='M728,12 C722,24 718,36 724,44 C730,36 734,24 728,12Z' fill='white'/%3E%3Cpath d='M755,11 C761,22 764,36 758,44 C752,34 750,22 755,11Z' fill='white'/%3E%3Cpath d='M780,12 C784,18 783,26 780,30 C777,26 776,18 780,12Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 400px 100%;
    -webkit-mask-size: 400px 100%;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    animation: canopy-sway 25s ease-in-out infinite;
}

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