/* ==========================================
   Seasonal & Weather Effects
   ========================================== */
body {
    background:
        radial-gradient(circle at 8% 16%, var(--season-glow-a, rgba(245, 158, 11, 0.12)), transparent 28rem),
        radial-gradient(circle at 88% 12%, var(--season-glow-b, rgba(184, 154, 104, 0.14)), transparent 24rem),
        linear-gradient(180deg, var(--season-bg-top, var(--bg-tint)), var(--season-bg-bottom, #f8efe2));
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    opacity: var(--season-layer-opacity, 0);
    background:
        radial-gradient(closest-side at 18% 26%, var(--season-mote-a, rgba(255, 255, 255, 0.32)), transparent 70%),
        radial-gradient(closest-side at 76% 22%, var(--season-mote-b, rgba(255, 237, 213, 0.24)), transparent 68%),
        radial-gradient(closest-side at 64% 86%, var(--season-mote-c, rgba(184, 154, 104, 0.14)), transparent 72%);
}

body::after {
    opacity: var(--weather-layer-opacity, 0);
    background:
        linear-gradient(105deg, transparent 0 46%, rgba(219, 234, 254, 0.38) 47% 48%, transparent 49% 100%),
        linear-gradient(105deg, transparent 0 58%, rgba(255, 255, 255, 0.24) 59% 60%, transparent 61% 100%),
        linear-gradient(105deg, transparent 0 35%, rgba(147, 197, 253, 0.2) 36% 37%, transparent 38% 100%);
    background-size: 90px 220px, 148px 280px, 210px 340px;
    animation: weatherRainDrift 1.05s linear infinite;
}

main,
.site-footer {
    position: relative;
    z-index: 1;
}

body.season-spring {
    --season-layer-opacity: 0.62;
    --season-bg-top: #eff6df;
    --season-bg-bottom: #fff7ed;
    --season-glow-a: rgba(132, 204, 22, 0.16);
    --season-glow-b: rgba(244, 114, 182, 0.13);
    --season-mote-a: rgba(220, 252, 231, 0.46);
    --season-mote-b: rgba(252, 231, 243, 0.34);
    --season-mote-c: rgba(187, 247, 208, 0.22);
}

body.season-summer {
    --season-layer-opacity: 0.62;
    --season-bg-top: #fff4d2;
    --season-bg-bottom: #edf8e6;
    --season-glow-a: rgba(250, 204, 21, 0.22);
    --season-glow-b: rgba(45, 212, 191, 0.12);
    --season-mote-a: rgba(254, 249, 195, 0.42);
    --season-mote-b: rgba(204, 251, 241, 0.24);
    --season-mote-c: rgba(253, 186, 116, 0.16);
}

body.season-autumn {
    --season-layer-opacity: 0.62;
    --season-bg-top: #f6e6d1;
    --season-bg-bottom: #fff7ed;
    --season-glow-a: rgba(217, 119, 6, 0.18);
    --season-glow-b: rgba(185, 28, 28, 0.1);
    --season-mote-a: rgba(254, 215, 170, 0.38);
    --season-mote-b: rgba(254, 202, 202, 0.2);
    --season-mote-c: rgba(180, 83, 9, 0.16);
}

body.season-winter {
    --season-layer-opacity: 0.62;
    --season-bg-top: #edf6fb;
    --season-bg-bottom: #f8f1e7;
    --season-glow-a: rgba(186, 230, 253, 0.28);
    --season-glow-b: rgba(226, 232, 240, 0.26);
    --season-mote-a: rgba(255, 255, 255, 0.54);
    --season-mote-b: rgba(224, 242, 254, 0.34);
    --season-mote-c: rgba(203, 213, 225, 0.2);
}

/* Time of day follows the restaurant clock (Europe/Warsaw). */
body.time-morning {
    --season-bg-top: #fff2d7;
    --season-bg-bottom: #eef7e5;
    --season-glow-a: rgba(251, 146, 60, 0.24);
    --season-glow-b: rgba(253, 224, 71, 0.18);
    --season-mote-a: rgba(255, 247, 237, 0.58);
    --season-mote-b: rgba(254, 243, 199, 0.34);
    --season-mote-c: rgba(187, 247, 208, 0.18);
    --season-layer-opacity: 0.68;
}

body.time-noon {
    --season-bg-top: #fef9df;
    --season-bg-bottom: #e9f7ee;
    --season-glow-a: rgba(250, 204, 21, 0.24);
    --season-glow-b: rgba(45, 212, 191, 0.14);
    --season-mote-a: rgba(255, 251, 235, 0.5);
    --season-mote-b: rgba(204, 251, 241, 0.28);
    --season-mote-c: rgba(254, 240, 138, 0.16);
    --season-layer-opacity: 0.6;
}

body.time-evening {
    --season-bg-top: #f8c8a6;
    --season-bg-bottom: #f1d8dc;
    --season-glow-a: rgba(234, 88, 12, 0.26);
    --season-glow-b: rgba(190, 24, 93, 0.18);
    --season-mote-a: rgba(255, 237, 213, 0.48);
    --season-mote-b: rgba(254, 205, 211, 0.34);
    --season-mote-c: rgba(251, 146, 60, 0.18);
    --season-layer-opacity: 0.7;
}

body.time-midnight {
    --season-bg-top: #07111f;
    --season-bg-bottom: #1d2b44;
    --season-glow-a: rgba(59, 130, 246, 0.16);
    --season-glow-b: rgba(196, 181, 253, 0.12);
    --season-mote-a: rgba(219, 234, 254, 0.24);
    --season-mote-b: rgba(237, 233, 254, 0.18);
    --season-mote-c: rgba(191, 219, 254, 0.14);
    --season-layer-opacity: 0.74;
}

body.time-morning::before {
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.64) 0 1.7px, transparent 2.6px),
        radial-gradient(circle at 72% 16%, rgba(254, 240, 138, 0.48) 0 1.4px, transparent 2.4px),
        radial-gradient(ellipse at 16% 24%, rgba(255, 247, 237, 0.5), transparent 34rem),
        radial-gradient(ellipse at 78% 18%, rgba(253, 224, 71, 0.24), transparent 28rem),
        radial-gradient(closest-side at 18% 26%, var(--season-mote-a), transparent 70%),
        radial-gradient(closest-side at 76% 22%, var(--season-mote-b), transparent 68%),
        radial-gradient(closest-side at 64% 86%, var(--season-mote-c), transparent 72%);
    background-size: 180px 160px, 260px 210px, auto, auto, auto, auto, auto;
}

body.time-noon::before {
    background:
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.48) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 78% 18%, rgba(254, 249, 195, 0.46) 0 1.6px, transparent 2.6px),
        radial-gradient(ellipse at 50% 7%, rgba(255, 255, 255, 0.36), transparent 34rem),
        radial-gradient(ellipse at 78% 26%, rgba(45, 212, 191, 0.16), transparent 30rem),
        radial-gradient(closest-side at 18% 26%, var(--season-mote-a), transparent 70%),
        radial-gradient(closest-side at 76% 22%, var(--season-mote-b), transparent 68%),
        radial-gradient(closest-side at 64% 86%, var(--season-mote-c), transparent 72%);
    background-size: 220px 190px, 300px 240px, auto, auto, auto, auto, auto;
}

body.time-evening::before {
    background:
        radial-gradient(circle at 12% 19%, rgba(255, 237, 213, 0.58) 0 1.7px, transparent 2.7px),
        radial-gradient(circle at 66% 11%, rgba(254, 205, 211, 0.42) 0 1.3px, transparent 2.4px),
        radial-gradient(ellipse at 14% 32%, rgba(251, 146, 60, 0.28), transparent 31rem),
        radial-gradient(ellipse at 83% 20%, rgba(190, 24, 93, 0.16), transparent 28rem),
        radial-gradient(closest-side at 18% 26%, var(--season-mote-a), transparent 70%),
        radial-gradient(closest-side at 76% 22%, var(--season-mote-b), transparent 68%),
        radial-gradient(closest-side at 64% 86%, var(--season-mote-c), transparent 72%);
    background-size: 190px 170px, 280px 220px, auto, auto, auto, auto, auto;
}
body.time-midnight::before {
    background:
        radial-gradient(circle at 11% 18%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.6px),
        radial-gradient(circle at 31% 9%, rgba(191, 219, 254, 0.82) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 48% 21%, rgba(255, 255, 255, 0.78) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 67% 13%, rgba(224, 242, 254, 0.9) 0 1.15px, transparent 1.8px),
        radial-gradient(circle at 86% 26%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.7px),
        radial-gradient(closest-side at 18% 26%, var(--season-mote-a), transparent 70%),
        radial-gradient(closest-side at 76% 22%, var(--season-mote-b), transparent 68%),
        radial-gradient(closest-side at 64% 86%, var(--season-mote-c), transparent 72%);
    background-size:
        190px 170px,
        260px 210px,
        220px 260px,
        310px 230px,
        280px 250px,
        auto,
        auto,
        auto;
    background-position:
        0 0,
        36px 18px,
        90px 60px,
        18px 92px,
        120px 26px,
        0 0,
        0 0,
        0 0;
}



body.weather-rain,
body.weather-storm {
    --weather-layer-opacity: 0.22;
}

body.weather-snow {
    --weather-layer-opacity: 0.12;
}

body.weather-rain::before,
body.weather-storm::before {
    opacity: 0.78;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.02)),
        radial-gradient(closest-side at 18% 26%, rgba(191, 219, 254, 0.36), transparent 70%),
        radial-gradient(closest-side at 78% 22%, rgba(148, 163, 184, 0.26), transparent 68%);
}

body.weather-snow::after {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 2.2px, transparent 3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 1.4px, transparent 2.1px),
        radial-gradient(circle, rgba(224, 242, 254, 0.46) 0 1.8px, transparent 2.6px);
    background-size: 92px 130px, 150px 190px, 220px 280px;
    animation: weatherSnowDrift 11s linear infinite;
}

body.seasonal-effects-disabled::before,
body.seasonal-effects-disabled::after {
    display: none;
}

body.seasonal-effects-disabled .seasonal-decor,
body.seasonal-effects-disabled .about-weather-scene,
body.seasonal-effects-disabled .about-season-scene {
    display: none;
}

@keyframes weatherRainDrift {
    from { background-position: -40px -220px, -80px -280px, -120px -340px; }
    to { background-position: 0 0, 0 0, 0 0; }
}

@keyframes weatherSnowDrift {
    from { background-position: 0 -130px, 0 -190px, 0 -280px; }
    50% { background-position: 24px -65px, -18px -95px, 16px -140px; }
    to { background-position: 48px 0, -32px 0, 30px 0; }
}

.seasonal-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint style;
}

.seasonal-decor *,
.about-weather-scene *,
.about-season-scene *,
.effect-layer,
.effect-particle,
.effect-grass,
.effect-branch,
.effect-tree,
.effect-cloud-wisp,
.effect-raindrop,
.effect-splash,
.effect-lightning-bolt,
.effect-lightning-flash {
    pointer-events: none;
}

.seasonal-decor .effect-layer {
    z-index: 2;
}

.seasonal-decor .effect-layer-back {
    z-index: 1;
}

.seasonal-decor .effect-layer-mid {
    z-index: 3;
}

.seasonal-decor .effect-layer-front {
    z-index: 4;
}

.seasonal-decor-piece,
.weather-decor {
    position: absolute;
    display: block;
    opacity: 0.84;
}

.seasonal-decor-piece {
    width: clamp(6rem, 13vw, 12rem);
    height: clamp(6rem, 13vw, 12rem);
    border-radius: 42% 58% 54% 46%;
    filter: blur(0.2px) drop-shadow(0 16px 24px rgba(20, 14, 10, 0.12));
    transform: rotate(var(--decor-rotate, -12deg));
    z-index: 2;
}

.seasonal-decor-piece::before,
.seasonal-decor-piece::after {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: inherit;
    background: inherit;
    transform: rotate(58deg) scale(0.78);
}

.seasonal-decor-piece::after {
    inset: 28%;
    transform: rotate(-42deg) scale(0.62);
    opacity: 0.72;
}

.seasonal-decor-piece-a {
    left: clamp(1rem, 4vw, 4.8rem);
    bottom: clamp(3.8rem, 9vw, 8rem);
}

.seasonal-decor-piece-b {
    right: clamp(1rem, 5vw, 5.8rem);
    top: clamp(7rem, 16vw, 11rem);
    --decor-rotate: 18deg;
    transform: rotate(var(--decor-rotate)) scale(0.78);
    opacity: 0.7;
}

.seasonal-decor-piece-c {
    right: clamp(14rem, 24vw, 24rem);
    bottom: clamp(1.3rem, 3vw, 2.5rem);
    --decor-rotate: -28deg;
    transform: rotate(var(--decor-rotate)) scale(0.54);
    opacity: 0.56;
}

body {
    --hero-title-color: #fff1df;
    --hero-subtitle-color: rgba(255, 242, 224, 0.9);
    --hero-title-stroke: rgba(45, 31, 22, 0.26);
    --hero-subtitle-stroke: rgba(45, 31, 22, 0.2);
    --hero-title-shadow: rgba(34, 24, 18, 0.3);
    --hero-cta-text: #fff7ec;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.26), rgba(255, 247, 237, 0.12));
    --hero-cta-primary-border: rgba(255, 247, 237, 0.54);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 250, 244, 0.9), rgba(241, 231, 214, 0.78));
    --hero-cta-outline-text: #4a3121;
    --hero-cta-outline-border: rgba(255, 247, 237, 0.48);
    --hero-cta-glow: rgba(26, 18, 12, 0.18);
}

.hero-title {
    color: var(--hero-title-color);
    -webkit-text-stroke: 0.42px var(--hero-title-stroke);
    paint-order: stroke fill;
    text-shadow:
        0 1px 1px var(--hero-title-stroke),
        0 7px 20px var(--hero-title-shadow),
        0 0 1px rgba(2, 6, 23, 0.52);
}

.hero-subtitle {
    color: var(--hero-subtitle-color);
    -webkit-text-stroke: 0.14px var(--hero-subtitle-stroke);
    text-shadow:
        0 1px 1px var(--hero-subtitle-stroke),
        0 5px 16px var(--hero-title-shadow),
        0 0 1px rgba(2, 6, 23, 0.42);
}

.hero-buttons .btn {
    position: relative;
    isolation: isolate;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.22);
    outline-offset: -3px;
}

.hero-buttons .btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: inherit;
    background: var(--hero-cta-glow);
    filter: blur(10px);
    opacity: 0.58;
    pointer-events: none;
}

.hero-buttons .btn-hero-primary {
    background: var(--hero-cta-primary-bg);
    color: var(--hero-cta-text);
    border-color: var(--hero-cta-primary-border);
    box-shadow:
        0 14px 28px var(--hero-cta-glow),
        0 0 0 1px rgba(36, 26, 18, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-buttons .btn-outline {
    background: var(--hero-cta-outline-bg);
    color: var(--hero-cta-outline-text);
    border-color: var(--hero-cta-outline-border);
    box-shadow:
        0 12px 24px var(--hero-cta-glow),
        0 0 0 1px rgba(36, 26, 18, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.season-spring {
    --hero-cta-primary-border: rgba(220, 252, 231, 0.5);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(247, 254, 231, 0.88), rgba(220, 252, 231, 0.72));
    --hero-cta-outline-text: #31572c;
}

body.season-summer {
    --hero-cta-primary-border: rgba(254, 240, 138, 0.54);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 251, 235, 0.9), rgba(254, 240, 138, 0.64));
    --hero-cta-outline-text: #5f3f12;
}

body.season-autumn {
    --hero-cta-primary-border: rgba(254, 215, 170, 0.58);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.9), rgba(254, 215, 170, 0.72));
    --hero-cta-outline-text: #7c3f16;
}

body.season-winter {
    --hero-cta-primary-border: rgba(224, 242, 254, 0.58);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(224, 242, 254, 0.76));
    --hero-cta-outline-text: #28465f;
}

body.time-morning {
    --hero-title-color: #fff0d8;
    --hero-subtitle-color: rgba(255, 239, 216, 0.88);
    --hero-title-stroke: rgba(78, 48, 25, 0.28);
    --hero-subtitle-stroke: rgba(78, 48, 25, 0.2);
    --hero-title-shadow: rgba(78, 48, 25, 0.28);
    --hero-cta-text: #fff8eb;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.28), rgba(251, 191, 36, 0.14));
    --hero-cta-primary-border: rgba(254, 243, 199, 0.58);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.9), rgba(254, 226, 181, 0.74));
    --hero-cta-outline-text: #5b351a;
    --hero-cta-glow: rgba(92, 48, 20, 0.18);
}

body.time-noon.weather-sunny {
    --hero-title-color: #25435a;
    --hero-subtitle-color: rgba(37, 67, 90, 0.82);
    --hero-title-stroke: rgba(255, 255, 255, 0.36);
    --hero-subtitle-stroke: rgba(255, 255, 255, 0.28);
    --hero-title-shadow: rgba(255, 255, 255, 0.22);
    --hero-cta-text: #25435a;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(224, 242, 254, 0.38));
    --hero-cta-primary-border: rgba(14, 116, 144, 0.22);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(186, 230, 253, 0.44));
    --hero-cta-outline-text: #24506d;
    --hero-cta-outline-border: rgba(14, 116, 144, 0.2);
    --hero-cta-glow: rgba(8, 47, 73, 0.12);
}

body.time-evening {
    --hero-title-color: #ffead5;
    --hero-subtitle-color: rgba(255, 232, 204, 0.88);
    --hero-title-stroke: rgba(84, 27, 18, 0.3);
    --hero-subtitle-stroke: rgba(84, 27, 18, 0.22);
    --hero-title-shadow: rgba(84, 27, 18, 0.32);
    --hero-cta-text: #fff2e5;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 237, 213, 0.26), rgba(249, 115, 22, 0.14));
    --hero-cta-primary-border: rgba(254, 215, 170, 0.58);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.9), rgba(254, 215, 170, 0.72));
    --hero-cta-outline-text: #7c3f16;
    --hero-cta-glow: rgba(84, 27, 18, 0.22);
}

body.time-midnight {
    --hero-title-color: #e8f1fb;
    --hero-subtitle-color: rgba(219, 234, 254, 0.86);
    --hero-title-stroke: rgba(2, 6, 23, 0.38);
    --hero-subtitle-stroke: rgba(2, 6, 23, 0.28);
    --hero-title-shadow: rgba(2, 6, 23, 0.42);
    --hero-cta-text: #f7fbff;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(219, 234, 254, 0.22), rgba(96, 165, 250, 0.1));
    --hero-cta-primary-border: rgba(191, 219, 254, 0.48);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(241, 245, 249, 0.86), rgba(203, 213, 225, 0.72));
    --hero-cta-outline-text: #182235;
    --hero-cta-glow: rgba(2, 6, 23, 0.32);
}

body.season-summer.time-morning.weather-sunny {
    --hero-title-color: #345340;
    --hero-subtitle-color: rgba(52, 83, 64, 0.9);
    --hero-title-stroke: rgba(255, 250, 235, 0.48);
    --hero-subtitle-stroke: rgba(255, 250, 235, 0.34);
    --hero-title-shadow: rgba(255, 244, 214, 0.24);
    --hero-cta-text: #345340;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 251, 235, 0.66), rgba(220, 252, 231, 0.42));
    --hero-cta-primary-border: rgba(74, 124, 89, 0.22);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 251, 235, 0.8), rgba(254, 240, 138, 0.46));
    --hero-cta-outline-text: #4b4f22;
    --hero-cta-outline-border: rgba(74, 124, 89, 0.18);
    --hero-cta-glow: rgba(61, 89, 56, 0.14);
    --hero-section-bg:
        radial-gradient(circle at 18% 74%, rgba(255, 244, 214, 0.54), transparent 22rem),
        radial-gradient(ellipse at 22% 82%, rgba(251, 191, 36, 0.32), transparent 28rem),
        radial-gradient(ellipse at 70% 16%, rgba(186, 230, 253, 0.34), transparent 30rem),
        linear-gradient(180deg, rgba(99, 190, 231, 0.74) 0%, rgba(125, 211, 252, 0.56) 38%, rgba(255, 236, 184, 0.38) 72%, rgba(255, 247, 237, 0.34) 100%);
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(14, 116, 144, 0.08), rgba(15, 23, 42, 0.22) 48%, rgba(91, 49, 18, 0.22)),
        radial-gradient(ellipse at 18% 76%, rgba(255, 237, 213, 0.42), transparent 28rem),
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.12), transparent 24rem);
    --hero-weather-wash:
        radial-gradient(ellipse at 18% 76%, rgba(255, 247, 237, 0.3), transparent 24rem),
        radial-gradient(ellipse at 70% 16%, rgba(224, 242, 254, 0.18), transparent 28rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 244, 214, 0.04));
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(15, 23, 42, 0.08)),
        radial-gradient(ellipse at 18% 76%, rgba(255, 237, 213, 0.18), transparent 26rem);
}

body.season-summer.time-morning.weather-sunny .hero {
    background:
        radial-gradient(circle at 18% 76%, rgba(255, 250, 235, 0.82) 0 3.4rem, rgba(251, 191, 36, 0.28) 3.5rem 8.8rem, transparent 15rem),
        radial-gradient(ellipse at 18% 80%, rgba(251, 191, 36, 0.26), transparent 25rem),
        radial-gradient(ellipse at 72% 14%, rgba(186, 230, 253, 0.26), transparent 30rem),
        linear-gradient(180deg, #79cef1 0%, #9bddf6 38%, #ffe7ad 76%, #fff7ed 100%);
}

body.weather-cloudy {
    --hero-title-color: #eef2f6;
    --hero-subtitle-color: rgba(226, 232, 240, 0.86);
    --hero-title-stroke: rgba(15, 23, 42, 0.32);
    --hero-subtitle-stroke: rgba(15, 23, 42, 0.24);
    --hero-title-shadow: rgba(15, 23, 42, 0.34);
    --hero-cta-primary-border: rgba(241, 245, 249, 0.52);
    --hero-cta-glow: rgba(15, 23, 42, 0.24);
    --hero-weather-wash:
        radial-gradient(ellipse at 24% 18%, rgba(226, 232, 240, 0.18), transparent 24rem),
        radial-gradient(ellipse at 74% 22%, rgba(148, 163, 184, 0.18), transparent 26rem),
        linear-gradient(180deg, rgba(148, 163, 184, 0.1), rgba(255, 255, 255, 0.04));
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(71, 85, 105, 0.14), rgba(30, 41, 59, 0.08)),
        radial-gradient(ellipse at 28% 18%, rgba(226, 232, 240, 0.18), transparent 23rem);
}

body.weather-rain,
body.weather-storm {
    --hero-title-color: #eef3f7;
    --hero-subtitle-color: rgba(226, 232, 240, 0.86);
    --hero-title-stroke: rgba(2, 6, 23, 0.4);
    --hero-subtitle-stroke: rgba(2, 6, 23, 0.3);
    --hero-title-shadow: rgba(2, 6, 23, 0.46);
    --hero-cta-text: #f8fafc;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(226, 232, 240, 0.2), rgba(148, 163, 184, 0.12));
    --hero-cta-primary-border: rgba(226, 232, 240, 0.46);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.86), rgba(203, 213, 225, 0.76));
    --hero-cta-outline-text: #1f2937;
    --hero-cta-glow: rgba(2, 6, 23, 0.34);
}

body.weather-snow {
    --hero-title-color: #2f516e;
    --hero-subtitle-color: rgba(47, 81, 110, 0.82);
    --hero-title-stroke: rgba(255, 255, 255, 0.42);
    --hero-subtitle-stroke: rgba(255, 255, 255, 0.32);
    --hero-title-shadow: rgba(255, 255, 255, 0.24);
    --hero-cta-text: #2f516e;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(219, 234, 254, 0.42));
    --hero-cta-primary-border: rgba(30, 64, 175, 0.2);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(219, 234, 254, 0.58));
    --hero-cta-outline-text: #2f516e;
    --hero-cta-outline-border: rgba(30, 64, 175, 0.18);
    --hero-cta-glow: rgba(30, 41, 59, 0.14);
}

body.time-midnight.weather-snow {
    --hero-title-color: #e8f1fb;
    --hero-subtitle-color: rgba(219, 234, 254, 0.86);
    --hero-title-stroke: rgba(2, 6, 23, 0.38);
    --hero-subtitle-stroke: rgba(2, 6, 23, 0.28);
    --hero-title-shadow: rgba(2, 6, 23, 0.42);
    --hero-cta-text: #f7fbff;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(219, 234, 254, 0.22), rgba(96, 165, 250, 0.1));
    --hero-cta-primary-border: rgba(191, 219, 254, 0.48);
    --hero-cta-outline-text: #182235;
    --hero-cta-glow: rgba(2, 6, 23, 0.32);
}
.hero {
    background:
        var(--hero-weather-wash, linear-gradient(transparent, transparent)),
        var(--hero-section-bg,
            radial-gradient(circle at 18% 18%, rgba(255,255,255,0.18), transparent 34%),
            radial-gradient(circle at 78% 24%, rgba(251, 191, 36, 0.16), transparent 24%),
            linear-gradient(145deg, rgba(21, 27, 37, 0.72), rgba(73, 37, 24, 0.66))
        );
}

.hero-bg-slide::after {
    background:
        var(--hero-weather-photo-wash, linear-gradient(transparent, transparent)),
        var(--hero-photo-overlay,
            linear-gradient(180deg, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.62)),
            radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 46%)
        );
}

body.time-morning {
    --hero-section-bg:
        radial-gradient(ellipse at 16% 76%, rgba(255, 247, 237, 0.38), transparent 30rem),
        radial-gradient(ellipse at 28% 36%, rgba(251, 191, 36, 0.18), transparent 24rem),
        linear-gradient(145deg, rgba(20, 31, 43, 0.68), rgba(93, 59, 35, 0.48) 58%, rgba(150, 92, 44, 0.48));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.42) 44%, rgba(77, 46, 25, 0.3)),
        radial-gradient(ellipse at 17% 74%, rgba(255, 237, 213, 0.28), transparent 31rem),
        radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.08), transparent 36%);
}

body.time-noon {
    --hero-section-bg:
        radial-gradient(circle at 72% 15%, rgba(255, 255, 255, 0.34), transparent 18rem),
        radial-gradient(ellipse at 50% -8%, rgba(254, 249, 195, 0.22), transparent 34rem),
        radial-gradient(ellipse at 18% 72%, rgba(125, 211, 252, 0.12), transparent 28rem),
        linear-gradient(150deg, rgba(15, 45, 72, 0.58), rgba(39, 106, 128, 0.36) 46%, rgba(112, 91, 48, 0.28));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.38) 54%, rgba(15, 23, 42, 0.46)),
        radial-gradient(circle at 72% 15%, rgba(255, 255, 255, 0.22), transparent 20rem),
        radial-gradient(ellipse at 50% 0%, rgba(254, 249, 195, 0.12), transparent 31rem),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.06), transparent 48%);
}

body.time-evening {
    --hero-section-bg:
        radial-gradient(ellipse at 76% 76%, rgba(249, 115, 22, 0.32), transparent 29rem),
        radial-gradient(ellipse at 28% 48%, rgba(190, 24, 93, 0.18), transparent 25rem),
        linear-gradient(145deg, rgba(26, 24, 64, 0.72), rgba(104, 45, 54, 0.5) 54%, rgba(154, 74, 36, 0.5));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(15, 23, 42, 0.28), rgba(30, 27, 75, 0.5) 46%, rgba(124, 45, 18, 0.34)),
        radial-gradient(ellipse at 78% 74%, rgba(254, 215, 170, 0.26), transparent 30rem),
        radial-gradient(ellipse at 32% 44%, rgba(244, 114, 182, 0.12), transparent 24rem);
}

body.time-midnight {
    --hero-section-bg:
        radial-gradient(circle at 72% 22%, rgba(191, 219, 254, 0.12), transparent 22rem),
        radial-gradient(ellipse at 24% 38%, rgba(59, 130, 246, 0.1), transparent 30rem),
        linear-gradient(145deg, rgba(3, 7, 18, 0.86), rgba(15, 23, 42, 0.72) 52%, rgba(30, 41, 59, 0.66));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.66)),
        radial-gradient(circle at 73% 22%, rgba(219, 234, 254, 0.14), transparent 23rem),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.035), transparent 42%);
}





/* Cloudy contrast matrix: season-aware heading/subheading colors. */
body.season-spring.time-morning.weather-cloudy,
body.season-spring.time-noon.weather-cloudy {
    --hero-title-color: #2f4d3c;
    --hero-subtitle-color: rgba(47, 77, 60, 0.88);
    --hero-title-stroke: rgba(248, 255, 240, 0.48);
    --hero-subtitle-stroke: rgba(248, 255, 240, 0.34);
    --hero-title-shadow: rgba(255, 255, 244, 0.24);
}

body.season-summer.time-morning.weather-cloudy,
body.season-summer.time-noon.weather-cloudy {
    --hero-title-color: #36513f;
    --hero-subtitle-color: rgba(54, 81, 63, 0.88);
    --hero-title-stroke: rgba(255, 250, 235, 0.46);
    --hero-subtitle-stroke: rgba(255, 250, 235, 0.34);
    --hero-title-shadow: rgba(255, 244, 214, 0.24);
}

body.season-autumn.time-noon.weather-cloudy {
    --hero-title-color: #5b371d;
    --hero-subtitle-color: rgba(91, 55, 29, 0.88);
    --hero-title-stroke: rgba(255, 247, 237, 0.48);
    --hero-subtitle-stroke: rgba(255, 247, 237, 0.34);
    --hero-title-shadow: rgba(255, 237, 213, 0.22);
}

body.season-winter.time-morning.weather-cloudy,
body.season-winter.time-noon.weather-cloudy {
    --hero-title-color: #29465e;
    --hero-subtitle-color: rgba(41, 70, 94, 0.88);
    --hero-title-stroke: rgba(248, 250, 252, 0.5);
    --hero-subtitle-stroke: rgba(248, 250, 252, 0.36);
    --hero-title-shadow: rgba(255, 255, 255, 0.24);
}

body.season-spring.time-evening.weather-cloudy,
body.season-spring.time-midnight.weather-cloudy {
    --hero-title-color: #eef8e7;
    --hero-subtitle-color: rgba(232, 245, 224, 0.88);
    --hero-title-stroke: rgba(24, 54, 38, 0.38);
    --hero-subtitle-stroke: rgba(24, 54, 38, 0.28);
    --hero-title-shadow: rgba(15, 23, 42, 0.38);
}

body.season-summer.time-evening.weather-cloudy,
body.season-summer.time-midnight.weather-cloudy {
    --hero-title-color: #fff1d6;
    --hero-subtitle-color: rgba(255, 239, 216, 0.88);
    --hero-title-stroke: rgba(43, 56, 36, 0.38);
    --hero-subtitle-stroke: rgba(43, 56, 36, 0.28);
    --hero-title-shadow: rgba(15, 23, 42, 0.36);
}



body.season-autumn.time-morning.weather-sunny {
    --hero-title-color: #623819;
    --hero-subtitle-color: rgba(98, 56, 25, 0.9);
    --hero-title-stroke: rgba(255, 241, 222, 0.5);
    --hero-subtitle-stroke: rgba(255, 241, 222, 0.36);
    --hero-title-shadow: rgba(255, 226, 190, 0.24);
    --hero-cta-text: #623819;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.66), rgba(253, 186, 116, 0.42));
    --hero-cta-primary-border: rgba(154, 80, 28, 0.24);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.82), rgba(251, 146, 60, 0.42));
    --hero-cta-outline-text: #6b330f;
    --hero-cta-outline-border: rgba(154, 80, 28, 0.2);
    --hero-cta-glow: rgba(91, 55, 29, 0.14);
}

body.season-autumn.time-morning.weather-cloudy {
    --hero-title-color: #68401f;
    --hero-subtitle-color: rgba(104, 64, 31, 0.9);
    --hero-title-stroke: rgba(255, 244, 226, 0.5);
    --hero-subtitle-stroke: rgba(255, 244, 226, 0.36);
    --hero-title-shadow: rgba(255, 226, 190, 0.24);
    --hero-cta-text: #68401f;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.66), rgba(254, 215, 170, 0.42));
    --hero-cta-primary-border: rgba(154, 80, 28, 0.22);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.8), rgba(253, 186, 116, 0.46));
    --hero-cta-outline-text: #713f12;
    --hero-cta-outline-border: rgba(154, 80, 28, 0.18);
    --hero-cta-glow: rgba(91, 55, 29, 0.14);
}

body.season-autumn.time-evening.weather-cloudy,
body.season-autumn.time-midnight.weather-cloudy {
    --hero-title-color: #ffe4c5;
    --hero-subtitle-color: rgba(255, 226, 199, 0.88);
    --hero-title-stroke: rgba(69, 26, 3, 0.42);
    --hero-subtitle-stroke: rgba(69, 26, 3, 0.3);
    --hero-title-shadow: rgba(15, 23, 42, 0.38);
}

body.season-winter.time-evening.weather-cloudy,
body.season-winter.time-midnight.weather-cloudy {
    --hero-title-color: #eaf3fb;
    --hero-subtitle-color: rgba(224, 242, 254, 0.88);
    --hero-title-stroke: rgba(2, 6, 23, 0.4);
    --hero-subtitle-stroke: rgba(2, 6, 23, 0.3);
    --hero-title-shadow: rgba(2, 6, 23, 0.42);
}

body.season-summer.time-morning.weather-cloudy {
    --hero-cta-text: #36513f;
    --hero-cta-primary-bg: linear-gradient(180deg, rgba(255, 251, 235, 0.64), rgba(220, 252, 231, 0.42));
    --hero-cta-primary-border: rgba(74, 124, 89, 0.22);
    --hero-cta-outline-bg: linear-gradient(180deg, rgba(255, 251, 235, 0.78), rgba(254, 240, 138, 0.46));
    --hero-cta-outline-text: #4b4f22;
    --hero-cta-outline-border: rgba(74, 124, 89, 0.18);
    --hero-cta-glow: rgba(61, 89, 56, 0.14);
}
body.weather-rain {
    --hero-weather-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(30, 41, 59, 0.15) 50%, rgba(71, 85, 105, 0.1)),
        radial-gradient(ellipse at 68% 18%, rgba(191, 219, 254, 0.14), transparent 28rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(30, 41, 59, 0.2)),
        radial-gradient(ellipse at 50% 18%, rgba(191, 219, 254, 0.12), transparent 30rem);
}

body.weather-storm {
    --hero-weather-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.38), rgba(15, 23, 42, 0.28) 48%, rgba(30, 41, 59, 0.16)),
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.12), transparent 18rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.38), rgba(15, 23, 42, 0.32)),
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.1), transparent 18rem);
}

body.weather-snow {
    --hero-weather-wash:
        linear-gradient(180deg, rgba(224, 242, 254, 0.16), rgba(255, 255, 255, 0.1) 54%, rgba(226, 232, 240, 0.08)),
        radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.2), transparent 30rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(224, 242, 254, 0.16), rgba(15, 23, 42, 0.1)),
        radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.16), transparent 28rem);
}

body.time-noon.weather-sunny {
    --hero-weather-wash:
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.34), transparent 14rem),
        radial-gradient(circle at 72% 14%, rgba(253, 224, 71, 0.18), transparent 22rem),
        linear-gradient(180deg, rgba(125, 211, 252, 0.18), rgba(56, 189, 248, 0.08) 45%, rgba(255, 255, 255, 0.04));
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(14, 116, 144, 0.08), rgba(15, 23, 42, 0.08) 52%, rgba(15, 23, 42, 0.16)),
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.2), transparent 18rem),
        radial-gradient(ellipse at 50% -8%, rgba(186, 230, 253, 0.1), transparent 33rem);
}

body.time-noon.weather-sunny .hero {
    background:
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.86) 0 4.2rem, rgba(254, 240, 138, 0.32) 4.3rem 9rem, transparent 15rem),
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.3), transparent 25rem),
        linear-gradient(180deg, #58bff0 0%, #7dd3fc 38%, #bfefff 68%, #f7fdff 100%);
}

body.time-noon.weather-sunny .hero-bg-slide::after {
    background:
        linear-gradient(180deg, rgba(3, 105, 161, 0.08), rgba(15, 23, 42, 0.18) 54%, rgba(15, 23, 42, 0.3)),
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.24), transparent 18rem),
        radial-gradient(ellipse at 50% -8%, rgba(186, 230, 253, 0.12), transparent 34rem);
}

body.time-noon.weather-sunny .hero .seasonal-decor {
    --hero-mood-opacity: 0.82;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.46), transparent 17rem),
        radial-gradient(circle at 72% 14%, rgba(254, 240, 138, 0.22), transparent 26rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(125, 211, 252, 0.08) 42%, transparent 74%);
    --hero-atmosphere-opacity: 0.54;
    --hero-atmosphere-filter: blur(0.14px);
    --hero-atmosphere-bg:
        linear-gradient(105deg, transparent 0 18%, rgba(255, 255, 255, 0.12) 23%, transparent 38% 100%),
        linear-gradient(118deg, transparent 0 42%, rgba(255, 255, 255, 0.1) 48%, transparent 62% 100%),
        radial-gradient(ellipse at 50% 72%, rgba(255, 255, 255, 0.16), transparent 28rem);
}

body.time-noon.weather-sunny .hero .seasonal-decor-piece {
    opacity: 0.34;
    filter: blur(0.35px) drop-shadow(0 18px 30px rgba(8, 47, 73, 0.1));
}

body.time-noon.weather-cloudy {
    --hero-weather-wash:
        radial-gradient(ellipse at 26% 15%, rgba(226, 232, 240, 0.22), transparent 25rem),
        radial-gradient(ellipse at 76% 18%, rgba(203, 213, 225, 0.2), transparent 27rem),
        linear-gradient(180deg, rgba(148, 163, 184, 0.1), rgba(255, 255, 255, 0.05));
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(71, 85, 105, 0.1), rgba(30, 41, 59, 0.07)),
        radial-gradient(ellipse at 48% 8%, rgba(226, 232, 240, 0.2), transparent 27rem);
}

body.time-noon.weather-rain {
    --hero-weather-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(51, 65, 85, 0.12) 50%, rgba(125, 211, 252, 0.06)),
        radial-gradient(ellipse at 58% 12%, rgba(191, 219, 254, 0.14), transparent 28rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(30, 41, 59, 0.14) 56%, rgba(15, 23, 42, 0.12)),
        radial-gradient(ellipse at 58% 12%, rgba(191, 219, 254, 0.11), transparent 28rem);
}

body.time-noon.weather-storm {
    --hero-weather-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.32), rgba(15, 23, 42, 0.24) 48%, rgba(30, 41, 59, 0.14)),
        radial-gradient(circle at 70% 13%, rgba(255, 255, 255, 0.12), transparent 18rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.34), rgba(15, 23, 42, 0.26)),
        radial-gradient(circle at 70% 13%, rgba(255, 255, 255, 0.09), transparent 18rem);
}

body.time-noon.weather-snow {
    --hero-weather-wash:
        radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.24), transparent 29rem),
        linear-gradient(180deg, rgba(224, 242, 254, 0.18), rgba(255, 255, 255, 0.08) 56%, rgba(226, 232, 240, 0.08));
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(224, 242, 254, 0.14), rgba(15, 23, 42, 0.08)),
        radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.14), transparent 28rem);
}
body.time-morning.weather-rain,
body.time-morning.weather-storm {
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.26), rgba(30, 41, 59, 0.18) 48%, rgba(251, 191, 36, 0.08)),
        radial-gradient(ellipse at 16% 78%, rgba(254, 243, 199, 0.13), transparent 24rem);
}

body.time-evening.weather-rain,
body.time-evening.weather-storm {
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.34), rgba(49, 46, 129, 0.24) 42%, rgba(124, 45, 18, 0.14)),
        radial-gradient(ellipse at 78% 74%, rgba(249, 115, 22, 0.12), transparent 24rem);
}

body.time-midnight.weather-cloudy,
body.time-midnight.weather-rain,
body.time-midnight.weather-storm,
body.time-midnight.weather-snow {
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.36), rgba(2, 6, 23, 0.42)),
        radial-gradient(ellipse at 72% 22%, rgba(148, 163, 184, 0.12), transparent 24rem);
}
.hero .seasonal-decor::before,
.hero .seasonal-decor::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero .seasonal-decor::before {
    z-index: 0;
    opacity: var(--hero-mood-opacity, 0.58);
    background: var(--hero-mood-bg, transparent);
    mix-blend-mode: var(--hero-mood-blend, screen);
}

.hero .seasonal-decor::after {
    z-index: 5;
    opacity: var(--hero-atmosphere-opacity, 0.38);
    background: var(--hero-atmosphere-bg, transparent);
    filter: var(--hero-atmosphere-filter, blur(0.2px));
    mix-blend-mode: var(--hero-atmosphere-blend, screen);
}

body.time-morning .hero .seasonal-decor {
    --hero-mood-opacity: 0.78;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(ellipse at 16% 72%, rgba(255, 247, 237, 0.58), transparent 26rem),
        radial-gradient(ellipse at 28% 48%, rgba(251, 191, 36, 0.22), transparent 24rem),
        linear-gradient(180deg, rgba(186, 230, 253, 0.06) 0 38%, rgba(254, 243, 199, 0.2) 58%, rgba(255, 247, 237, 0.34) 100%);
    --hero-atmosphere-opacity: 0.7;
    --hero-atmosphere-filter: blur(0.45px);
    --hero-atmosphere-bg:
        linear-gradient(176deg, transparent 0 52%, rgba(255, 255, 255, 0.18) 58%, transparent 66%),
        linear-gradient(172deg, transparent 0 64%, rgba(254, 243, 199, 0.18) 69%, transparent 78%),
        radial-gradient(ellipse at 18% 76%, rgba(255, 255, 255, 0.28), transparent 20rem);
}

body.time-noon .hero .seasonal-decor {
    --hero-mood-opacity: 0.52;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.36), transparent 18rem),
        radial-gradient(ellipse at 50% 6%, rgba(254, 249, 195, 0.2), transparent 30rem),
        linear-gradient(180deg, rgba(224, 242, 254, 0.12), rgba(204, 251, 241, 0.08) 48%, rgba(255, 255, 255, 0.08));
    --hero-atmosphere-opacity: 0.3;
    --hero-atmosphere-filter: blur(0.1px);
    --hero-atmosphere-bg:
        radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.26), transparent 15rem),
        linear-gradient(96deg, transparent 0 18%, rgba(255, 255, 255, 0.09) 22%, transparent 36% 100%);
}

body.time-evening .hero .seasonal-decor {
    --hero-mood-opacity: 0.86;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(ellipse at 76% 72%, rgba(249, 115, 22, 0.42), transparent 27rem),
        radial-gradient(ellipse at 28% 60%, rgba(244, 114, 182, 0.18), transparent 25rem),
        linear-gradient(180deg, rgba(88, 28, 135, 0.08) 0, rgba(251, 146, 60, 0.18) 54%, rgba(254, 215, 170, 0.28) 100%);
    --hero-atmosphere-opacity: 0.58;
    --hero-atmosphere-filter: blur(0.25px);
    --hero-atmosphere-bg:
        linear-gradient(168deg, transparent 0 48%, rgba(254, 215, 170, 0.16) 55%, transparent 66%),
        linear-gradient(174deg, transparent 0 62%, rgba(190, 24, 93, 0.14) 70%, transparent 82%),
        radial-gradient(ellipse at 82% 76%, rgba(255, 237, 213, 0.2), transparent 22rem);
}

body.time-morning.weather-cloudy .hero .seasonal-decor,
body.time-noon.weather-cloudy .hero .seasonal-decor,
body.time-evening.weather-cloudy .hero .seasonal-decor {
    --hero-mood-blend: normal;
    --hero-mood-opacity: 0.48;
    --hero-atmosphere-opacity: 0.58;
    --hero-atmosphere-blend: screen;
    --hero-atmosphere-bg:
        radial-gradient(ellipse at 24% 18%, rgba(226, 232, 240, 0.34), transparent 22rem),
        radial-gradient(ellipse at 74% 22%, rgba(148, 163, 184, 0.24), transparent 24rem),
        linear-gradient(180deg, rgba(226, 232, 240, 0.16), rgba(255, 255, 255, 0.08) 56%, transparent);
}

body.time-morning.weather-rain .hero .seasonal-decor,
body.time-morning.weather-storm .hero .seasonal-decor {
    --hero-mood-opacity: 0.5;
    --hero-mood-blend: normal;
    --hero-mood-bg:
        linear-gradient(180deg, rgba(30, 41, 59, 0.24), rgba(71, 85, 105, 0.18) 44%, rgba(251, 191, 36, 0.08) 100%),
        radial-gradient(ellipse at 18% 68%, rgba(251, 191, 36, 0.14), transparent 22rem);
    --hero-atmosphere-opacity: 0.62;
    --hero-atmosphere-bg:
        linear-gradient(176deg, transparent 0 54%, rgba(255, 255, 255, 0.12) 61%, transparent 72%),
        radial-gradient(ellipse at 18% 76%, rgba(226, 232, 240, 0.2), transparent 20rem);
}

body.time-noon.weather-rain .hero .seasonal-decor,
body.time-noon.weather-storm .hero .seasonal-decor {
    --hero-mood-opacity: 0.46;
    --hero-mood-blend: normal;
    --hero-mood-bg:
        linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(51, 65, 85, 0.14) 52%, rgba(226, 232, 240, 0.08)),
        radial-gradient(ellipse at 60% 18%, rgba(191, 219, 254, 0.18), transparent 28rem);
    --hero-atmosphere-opacity: 0.44;
    --hero-atmosphere-bg:
        linear-gradient(108deg, transparent 0 45%, rgba(191, 219, 254, 0.12) 49%, transparent 56% 100%),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent 60%);
}

body.time-evening.weather-rain .hero .seasonal-decor,
body.time-evening.weather-storm .hero .seasonal-decor {
    --hero-mood-opacity: 0.58;
    --hero-mood-blend: normal;
    --hero-mood-bg:
        linear-gradient(180deg, rgba(49, 46, 129, 0.24), rgba(88, 28, 135, 0.16) 42%, rgba(249, 115, 22, 0.12) 100%),
        radial-gradient(ellipse at 82% 70%, rgba(249, 115, 22, 0.18), transparent 24rem);
    --hero-atmosphere-opacity: 0.5;
}

body.time-morning.weather-snow .hero .seasonal-decor,
body.time-noon.weather-snow .hero .seasonal-decor,
body.time-evening.weather-snow .hero .seasonal-decor {
    --hero-mood-opacity: 0.5;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(ellipse at 50% 14%, rgba(255, 255, 255, 0.32), transparent 28rem),
        linear-gradient(180deg, rgba(224, 242, 254, 0.22), rgba(255, 255, 255, 0.12) 52%, rgba(226, 232, 240, 0.12));
    --hero-atmosphere-opacity: 0.62;
    --hero-atmosphere-bg:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.42) 0 1.5px, transparent 2.6px),
        radial-gradient(circle at 72% 18%, rgba(224, 242, 254, 0.36) 0 1.2px, transparent 2.2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 62%);
    --hero-atmosphere-filter: blur(0.18px);
}

.weather-decor-sun {
    top: clamp(6rem, 12vw, 9rem);
    right: clamp(1.6rem, 7vw, 7rem);
    width: clamp(5.2rem, 9vw, 8.4rem);
    height: clamp(5.2rem, 9vw, 8.4rem);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 6;
}

.weather-decor-rain {
    inset: 0;
    display: none;
    opacity: 0;
}

.weather-decor-rain-b {
    display: none;
}

body.weather-rain .weather-decor-rain,
body.weather-storm .weather-decor-rain {
    opacity: 0;
}

body.season-spring .seasonal-decor-piece {
    width: clamp(4.2rem, 8vw, 7.8rem);
    height: clamp(4.2rem, 8vw, 7.8rem);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 14%, rgba(255, 255, 255, 0.95) 0 14%, transparent 15%),
        radial-gradient(ellipse at 82% 50%, rgba(244, 114, 182, 0.82) 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 84%, rgba(251, 207, 232, 0.86) 0 18%, transparent 19%),
        radial-gradient(ellipse at 18% 50%, rgba(248, 113, 113, 0.74) 0 18%, transparent 19%),
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.94) 0 10%, transparent 11%);
}

body.season-summer .seasonal-decor-piece {
    width: clamp(4.4rem, 9vw, 8rem);
    height: clamp(4.4rem, 9vw, 8rem);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 13%, rgba(255, 255, 255, 0.88) 0 13%, transparent 14%),
        radial-gradient(ellipse at 82% 50%, rgba(254, 240, 138, 0.82) 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 84%, rgba(253, 224, 71, 0.82) 0 18%, transparent 19%),
        radial-gradient(ellipse at 18% 50%, rgba(251, 113, 133, 0.62) 0 18%, transparent 19%),
        radial-gradient(circle at 50% 50%, rgba(120, 53, 15, 0.58) 0 9%, transparent 10%),
        linear-gradient(145deg, transparent 0 58%, rgba(22, 163, 74, 0.42) 59% 64%, transparent 65%);
    opacity: 0.68;
}

body.season-autumn .seasonal-decor-piece {
    border-radius: 58% 42% 62% 38%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 247, 237, 0.64) 0 12%, transparent 13%),
        linear-gradient(135deg, rgba(248, 113, 113, 0.72), rgba(217, 119, 6, 0.58) 62%, rgba(120, 53, 15, 0.2));
    opacity: 0;
}

body.season-winter .seasonal-decor-piece {
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 13%, transparent 14%),
        repeating-conic-gradient(from 0deg, rgba(224, 242, 254, 0.7) 0 12deg, rgba(255, 255, 255, 0.18) 12deg 24deg);
    opacity: 0.58;
}

@keyframes sunBreath {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(8deg); }
}

.features > .container {
    position: relative;
    z-index: 2;
}

.about-weather-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.92;
}

.about-season-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.about-season-item,
.about-season-trail,
.about-season-ground {
    position: absolute;
    display: block;
    opacity: 0.72;
    filter: drop-shadow(0 14px 24px rgba(74, 49, 33, 0.1));
}

.about-season-item {
    width: clamp(3.5rem, 8vw, 7rem);
    height: clamp(3.5rem, 8vw, 7rem);
    border-radius: 48% 52% 45% 55%;
    transform: rotate(var(--season-rotate, -12deg));
    background-repeat: no-repeat;
}

.about-season-item::before,
.about-season-item::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    background: inherit;
}

.about-season-item::before {
    inset: 22%;
    transform: rotate(58deg) scale(0.74);
}

.about-season-item::after {
    inset: 36%;
    opacity: 0.62;
    transform: rotate(-36deg) scale(0.62);
}

.about-season-item-a {
    left: clamp(0.7rem, 4vw, 4rem);
    top: clamp(6rem, 12vw, 10rem);
    animation: aboutSeasonFloatA 11s ease-in-out infinite;
}

.about-season-item-b {
    right: clamp(1rem, 6vw, 7rem);
    bottom: clamp(5rem, 8vw, 8rem);
    --season-rotate: 24deg;
    transform: rotate(var(--season-rotate)) scale(0.8);
    opacity: 0.58;
    animation: aboutSeasonFloatB 13s ease-in-out infinite;
}

.about-season-item-c {
    left: clamp(48%, 55vw, 58%);
    bottom: clamp(1rem, 4vw, 3.5rem);
    --season-rotate: -28deg;
    transform: rotate(var(--season-rotate)) scale(0.62);
    opacity: 0.46;
    animation: aboutSeasonFloatC 15s ease-in-out infinite;
}

.about-season-trail {
    width: min(38rem, 62vw);
    height: min(18rem, 28vw);
    border-radius: 50%;
    opacity: 0.36;
    filter: blur(22px);
}

.about-season-trail-a {
    left: -12rem;
    bottom: 1rem;
}

.about-season-trail-b {
    right: -14rem;
    top: 5rem;
}

.about-season-ground {
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(3rem, 7vw, 6rem);
    opacity: 0;
    filter: none;
}

.about-season-ground-b {
    bottom: -0.4rem;
    height: clamp(2.2rem, 5vw, 4.6rem);
    opacity: 0;
}

body.season-spring .about-season-item {
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.94) 0 11%, transparent 12%),
        radial-gradient(ellipse at 80% 50%, rgba(244, 114, 182, 0.78) 0 16%, transparent 17%),
        radial-gradient(ellipse at 50% 82%, rgba(251, 207, 232, 0.8) 0 16%, transparent 17%),
        radial-gradient(ellipse at 20% 50%, rgba(248, 113, 113, 0.68) 0 16%, transparent 17%),
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.86) 0 8%, transparent 9%),
        linear-gradient(145deg, transparent 0 58%, rgba(34, 197, 94, 0.46) 59% 64%, transparent 65%);
}

body.season-spring .about-season-item-b {
    transform: rotate(18deg) scale(0.72);
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%),
        radial-gradient(ellipse at 79% 50%, rgba(192, 132, 252, 0.62) 0 16%, transparent 17%),
        radial-gradient(ellipse at 50% 82%, rgba(251, 207, 232, 0.68) 0 16%, transparent 17%),
        radial-gradient(ellipse at 21% 50%, rgba(244, 114, 182, 0.64) 0 16%, transparent 17%),
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.8) 0 7%, transparent 8%);
}

body.season-spring .about-season-item-c {
    transform: rotate(-22deg) scale(0.54);
    opacity: 0.5;
}

body.season-spring .about-season-trail {
    background:
        radial-gradient(circle at 24% 52%, rgba(244, 114, 182, 0.28) 0 0.9rem, transparent 1rem),
        radial-gradient(circle at 46% 44%, rgba(255, 255, 255, 0.34) 0 0.7rem, transparent 0.8rem),
        radial-gradient(circle at 66% 58%, rgba(251, 207, 232, 0.24) 0 0.8rem, transparent 0.9rem),
        radial-gradient(ellipse, rgba(187, 247, 208, 0.36), transparent 68%);
}

body.season-spring .about-season-ground {
    opacity: 0.52;
    background:
        linear-gradient(105deg, transparent 0 7px, rgba(34, 197, 94, 0.42) 8px 10px, transparent 11px 100%),
        linear-gradient(78deg, transparent 0 10px, rgba(22, 163, 74, 0.34) 11px 13px, transparent 14px 100%);
    background-size: 42px 100%, 58px 100%;
}

body.season-summer .about-season-item {
    width: clamp(5rem, 10vw, 9rem);
    height: clamp(8rem, 16vw, 14rem);
    border-radius: 0;
    background: url('images/effects/tree-pine-engraved.svg') center bottom / contain no-repeat;
    filter: drop-shadow(0 16px 22px rgba(47, 36, 18, 0.13));
}

body.season-summer .about-season-item-b {
    width: clamp(6rem, 13vw, 11rem);
    height: clamp(9rem, 18vw, 15rem);
    opacity: 0.48;
}

body.season-summer .about-season-item-c {
    width: clamp(4.6rem, 9vw, 8rem);
    height: clamp(7rem, 14vw, 12rem);
    border-radius: 0;
    transform: rotate(-18deg) scale(0.72);
    background: url('images/effects/tree-pine-engraved.svg') center bottom / contain no-repeat;
}

body.season-summer .about-season-item::before {
    display: none;
}

body.season-summer .about-season-item::after {
    display: none;
}

body.season-summer .about-season-trail {
    background:
        radial-gradient(circle at 30% 52%, rgba(34, 197, 94, 0.26) 0 2rem, transparent 2.1rem),
        radial-gradient(circle at 56% 40%, rgba(22, 163, 74, 0.2) 0 2.4rem, transparent 2.5rem),
        radial-gradient(ellipse, rgba(132, 204, 22, 0.2), transparent 68%);
}

body.season-summer .about-season-ground {
    opacity: 0.68;
    background:
        linear-gradient(102deg, transparent 0 9px, rgba(21, 128, 61, 0.54) 10px 12px, transparent 13px 100%),
        linear-gradient(82deg, transparent 0 13px, rgba(34, 197, 94, 0.44) 14px 17px, transparent 18px 100%),
        linear-gradient(180deg, transparent, rgba(22, 101, 52, 0.1));
    background-size: 32px 100%, 48px 100%, 100% 100%;
}

body.season-autumn .about-season-item {
    border-radius: 76% 24% 70% 30% / 56% 30% 70% 44%;
    background:
        linear-gradient(42deg, transparent 0 46%, rgba(92, 45, 16, 0.52) 47% 50%, transparent 51% 100%),
        linear-gradient(126deg, transparent 0 56%, rgba(120, 53, 15, 0.24) 57% 59%, transparent 60% 100%),
        linear-gradient(154deg, transparent 0 58%, rgba(120, 53, 15, 0.2) 59% 61%, transparent 62% 100%),
        linear-gradient(135deg, rgba(220, 38, 38, 0.82), rgba(217, 119, 6, 0.82) 58%, rgba(120, 53, 15, 0.42));
    box-shadow: inset -7px -8px 12px rgba(69, 26, 3, 0.16);
}

body.season-autumn .about-season-item-b {
    border-radius: 72% 28% 64% 36% / 48% 34% 66% 52%;
    background:
        linear-gradient(48deg, transparent 0 46%, rgba(120, 53, 15, 0.46) 47% 50%, transparent 51% 100%),
        linear-gradient(122deg, transparent 0 56%, rgba(120, 53, 15, 0.2) 57% 59%, transparent 60% 100%),
        linear-gradient(148deg, transparent 0 58%, rgba(120, 53, 15, 0.18) 59% 61%, transparent 62% 100%),
        linear-gradient(145deg, rgba(234, 179, 8, 0.82), rgba(234, 88, 12, 0.78) 60%, rgba(127, 29, 29, 0.34));
    box-shadow: inset -6px -7px 10px rgba(69, 26, 3, 0.14);
}

body.season-autumn .about-season-item-a {
    display: none;
}

body.season-autumn .about-season-item-c {
    transform: rotate(34deg) scale(0.56);
    opacity: 0.52;
}

body.season-autumn .about-season-trail {
    opacity: 0;
    background: none;
}

body.season-autumn .about-season-ground {
    opacity: 0.54;
    background:
        radial-gradient(ellipse at 8% 72%, rgba(180, 83, 9, 0.36) 0 0.8rem, transparent 0.9rem),
        radial-gradient(ellipse at 24% 76%, rgba(220, 38, 38, 0.24) 0 0.7rem, transparent 0.8rem),
        radial-gradient(ellipse at 44% 70%, rgba(202, 138, 4, 0.34) 0 0.85rem, transparent 0.95rem),
        radial-gradient(ellipse at 72% 78%, rgba(180, 83, 9, 0.28) 0 0.75rem, transparent 0.85rem);
    background-size: 180px 100%, 220px 100%, 260px 100%, 310px 100%;
}

body.season-winter .about-season-item {
    border-radius: 50%;
    background:
        linear-gradient(0deg, transparent 0 45%, rgba(255, 255, 255, 0.78) 46% 54%, transparent 55% 100%),
        linear-gradient(60deg, transparent 0 45%, rgba(219, 234, 254, 0.7) 46% 54%, transparent 55% 100%),
        linear-gradient(120deg, transparent 0 45%, rgba(255, 255, 255, 0.78) 46% 54%, transparent 55% 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 8%, transparent 9%);
    filter: drop-shadow(0 16px 26px rgba(14, 116, 144, 0.08));
}

body.season-winter .about-season-item-b {
    transform: rotate(24deg) scale(0.7);
    opacity: 0.46;
}

body.season-winter .about-season-item-c {
    transform: rotate(-18deg) scale(0.5);
    opacity: 0.38;
}

body.season-winter .about-season-trail {
    background: radial-gradient(ellipse, rgba(224, 242, 254, 0.46), transparent 68%);
}

body.season-winter .about-season-ground {
    opacity: 0.82;
    background:
        radial-gradient(ellipse at 12% 100%, rgba(255, 255, 255, 0.86) 0 3rem, transparent 3.1rem),
        radial-gradient(ellipse at 48% 100%, rgba(224, 242, 254, 0.74) 0 3.8rem, transparent 3.9rem),
        radial-gradient(ellipse at 82% 100%, rgba(255, 255, 255, 0.82) 0 3.2rem, transparent 3.3rem);
}

.about-weather-scene::before,
.about-weather-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-weather-scene::before {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.62), transparent 25rem),
        radial-gradient(circle at 82% 12%, rgba(250, 204, 21, 0.14), transparent 18rem),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18));
    opacity: 0.72;
}

.about-weather-scene::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 38%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 247, 237, 0.28), transparent 64%);
    mix-blend-mode: screen;
    opacity: 0.5;
}

.about-weather-sun {
    position: absolute;
    top: clamp(2.8rem, 7vw, 5.5rem);
    right: clamp(2rem, 10vw, 10rem);
    width: clamp(7rem, 15vw, 13rem);
    height: clamp(7rem, 15vw, 13rem);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 11%, rgba(254, 240, 138, 0.88) 12% 33%, rgba(251, 191, 36, 0.24) 34% 52%, rgba(251, 191, 36, 0.08) 53% 70%, transparent 71%),
        repeating-conic-gradient(from 4deg, rgba(254, 240, 138, 0.28) 0 8deg, transparent 8deg 22deg);
    filter: blur(0.2px) drop-shadow(0 0 42px rgba(250, 204, 21, 0.22));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: aboutSunFloat 9s ease-in-out infinite;
}

.about-weather-cloud {
    position: absolute;
    width: clamp(12rem, 22vw, 22rem);
    height: clamp(4.5rem, 8vw, 8rem);
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 18% 62%, rgba(255, 255, 255, 0.9) 0 30%, transparent 31%),
        radial-gradient(ellipse at 43% 38%, rgba(255, 255, 255, 0.86) 0 38%, transparent 39%),
        radial-gradient(ellipse at 70% 55%, rgba(248, 250, 252, 0.78) 0 34%, transparent 35%),
        radial-gradient(ellipse at 86% 68%, rgba(226, 232, 240, 0.5) 0 24%, transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(148, 163, 184, 0.18) 72%, rgba(71, 85, 105, 0.12));
    filter: blur(7px);
    opacity: 0.56;
    transform: translate3d(0, 0, 0);
}

.about-weather-cloud::before,
.about-weather-cloud::after {
    content: '';
    position: absolute;
    inset: 18% 8% 6%;
    border-radius: inherit;
    pointer-events: none;
}

.about-weather-cloud::before {
    background: linear-gradient(180deg, transparent 0 54%, rgba(71, 85, 105, 0.16) 75%, rgba(15, 23, 42, 0.14));
    filter: blur(5px);
    opacity: 0.7;
}

.about-weather-cloud::after {
    inset: 0;
    background:
        radial-gradient(ellipse at 34% 34%, rgba(255, 255, 255, 0.42), transparent 34%),
        radial-gradient(ellipse at 68% 64%, rgba(148, 163, 184, 0.18), transparent 42%);
    mix-blend-mode: screen;
    opacity: 0.52;
}

.about-weather-cloud-a {
    top: 5.2rem;
    left: -5rem;
    animation: aboutCloudA 28s linear infinite;
}

.about-weather-cloud-b {
    top: 10rem;
    right: -7rem;
    transform: scale(0.72);
    opacity: 0.42;
    animation: aboutCloudB 36s linear infinite;
}

.about-weather-cloud-c {
    bottom: 8rem;
    left: 42%;
    transform: scale(0.58);
    opacity: 0.28;
    animation: aboutCloudC 42s linear infinite;
}

.about-weather-rain,
.about-weather-snow {
    position: absolute;
    inset: -20% 0 0;
    opacity: 0;
}

.about-weather-rain {
    display: none;
}

.about-weather-snow {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2.4px, transparent 3.1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 1.4px, transparent 2.1px),
        radial-gradient(circle, rgba(219, 234, 254, 0.66) 0 1.9px, transparent 2.7px),
        radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 1.5px);
    background-size: 92px 128px, 142px 186px, 210px 268px, 56px 88px;
    filter: drop-shadow(0 1px 2px rgba(148, 163, 184, 0.12));
    animation: aboutSnowFall 12s linear infinite;
}

.about-weather-snow-b {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 3px, transparent 3.8px),
        radial-gradient(circle, rgba(224, 242, 254, 0.62) 0 1.8px, transparent 2.6px);
    background-size: 150px 220px, 74px 112px;
    animation: aboutSnowNearFall 19s linear infinite;
    background-position: 40px 20px, 90px 70px;
}

body.weather-rain .about-weather-rain,
body.weather-storm .about-weather-rain {
    display: none;
    opacity: 0 !important;
}

body.weather-storm .about-weather-scene::after {
    background:
        linear-gradient(116deg, transparent 0 62%, rgba(255, 255, 255, 0.34) 63%, transparent 64%),
        radial-gradient(circle at 72% 10%, rgba(255, 255, 255, 0.2), transparent 15rem);
    mix-blend-mode: screen;
    animation: effectLightning 7.5s steps(1, end) infinite;
}

body.weather-cloudy .about-weather-cloud,
body.weather-rain .about-weather-cloud,
body.weather-storm .about-weather-cloud {
    opacity: 0.82;
}

body.weather-cloudy .about-weather-scene::before {
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.16), rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.04)),
        radial-gradient(circle at 22% 10%, rgba(226, 232, 240, 0.38), transparent 21rem),
        radial-gradient(circle at 76% 8%, rgba(148, 163, 184, 0.22), transparent 18rem);
}

body.weather-cloudy .about-weather-scene::after {
    background:
        linear-gradient(180deg, rgba(226, 232, 240, 0.34), transparent 52%),
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.24), transparent 62%),
        radial-gradient(ellipse at 50% 100%, rgba(148, 163, 184, 0.08), transparent 60%);
    opacity: 0.68;
}

body.weather-snow .about-weather-snow {
    opacity: 0.72;
}

body.season-spring .about-weather-scene::after {
    background:
        radial-gradient(circle at 18% 78%, rgba(187, 247, 208, 0.3), transparent 24rem),
        radial-gradient(circle at 82% 32%, rgba(252, 231, 243, 0.28), transparent 18rem);
}

body.season-summer .about-weather-scene::after {
    background:
        radial-gradient(circle at 18% 75%, rgba(204, 251, 241, 0.28), transparent 24rem),
        radial-gradient(circle at 84% 28%, rgba(254, 240, 138, 0.32), transparent 19rem);
}

body.season-autumn .about-weather-scene::after {
    background: none;
    opacity: 0;
}

body.season-winter .about-weather-scene::after {
    background:
        radial-gradient(circle at 20% 76%, rgba(224, 242, 254, 0.34), transparent 25rem),
        radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.38), transparent 20rem);
}

.effect-layer,
.effect-particle,
.effect-grass,
.effect-branch,
.effect-tree,
.effect-cloud-wisp,
.effect-raindrop,
.effect-splash,
.effect-lightning-bolt,
.effect-lightning-flash {
    position: absolute;
    display: block;
    pointer-events: none;
}

.effect-layer {
    inset: 0;
    overflow: hidden;
    contain: layout paint style;
}

.effect-layer-back {
    z-index: 1;
}

.effect-layer-mid {
    z-index: 2;
}

.effect-layer-front {
    z-index: 3;
}

.effect-particle {
    left: var(--x, 50%);
    top: var(--y, var(--start-y, -10%));
    width: var(--size, 12px);
    height: var(--size, 12px);
    opacity: var(--opacity, 0.7);
    filter: blur(var(--blur, 0));
    will-change: transform, opacity;
}

.effect-fall-soft {
    animation: effectSoftFall var(--duration, 16s) cubic-bezier(0.35, 0, 0.2, 1) var(--delay, 0s) infinite;
}

.effect-fall-leaf {
    animation: effectLeafFall var(--duration, 16s) cubic-bezier(0.38, 0.02, 0.24, 1) var(--delay, 0s) infinite;
}

.effect-fall-snow {
    animation: effectSnowFall var(--duration, 18s) linear var(--delay, 0s) infinite;
}

.effect-petal {
    border-radius: 78% 22% 74% 26% / 62% 30% 70% 38%;
    background:
        radial-gradient(ellipse at 34% 28%, rgba(255, 255, 255, 0.86), transparent 38%),
        linear-gradient(135deg, var(--color, #fecdd3), rgba(244, 114, 182, 0.42));
    box-shadow: inset -2px -3px 5px rgba(190, 24, 93, 0.12);
}

.effect-leaf {
    border-radius: 78% 22% 70% 30% / 58% 30% 70% 42%;
    background:
        linear-gradient(42deg, transparent 0 46%, rgba(92, 45, 16, 0.52) 47% 50%, transparent 51% 100%),
        linear-gradient(118deg, transparent 0 58%, rgba(92, 45, 16, 0.22) 59% 61%, transparent 62% 100%),
        linear-gradient(152deg, transparent 0 57%, rgba(92, 45, 16, 0.18) 58% 60%, transparent 61% 100%),
        linear-gradient(135deg, var(--color-a, #d97706), var(--color-b, #92400e));
    box-shadow: inset -5px -6px 9px rgba(69, 26, 3, 0.18);
}

.effect-leaf::before,
.effect-leaf::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.effect-leaf::before {
    left: 47%;
    top: 8%;
    width: 7%;
    height: 94%;
    border-radius: 999px;
    background: rgba(92, 45, 16, 0.48);
    transform: rotate(38deg);
    transform-origin: 50% 8%;
}

.effect-leaf::after {
    left: 42%;
    top: 42%;
    width: 42%;
    height: 2px;
    border-radius: 999px;
    background: rgba(92, 45, 16, 0.24);
    box-shadow:
        -13px -10px 0 rgba(92, 45, 16, 0.18),
        10px 11px 0 rgba(92, 45, 16, 0.16);
    transform: rotate(-18deg);
}

.effect-snowflake {
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 28%, rgba(219, 234, 254, 0.5) 32% 54%, transparent 58%),
        linear-gradient(0deg, transparent 0 45%, rgba(255, 255, 255, 0.74) 46% 54%, transparent 55%),
        linear-gradient(60deg, transparent 0 45%, rgba(255, 255, 255, 0.6) 46% 54%, transparent 55%),
        linear-gradient(120deg, transparent 0 45%, rgba(255, 255, 255, 0.7) 46% 54%, transparent 55%);
    filter: blur(var(--blur, 0)) drop-shadow(0 1px 3px rgba(148, 163, 184, 0.12));
}

.effect-flower-bloom {
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 13%, var(--color, #f9a8d4) 0 22%, transparent 23%),
        radial-gradient(ellipse at 83% 48%, var(--color, #f9a8d4) 0 22%, transparent 23%),
        radial-gradient(ellipse at 50% 86%, var(--color, #f9a8d4) 0 22%, transparent 23%),
        radial-gradient(ellipse at 17% 48%, var(--color, #f9a8d4) 0 22%, transparent 23%),
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.92) 0 17%, transparent 18%);
    animation: effectBloomSway var(--duration, 7s) ease-in-out var(--delay, 0s) infinite;
}

.effect-grass {
    left: var(--x, 50%);
    bottom: -0.4rem;
    width: var(--w, 3px);
    height: var(--h, 70px);
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone, #22c55e) 82%, white), var(--tone, #15803d));
    transform-origin: 50% 100%;
    transform: rotate(var(--tilt, 0deg));
    opacity: 0.68;
    filter: drop-shadow(0 8px 8px rgba(21, 128, 61, 0.08));
    animation: effectGrassSway var(--duration, 5s) ease-in-out var(--delay, 0s) infinite;
}

.effect-spring-stem::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 12%;
    width: 12px;
    height: 8px;
    border-radius: 70% 30% 70% 30%;
    background: rgba(187, 247, 208, 0.72);
    transform: translateX(-10%) rotate(34deg);
}

.effect-branch {
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--size, 170px);
    height: calc(var(--size, 170px) * 0.58);
    transform: rotate(var(--rotate, 0deg));
    opacity: 0.38;
    filter: blur(0.25px) drop-shadow(0 18px 24px rgba(21, 128, 61, 0.12));
    animation: effectBranchSway var(--duration, 9s) ease-in-out var(--delay, 0s) infinite;
}

.effect-summer-branch {
    background:
        radial-gradient(circle at 28% 52%, rgba(22, 163, 74, 0.62) 0 16%, transparent 17%),
        radial-gradient(circle at 46% 34%, rgba(34, 197, 94, 0.54) 0 18%, transparent 19%),
        radial-gradient(circle at 62% 54%, rgba(21, 128, 61, 0.56) 0 17%, transparent 18%),
        linear-gradient(98deg, transparent 0 42%, rgba(120, 53, 15, 0.32) 43% 48%, transparent 49%);
}

.effect-tree {
    left: var(--x, 0);
    top: var(--y, 20%);
    width: var(--size, 220px);
    height: calc(var(--size, 220px) * 1.18);
    transform: rotate(var(--rotate, 0deg));
    opacity: 0.46;
    filter: drop-shadow(0 22px 28px rgba(20, 83, 45, 0.18));
    animation: effectTreeSway var(--duration, 11s) ease-in-out var(--delay, 0s) infinite;
}

.effect-about-tree {
    opacity: 0.42;
    background: center bottom / contain no-repeat;
    filter: blur(0.12px) drop-shadow(0 18px 26px rgba(20, 83, 45, 0.16));
}

.effect-about-tree-pine {
    background-image: url('images/effects/tree-pine-engraved.svg');
}

.effect-about-tree::before,
.effect-about-tree::after {
    display: none;
}

.effect-tree::before,
.effect-tree::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.effect-tree::before {
    left: 45%;
    bottom: 0;
    width: 12%;
    height: 58%;
    border-radius: 999px 999px 3px 3px;
    clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(58deg, transparent 0 33%, rgba(120, 53, 15, 0.5) 34% 39%, transparent 40%),
        linear-gradient(118deg, transparent 0 43%, rgba(69, 26, 3, 0.42) 44% 49%, transparent 50%),
        linear-gradient(90deg, #78350f 0 20%, #a16207 42%, #713f12 64%, #451a03 100%);
}

.effect-tree::after {
    left: 0;
    top: 0;
    width: 100%;
    height: 66%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 44%, rgba(34, 197, 94, 0.88) 0 18%, transparent 19%),
        radial-gradient(circle at 52% 25%, rgba(22, 163, 74, 0.86) 0 23%, transparent 24%),
        radial-gradient(circle at 70% 47%, rgba(21, 128, 61, 0.8) 0 20%, transparent 21%),
        radial-gradient(circle at 48% 64%, rgba(101, 163, 13, 0.72) 0 22%, transparent 23%),
        radial-gradient(circle at 24% 60%, rgba(74, 222, 128, 0.62) 0 17%, transparent 18%),
        radial-gradient(circle at 58% 48%, rgba(20, 83, 45, 0.18), transparent 42%);
}

.effect-about-tree::after {
    background:
        radial-gradient(circle at 32% 42%, rgba(187, 247, 208, 0.28), transparent 16%),
        radial-gradient(circle at 34% 44%, rgba(34, 197, 94, 0.86) 0 18%, transparent 19%),
        radial-gradient(circle at 52% 25%, rgba(22, 163, 74, 0.88) 0 23%, transparent 24%),
        radial-gradient(circle at 70% 47%, rgba(21, 128, 61, 0.82) 0 20%, transparent 21%),
        radial-gradient(circle at 48% 64%, rgba(101, 163, 13, 0.7) 0 22%, transparent 23%),
        radial-gradient(circle at 24% 60%, rgba(74, 222, 128, 0.62) 0 17%, transparent 18%),
        radial-gradient(circle at 62% 72%, rgba(20, 83, 45, 0.2), transparent 35%);
}

.effect-sun-mote {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(253, 224, 71, 0.36) 52%, transparent 72%);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.32);
    mix-blend-mode: screen;
    animation: effectSunMote var(--duration, 12s) ease-in-out var(--delay, 0s) infinite;
}

.effect-summer-flower {
    filter: drop-shadow(0 4px 6px rgba(120, 53, 15, 0.12));
}

.effect-hero-flower {
    filter: drop-shadow(0 5px 9px rgba(157, 23, 77, 0.14));
}

.effect-hero-grass {
    opacity: 0.78;
}

.effect-hero-cloud {
    filter: blur(14px);
}

.effect-cloud-wisp {
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--size, 280px);
    height: calc(var(--size, 280px) * 0.34);
    border-radius: 999px;
    opacity: var(--opacity, 0.32);
    background:
        radial-gradient(ellipse at 20% 58%, rgba(255, 255, 255, 0.86) 0 30%, transparent 31%),
        radial-gradient(ellipse at 48% 42%, rgba(241, 245, 249, 0.78) 0 38%, transparent 39%),
        radial-gradient(ellipse at 78% 62%, rgba(203, 213, 225, 0.62) 0 31%, transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(100, 116, 139, 0.16));
    filter: blur(12px);
    animation: effectCloudWisp var(--duration, 34s) linear var(--delay, 0s) infinite;
}

.effect-raindrop {
    left: var(--x, 50%);
    top: var(--start-y, -20%);
    width: var(--w, 1.2px);
    height: var(--length, 64px);
    border-radius: 999px;
    opacity: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(226, 232, 240, 0.88) 20%, rgba(125, 211, 252, 0.7) 66%, rgba(30, 64, 175, 0)),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    box-shadow: 0 0 7px rgba(186, 230, 253, 0.22);
    filter: blur(var(--blur, 0.15px));
    transform: translate3d(0, -16vh, 0) rotate(var(--angle, 12deg));
    transform-origin: 50% 100%;
    animation: effectRainFall var(--duration, 0.82s) linear var(--delay, 0s) infinite;
    will-change: transform, opacity;
}

.effect-hero-rain {
    width: var(--w, 1.4px);
}
.effect-about-rain {
    width: var(--w, 1.4px);
    z-index: 3;
    filter: blur(var(--blur, 0.12px)) drop-shadow(0 0 6px rgba(186, 230, 253, 0.2));
}

.about-weather-scene .effect-raindrop {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(226, 232, 240, 0.9) 20%, rgba(125, 211, 252, 0.72) 66%, rgba(30, 64, 175, 0)),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    box-shadow: 0 0 8px rgba(186, 230, 253, 0.24);
}

.effect-about-splash {
    z-index: 4;
    bottom: clamp(0.6rem, 2vw, 2rem);
}

body.weather-storm .about-weather-scene .effect-about-rain {
    filter: blur(var(--blur, 0.08px)) drop-shadow(0 0 8px rgba(191, 219, 254, 0.28));
}

.effect-splash {
    left: var(--x, 50%);
    bottom: clamp(1.2rem, 4vw, 3.4rem);
    width: var(--splash-w, 18px);
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    border: 1px solid rgba(191, 219, 254, 0.42);
    border-top-color: transparent;
    transform: translateX(-50%) scale(0.4);
    animation: effectRainSplash var(--duration, 1s) ease-out var(--delay, 0s) infinite;
    will-change: transform, opacity;
}

.effect-lightning-flash {
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(118deg, transparent 0 62%, rgba(255, 255, 255, 0.72) 63% 64%, transparent 65%),
        radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.36), transparent 18rem);
    mix-blend-mode: screen;
    animation: effectLightning 7.5s steps(1, end) infinite;
}

.effect-lightning-bolt {
    right: clamp(12%, 18vw, 26%);
    top: clamp(5rem, 13vw, 11rem);
    width: clamp(4rem, 9vw, 7rem);
    height: clamp(11rem, 22vw, 18rem);
    opacity: 0;
    clip-path: polygon(48% 0, 72% 0, 58% 35%, 82% 35%, 34% 100%, 46% 52%, 24% 52%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(253, 224, 71, 0.78) 38%, rgba(96, 165, 250, 0.12));
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 30px rgba(250, 204, 21, 0.34));
    animation: effectLightningBolt 7.5s steps(1, end) infinite;
}

@keyframes aboutSunFloat {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    50% { transform: translateY(10px) scale(1.04) rotate(8deg); }
}

@keyframes effectSoftFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
    10% { opacity: var(--opacity, 0.7); }
    52% { transform: translate3d(calc(var(--drift, 80px) * 0.45), 48vh, 0) rotate(calc(var(--spin, 180deg) * 0.45)); }
    100% { transform: translate3d(var(--drift, 80px), 112vh, 0) rotate(var(--spin, 180deg)); opacity: 0; }
}

@keyframes effectLeafFall {
    0% { transform: translate3d(0, -14vh, 0) rotate(0deg) rotateY(0deg); opacity: 0; }
    8% { opacity: var(--opacity, 0.7); }
    35% { transform: translate3d(calc(var(--drift, 120px) * -0.22), 34vh, 0) rotate(calc(var(--spin, 360deg) * 0.3)) rotateY(120deg); }
    70% { transform: translate3d(calc(var(--drift, 120px) * 0.62), 74vh, 0) rotate(calc(var(--spin, 360deg) * 0.7)) rotateY(260deg); }
    100% { transform: translate3d(var(--drift, 120px), 112vh, 0) rotate(var(--spin, 360deg)) rotateY(380deg); opacity: 0; }
}

@keyframes effectSnowFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
    10% { opacity: var(--opacity, 0.72); }
    50% { transform: translate3d(calc(var(--drift, 70px) * 0.5), 50vh, 0) rotate(calc(var(--spin, 180deg) * 0.5)); }
    100% { transform: translate3d(var(--drift, 70px), 112vh, 0) rotate(var(--spin, 180deg)); opacity: 0; }
}

@keyframes effectRainFall {
    0% { transform: translate3d(0, -16vh, 0) rotate(var(--angle, 12deg)) scaleY(0.88); opacity: 0; }
    8% { opacity: var(--opacity, 0.58); }
    86% { opacity: var(--opacity, 0.58); }
    100% { transform: translate3d(var(--wind, -58px), 118vh, 0) rotate(var(--angle, 12deg)) scaleY(1.08); opacity: 0; }
}

@keyframes effectRainSplash {
    0%, 68% { transform: translateX(-50%) scale(0.2); opacity: 0; }
    78% { opacity: var(--opacity, 0.22); }
    100% { transform: translateX(-50%) scale(1.25); opacity: 0; }
}

@keyframes effectCloudWisp {
    from { transform: translateX(-18vw); }
    to { transform: translateX(118vw); }
}

@keyframes effectSunMote {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.82); opacity: 0; }
    20%, 70% { opacity: var(--opacity, 0.38); }
    50% { transform: translate3d(22px, -26px, 0) scale(1.15); }
}

@keyframes effectGrassSway {
    0%, 100% { transform: rotate(var(--tilt, 0deg)); }
    50% { transform: rotate(calc(var(--tilt, 0deg) + 7deg)); }
}

@keyframes effectBranchSway {
    0%, 100% { transform: rotate(var(--rotate, 0deg)) translateY(0); }
    50% { transform: rotate(calc(var(--rotate, 0deg) + 2deg)) translateY(8px); }
}

@keyframes effectTreeSway {
    0%, 100% { transform: rotate(var(--rotate, 0deg)) translateY(0); }
    50% { transform: rotate(calc(var(--rotate, 0deg) + 1.5deg)) translateY(6px); }
}

@keyframes effectBloomSway {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes effectLightning {
    0%, 88%, 92%, 100% { opacity: 0; }
    89%, 91% { opacity: 0.86; }
}

@keyframes effectLightningBolt {
    0%, 88%, 92%, 100% { opacity: 0; transform: translateY(0) scaleY(1); }
    89% { opacity: 0.95; transform: translateY(0) scaleY(1); }
    91% { opacity: 0.58; transform: translateY(5px) scaleY(0.96); }
}

@keyframes aboutSeasonFloatA {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 10px 18px; rotate: 8deg; }
}

@keyframes aboutSeasonFloatB {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: -16px -10px; rotate: -10deg; }
}

@keyframes aboutSeasonFloatC {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 18px -14px; rotate: 12deg; }
}

@keyframes aboutCloudA {
    from { transform: translateX(-8%) scale(1); }
    to { transform: translateX(118vw) scale(1); }
}

@keyframes aboutCloudB {
    from { transform: translateX(8%) scale(0.72); }
    to { transform: translateX(-118vw) scale(0.72); }
}

@keyframes aboutCloudC {
    from { transform: translateX(-18vw) scale(0.58); }
    to { transform: translateX(76vw) scale(0.58); }
}

@keyframes aboutSnowFall {
    from { background-position: 0 -128px, 0 -186px, 0 -268px, 0 -88px; }
    50% { background-position: 28px -64px, -18px -93px, 22px -134px, -12px -44px; }
    to { background-position: 54px 0, -34px 0, 38px 0, -24px 0; }
}

@keyframes aboutSnowNearFall {
    from { background-position: 40px -220px, 90px -112px; }
    50% { background-position: 64px -110px, 70px -56px; }
    to { background-position: 88px 0, 52px 0; }
}

@media (max-width: 1024px) {
    .seasonal-decor-piece-c {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero .seasonal-decor {
        display: block;
        z-index: 1;
    }

    .hero .seasonal-decor .effect-layer-front {
        display: none;
    }

    .seasonal-decor {
        opacity: 0.72;
    }

    .seasonal-decor .effect-layer-back {
        opacity: 0.45;
    }

    .seasonal-decor .effect-layer-mid {
        opacity: 0.28;
    }

    .seasonal-decor .effect-layer-front {
        opacity: 0.2;
    }

    .seasonal-decor-piece {
        width: 3.8rem;
        height: 3.8rem;
        opacity: 0.26;
        filter: blur(0.4px) drop-shadow(0 12px 18px rgba(20, 14, 10, 0.1));
    }

    .seasonal-decor-piece-a {
        left: -1.35rem;
        bottom: 1.35rem;
    }

    .seasonal-decor-piece-b {
        top: 6.8rem;
        right: -1.65rem;
        transform: rotate(var(--decor-rotate)) scale(0.68);
    }

    .weather-decor-sun {
        top: 5.2rem;
        right: -1.45rem;
        width: 3.7rem;
        height: 3.7rem;
    }

    body.weather-rain .weather-decor-rain,
    body.weather-storm .weather-decor-rain {
        opacity: 0.18;
    }

    .seasonal-decor .effect-hero-flower,
    .seasonal-decor .effect-hero-grass,
    .seasonal-decor .effect-summer-flower {
        opacity: 0.42;
    }

    .seasonal-decor .effect-hero-cloud {
        filter: blur(8px);
    }

    .seasonal-decor .effect-hero-rain,
    .seasonal-decor .effect-hero-splash {
        opacity: var(--opacity, 0.52);
    }

    .about-weather-scene {
        opacity: 0.7;
    }

    .about-weather-cloud-c {
        display: none;
    }

    .about-weather-sun {
        top: 2.2rem;
        right: -1.4rem;
        width: 7rem;
        height: 7rem;
    }

    .about-weather-cloud {
        filter: blur(10px);
    }

    .about-season-item {
        width: 4rem;
        height: 4rem;
        opacity: 0.44;
    }

    .about-season-item-c,
    .about-season-trail-b {
        display: none;
    }

    .effect-branch,
    .effect-tree,
    .effect-cloud-wisp {
        opacity: 0.24;
    }

    .effect-grass:nth-child(2n),
    .effect-particle:nth-child(3n),
    .effect-raindrop:nth-child(3n) {
        display: none;
    }
}

@media (max-width: 420px) {
    .seasonal-decor {
        opacity: 0.78;
    }

    .seasonal-decor .effect-layer-mid,
    .seasonal-decor .effect-layer-front {
        opacity: 0.22;
    }

    .seasonal-decor-piece-b {
        top: 7.6rem;
    }

    .weather-decor-sun {
        top: 5.8rem;
        right: -1.9rem;
        width: 3.2rem;
        height: 3.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    .weather-decor-rain,
    .weather-decor-sun,
    .about-weather-sun,
    .about-weather-cloud,
    .about-weather-rain,
    .about-weather-snow,
    .about-season-item,
    .effect-particle,
    .effect-grass,
    .effect-branch,
    .effect-tree,
    .effect-cloud-wisp,
    .effect-raindrop,
    .effect-splash,
    .effect-lightning-bolt,
    .effect-lightning-flash {
        animation: none !important;
    }

    .effect-layer {
        display: none;
    }
}

/* Autumn hero cleanup: remove only static decorative bubbles in every time/weather scenario. */
body.season-autumn .hero .seasonal-decor-piece {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Final logical weather matrix: precipitation overrides sun/moon decorations. */
body.weather-rain .weather-decor-sun,
body.weather-storm .weather-decor-sun,
body.weather-snow .weather-decor-sun,
body.weather-rain .about-weather-sun,
body.weather-storm .about-weather-sun,
body.weather-snow .about-weather-sun {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.weather-rain,
body.weather-storm {
    --season-layer-opacity: 0.66;
    --season-glow-a: rgba(30, 41, 59, 0.26);
    --season-glow-b: rgba(59, 130, 246, 0.12);
    --season-mote-a: rgba(191, 219, 254, 0.2);
    --season-mote-b: rgba(148, 163, 184, 0.18);
    --season-mote-c: rgba(30, 41, 59, 0.12);
}


body.weather-rain {
    --season-bg-top: #8fa3b7;
    --season-bg-bottom: #d3dde4;
    --hero-weather-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.26), rgba(30, 41, 59, 0.18) 50%, rgba(71, 85, 105, 0.12)),
        radial-gradient(ellipse at 58% 12%, rgba(191, 219, 254, 0.12), transparent 28rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(15, 23, 42, 0.3), rgba(30, 41, 59, 0.22) 56%, rgba(15, 23, 42, 0.14)),
        radial-gradient(ellipse at 58% 12%, rgba(191, 219, 254, 0.1), transparent 28rem);
}

body.weather-storm {
    --season-bg-top: #344155;
    --season-bg-bottom: #717f91;
    --season-layer-opacity: 0.76;
    --hero-weather-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.42), rgba(15, 23, 42, 0.32) 48%, rgba(30, 41, 59, 0.2)),
        radial-gradient(circle at 70% 13%, rgba(255, 255, 255, 0.1), transparent 18rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(2, 6, 23, 0.44), rgba(15, 23, 42, 0.34)),
        radial-gradient(circle at 70% 13%, rgba(255, 255, 255, 0.08), transparent 18rem);
}

body.weather-snow {
    --season-layer-opacity: 0.64;
    --season-glow-a: rgba(224, 242, 254, 0.24);
    --season-glow-b: rgba(255, 255, 255, 0.2);
    --season-mote-a: rgba(255, 255, 255, 0.48);
    --season-mote-b: rgba(224, 242, 254, 0.32);
    --season-mote-c: rgba(203, 213, 225, 0.2);
}

body.time-evening.weather-rain,
body.time-evening.weather-storm,
body.time-midnight.weather-rain,
body.time-midnight.weather-storm {
    --hero-section-bg:
        radial-gradient(ellipse at 76% 76%, rgba(49, 46, 129, 0.18), transparent 27rem),
        linear-gradient(145deg, rgba(3, 7, 18, 0.76), rgba(15, 23, 42, 0.62) 54%, rgba(51, 65, 85, 0.52));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(2, 6, 23, 0.48), rgba(2, 6, 23, 0.68)),
        radial-gradient(ellipse at 72% 18%, rgba(148, 163, 184, 0.1), transparent 24rem);
}

body.season-autumn.weather-rain,
body.season-autumn.weather-storm {
    --season-bg-top: #7f6d63;
    --season-bg-bottom: #c3aea1;
    --season-glow-a: rgba(69, 26, 3, 0.22);
    --season-glow-b: rgba(120, 53, 15, 0.16);
}

body.season-winter.weather-snow.time-midnight,
body.time-midnight.weather-snow {
    --hero-section-bg:
        radial-gradient(circle at 72% 22%, rgba(191, 219, 254, 0.08), transparent 22rem),
        linear-gradient(145deg, rgba(3, 7, 18, 0.84), rgba(15, 23, 42, 0.72) 52%, rgba(30, 41, 59, 0.62));
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(2, 6, 23, 0.44), rgba(2, 6, 23, 0.66)),
        radial-gradient(ellipse at 50% 10%, rgba(224, 242, 254, 0.08), transparent 26rem);
}

body.weather-rain .about-weather-scene::before,
body.weather-storm .about-weather-scene::before {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.28), rgba(71, 85, 105, 0.14) 42%, rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at 30% 12%, rgba(191, 219, 254, 0.14), transparent 20rem),
        radial-gradient(circle at 76% 4%, rgba(30, 41, 59, 0.22), transparent 18rem);
}

body.weather-storm .about-weather-scene::before {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.42), rgba(30, 41, 59, 0.24) 48%, rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at 72% 10%, rgba(255, 255, 255, 0.1), transparent 15rem);
}





/* Summer sunset background: grey upper sky, warm horizon, one clean layer. */
body.season-summer.time-evening.time-sunset.weather-sunny {
    --season-bg-top: #4a4650;
    --season-bg-bottom: #d96d3a;
    --season-glow-a: rgba(245, 124, 55, 0.4);
    --season-glow-b: rgba(120, 113, 108, 0.2);
    --hero-section-bg:
        radial-gradient(ellipse at 72% 86%, rgba(255, 198, 128, 0.4), transparent 26rem),
        radial-gradient(ellipse at 74% 72%, rgba(229, 92, 43, 0.26), transparent 28rem),
        radial-gradient(ellipse at 22% 18%, rgba(107, 114, 128, 0.22), transparent 30rem),
        linear-gradient(180deg, rgba(52, 50, 58, 0.92) 0%, rgba(69, 64, 70, 0.88) 36%, rgba(96, 70, 74, 0.78) 62%, rgba(168, 78, 50, 0.66) 82%, rgba(217, 109, 58, 0.58) 100%);
    --hero-photo-overlay:
        linear-gradient(180deg, rgba(39, 39, 42, 0.46), rgba(63, 63, 70, 0.32) 45%, rgba(154, 64, 42, 0.2) 100%),
        radial-gradient(ellipse at 74% 82%, rgba(255, 229, 190, 0.16), transparent 24rem);
    --hero-weather-photo-wash:
        linear-gradient(180deg, rgba(39, 39, 42, 0.24), rgba(82, 82, 91, 0.14) 54%, rgba(245, 124, 55, 0.14)),
        radial-gradient(ellipse at 74% 84%, rgba(255, 226, 184, 0.18), transparent 22rem);
}

body.season-summer.time-evening.time-sunset.weather-sunny::before {
    opacity: 0.88;
    background:
        radial-gradient(ellipse at 72% 86%, rgba(255, 218, 177, 0.24), transparent 22rem),
        radial-gradient(ellipse at 70% 70%, rgba(234, 88, 12, 0.18), transparent 27rem),
        radial-gradient(ellipse at 28% 20%, rgba(120, 113, 108, 0.16), transparent 26rem),
        linear-gradient(180deg, rgba(63, 63, 70, 0.18), rgba(82, 82, 91, 0.1) 52%, rgba(217, 119, 6, 0.08));
}

body.season-summer.time-evening.time-sunset.weather-sunny .hero .seasonal-decor {
    --hero-mood-opacity: 0.9;
    --hero-mood-blend: screen;
    --hero-mood-bg:
        radial-gradient(ellipse at 72% 86%, rgba(255, 213, 159, 0.38), transparent 29rem),
        radial-gradient(ellipse at 72% 70%, rgba(234, 88, 12, 0.24), transparent 26rem),
        radial-gradient(ellipse at 28% 28%, rgba(120, 113, 108, 0.16), transparent 27rem),
        linear-gradient(180deg, rgba(39, 39, 42, 0.04), rgba(82, 82, 91, 0.1) 60%, rgba(217, 119, 6, 0.08));
    --hero-atmosphere-opacity: 0.72;
    --hero-atmosphere-blend: screen;
    --hero-atmosphere-bg:
        linear-gradient(172deg, transparent 0 44%, rgba(255, 229, 190, 0.16) 55%, transparent 70%),
        linear-gradient(180deg, transparent 0 62%, rgba(255, 237, 213, 0.08) 72%, transparent 100%),
        radial-gradient(ellipse at 74% 86%, rgba(255, 247, 237, 0.16), transparent 20rem);
}
/* Unified sun system: same daytime shape, time-specific color and placement. */
body.weather-sunny .weather-decor-sun,
body.weather-sunny .about-weather-sun {
    width: clamp(5.2rem, 9vw, 8.4rem);
    height: clamp(5.2rem, 9vw, 8.4rem);
    border-radius: 50%;
    overflow: visible;
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.98) 0 10%, transparent 11%),
        radial-gradient(circle, rgba(254, 252, 232, 0.99) 0 27%, rgba(250, 204, 21, 0.9) 28% 50%, rgba(45, 212, 191, 0.16) 51% 66%, transparent 67%),
        repeating-conic-gradient(from 4deg, rgba(254, 240, 138, 0.46) 0 8deg, transparent 8deg 21deg);
    box-shadow:
        0 0 2rem rgba(250, 204, 21, 0.34),
        0 0 4.4rem rgba(255, 255, 255, 0.2),
        0 0 6.2rem rgba(249, 115, 22, 0.12);
    filter: blur(0.08px) saturate(1.05);
    animation: sunBreath 6s ease-in-out infinite;
    opacity: 0.88;
    visibility: visible;
    pointer-events: none;
    scale: 1;
}

body.weather-sunny .weather-decor-sun::before,
body.weather-sunny .weather-decor-sun::after,
body.weather-sunny .about-weather-sun::before,
body.weather-sunny .about-weather-sun::after {
    content: none;
    display: none;
}

body.time-evening.weather-sunny .weather-decor-sun,
body.time-evening.weather-sunny .about-weather-sun {
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 250, 235, 0.98) 0 10%, transparent 11%),
        radial-gradient(circle, rgba(255, 232, 170, 0.99) 0 27%, rgba(251, 146, 60, 0.92) 28% 52%, rgba(194, 65, 12, 0.26) 53% 66%, transparent 67%),
        repeating-conic-gradient(from 4deg, rgba(253, 186, 116, 0.42) 0 8deg, transparent 8deg 21deg);
    box-shadow:
        0 0 2rem rgba(251, 146, 60, 0.34),
        0 0 4.4rem rgba(255, 237, 213, 0.18),
        0 0 6.2rem rgba(194, 65, 12, 0.14);
    filter: blur(0.08px) saturate(1.12);
}

body.season-summer.time-evening.time-sunset.weather-sunny .weather-decor-sun,
body.season-summer.time-evening.time-sunset.weather-sunny .about-weather-sun {
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 250, 235, 0.98) 0 10%, transparent 11%),
        radial-gradient(circle, rgba(255, 236, 190, 0.99) 0 27%, rgba(251, 146, 60, 0.92) 28% 50%, rgba(220, 38, 38, 0.22) 51% 66%, transparent 67%),
        repeating-conic-gradient(from 4deg, rgba(253, 186, 116, 0.34) 0 8deg, transparent 8deg 21deg);
    box-shadow:
        0 0 1.8rem rgba(251, 146, 60, 0.3),
        0 0 4rem rgba(255, 237, 213, 0.16),
        0 0 5.6rem rgba(220, 38, 38, 0.1);
    filter: blur(0.08px) saturate(1.1);
}

/* Hero sun placement: no separate decorative sun in hero during day/evening/sunset. */
body.weather-sunny:not(.time-midnight) .hero .weather-decor-sun {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.time-evening.weather-sunny:not(.time-sunset) .hero {
    background:
        radial-gradient(circle at 74% 76%, rgba(255, 246, 225, 0.94) 0 3.8rem, rgba(251, 146, 60, 0.58) 3.9rem 8.6rem, rgba(194, 65, 12, 0.16) 8.7rem 13.8rem, transparent 14.5rem),
        radial-gradient(ellipse at 74% 78%, rgba(249, 115, 22, 0.42), transparent 27rem),
        radial-gradient(ellipse at 32% 36%, rgba(244, 114, 182, 0.14), transparent 25rem),
        linear-gradient(180deg, #f3a15f 0%, #f6b47d 34%, #d78478 64%, #6f5a86 100%);
}

body.season-summer.time-evening.time-sunset.weather-sunny .hero {
    background:
        radial-gradient(circle at 74% 88%, rgba(255, 226, 196, 0.92) 0 3.7rem, rgba(239, 68, 68, 0.58) 3.8rem 8.2rem, rgba(127, 29, 29, 0.2) 8.3rem 13.8rem, transparent 14rem),
        radial-gradient(ellipse at 74% 90%, rgba(220, 38, 38, 0.42), transparent 28rem),
        radial-gradient(ellipse at 28% 20%, rgba(82, 82, 91, 0.22), transparent 28rem),
        linear-gradient(180deg, #9ca3af 0%, #8b8f9b 28%, #b97873 62%, #493954 100%);
}
/* Night moon override: realistic moon, not daytime sun. */
body.time-midnight.weather-sunny .weather-decor-sun,
body.time-midnight.weather-sunny .about-weather-sun {
    width: clamp(5.4rem, 9vw, 8.6rem);
    height: clamp(5.4rem, 9vw, 8.6rem);
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.8) 0 4.5%, transparent 9.5%),
        radial-gradient(circle at 57% 35%, rgba(100, 116, 139, 0.23) 0 5.2%, transparent 8.4%),
        radial-gradient(circle at 40% 62%, rgba(71, 85, 105, 0.18) 0 6.2%, transparent 9.4%),
        radial-gradient(circle at 68% 66%, rgba(51, 65, 85, 0.16) 0 4.8%, transparent 7.2%),
        radial-gradient(ellipse at 57% 54%, rgba(100, 116, 139, 0.18) 0 24%, transparent 42%),
        radial-gradient(circle at 42% 39%, #ffffff 0 18%, #f5f7fb 34%, #d9e1ec 56%, #aebdce 73%, #7f91a7 100%);
    border: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow:
        inset -1.05rem -0.86rem 1.7rem rgba(15, 23, 42, 0.28),
        inset 0.56rem 0.44rem 0.92rem rgba(255, 255, 255, 0.7),
        0 0 1.2rem rgba(226, 232, 240, 0.34),
        0 0 3rem rgba(96, 165, 250, 0.2);
    filter: saturate(0.92) contrast(1.04);
    animation: moonDrift 13s ease-in-out infinite;
    opacity: 0.93;
    translate: 0 -8%;
    scale: 0.78;
}

body.time-midnight.weather-sunny .weather-decor-sun::before,
body.time-midnight.weather-sunny .about-weather-sun::before,
body.time-midnight.weather-sunny .weather-decor-sun::after,
body.time-midnight.weather-sunny .about-weather-sun::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

body.time-midnight.weather-sunny .weather-decor-sun::before,
body.time-midnight.weather-sunny .about-weather-sun::before {
    background:
        radial-gradient(circle at 24% 48%, rgba(51, 65, 85, 0.18) 0 3.7%, rgba(255, 255, 255, 0.14) 4% 5.2%, transparent 5.5%),
        radial-gradient(circle at 51% 24%, rgba(100, 116, 139, 0.15) 0 3.1%, transparent 4.4%),
        radial-gradient(circle at 75% 43%, rgba(51, 65, 85, 0.17) 0 3.2%, rgba(255, 255, 255, 0.12) 3.5% 4.5%, transparent 4.9%),
        radial-gradient(circle at 54% 74%, rgba(71, 85, 105, 0.15) 0 4.1%, transparent 5.4%),
        linear-gradient(124deg, rgba(255, 255, 255, 0.14), transparent 38% 66%, rgba(15, 23, 42, 0.24));
    mix-blend-mode: soft-light;
    opacity: 0.9;
}

body.time-midnight.weather-sunny .weather-decor-sun::after,
body.time-midnight.weather-sunny .about-weather-sun::after {
    inset: -7%;
    background:
        radial-gradient(circle at 30% 27%, rgba(255, 255, 255, 0.42), transparent 17%),
        radial-gradient(circle at 52% 52%, transparent 48%, rgba(15, 23, 42, 0.22) 70%, transparent 72%),
        radial-gradient(circle at 50% 50%, transparent 59%, rgba(219, 234, 254, 0.36) 71%, transparent 74%);
    mix-blend-mode: screen;
    opacity: 0.62;
}

body.time-midnight.weather-sunny .hero .weather-decor-sun {
    top: clamp(4.2rem, 9vw, 7rem);
    right: clamp(2rem, 12vw, 11rem);
    bottom: auto;
    translate: 0 -4%;
    scale: 0.84;
    opacity: 0.94;
}

/* Final visibility restore for resolved sunny about-sun and night moon only. */
body.weather-sunny .about-weather-sun,
body.time-midnight.weather-sunny .hero .weather-decor-sun {
    visibility: visible;
    pointer-events: none;
}