/* =========================================================================
   Weather Watermark — animated Wildwood tree background.
   Shared, reusable engine: a full-viewport stage holds a sky layer, a particle
   layer, the tree (anchored bottom-right), and a base drift layer. One of four
   weather scenes (fall / winter / rain / sunny) is chosen by weather-watermark.js
   on load. Subtle by default; fades up on hover/click of the tree.
   ========================================================================= */

.weather-watermark {
    --ww-opacity: 0.12;          /* base subtlety (overridden per page via data-opacity) */
    --ww-reveal-opacity: 0.85;   /* opacity when the tree is hovered / clicked */

    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;        /* click-through everywhere except the tree itself */
    overflow: hidden;
    contain: layout style paint;
    /* No background here: the static watermark stays the .logo-watermark PNG.
       When the engine activates it adds .ww-active (below) and inlines the tree. */
}

/* The engine controls opacity only once active, so that with JS off the element
   keeps its static .logo-watermark / .logo-watermark-login opacity (the fallback). */
.weather-watermark.ww-active {
    background: none !important;  /* drop the static PNG fallback background */
    opacity: var(--ww-opacity);
    transition: opacity .35s ease;
}

/* Paused while the browser tab is hidden (toggled by weather-watermark.js). */
.weather-watermark.ww-paused * {
    animation-play-state: paused !important;
}

.weather-watermark.is-revealed {
    opacity: var(--ww-reveal-opacity);
}

/* ---- Layers ---------------------------------------------------------------- */
.ww-sky,
.ww-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ww-tree-wrap {
    position: absolute;
    right: 0;
    bottom: -15px;
    height: min(90vh, 1018px);
    width: min(90vh, 1018px);   /* square — tree viewBox is 1:1 */
    pointer-events: none;
}

.ww-tree-wrap .ww-tree {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;        /* hover / click target for the reveal */
    cursor: pointer;
    overflow: visible;
}

/* =========================================================================
   Particles (shared base)
   ========================================================================= */
.ww-leaf,
.ww-flake,
.ww-drop {
    position: absolute;
    top: 0;
    left: var(--x, 50%);
    will-change: transform;      /* the outer node always animates (fall/drift) */
}

.ww-p-inner { display: block; }

/* Only leaf and flake inners animate (tumble / sway); drop inners are static,
   so promote a compositor layer just for the two that move. */
.ww-leaf .ww-p-inner,
.ww-flake .ww-p-inner { will-change: transform; }

/* ---- Fall leaves ----------------------------------------------------------- */
.ww-leaf {
    width: var(--size, 16px);
    height: var(--size, 16px);
    animation: ww-leaf-drift var(--dur, 9s) linear var(--delay, 0s) infinite;
}

.ww-leaf .ww-p-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(120% 120% at 30% 20%,
                rgba(255, 255, 255, .25), rgba(0, 0, 0, .08)), var(--leaf-color, #d98a3d);
    background-blend-mode: overlay;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);  /* hexagon */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
    animation: ww-tumble var(--spin-dur, 2.4s) ease-in-out var(--delay, 0s) infinite;
    opacity: .95;
}
/* subtle facet highlight */
.ww-leaf .ww-p-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 44%,
                rgba(255, 255, 255, .35) 49%, transparent 54%);
    clip-path: inherit;
}

/* Swirling, gusty descent — wind carries the leaf across in a wavy arc. */
@keyframes ww-leaf-drift {
    0%   { transform: translate(0, -14vh); }
    30%  { transform: translate(calc(var(--wind, 16vw) * .25), 22vh); }
    55%  { transform: translate(calc(var(--wind, 16vw) * .72), 52vh); }
    78%  { transform: translate(calc(var(--wind, 16vw) * .82), 82vh); }
    100% { transform: translate(var(--wind, 16vw), 116vh); }
}

@keyframes ww-tumble {
    0%   { transform: rotate(0deg)   translateX(calc(var(--sway, 14px) * -1)); }
    50%  { transform: rotate(180deg) translateX(var(--sway, 14px)); }
    100% { transform: rotate(360deg) translateX(calc(var(--sway, 14px) * -1)); }
}

/* ---- Winter snow ----------------------------------------------------------- */
.ww-flake {
    width: var(--size, 8px);
    height: var(--size, 8px);
    animation: ww-snow-drift var(--dur, 11s) linear var(--delay, 0s) infinite;
}

.ww-flake .ww-p-inner {
    width: 100%;
    height: 100%;
    /* a real six-arm snow crystal in icy blue — reads against both the dark sky
       and the white snow bank; the dark drop-shadow adds definition on white */
    background: url('/images/snowflake.svg') center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(18, 48, 86, .7));
    opacity: var(--flake-op, .9);
    animation: ww-sway var(--spin-dur, 3.5s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes ww-snow-drift {
    from { transform: translate(0, -8vh); }
    to   { transform: translate(var(--wind, 5vw), 112vh); }
}

@keyframes ww-sway {
    0%, 100% { transform: translateX(calc(var(--sway, 12px) * -1)); }
    50%      { transform: translateX(var(--sway, 12px)); }
}

/* Snow softly settling over the canopy — a fully-fading blob (no hard edges)
   centred on the tree crown. */
.ww-snowcap {
    position: absolute;
    left: 18%;
    right: 12%;
    top: 8%;
    height: 32%;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 88% at 50% 42%,
                rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 64%);
    filter: blur(7px);
    opacity: 0;
    animation: ww-fade-in 2.5s ease forwards;
}

/* Individual snow crystals settling and piling up on the ground over time. */
.ww-snowpile {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24%;
    pointer-events: none;
}
.ww-settled {
    position: absolute;
    left: var(--px, 50%);
    bottom: var(--py, 0);
    width: var(--size, 18px);
    height: var(--size, 18px);
    background: url('/images/snowflake.svg') center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(18, 48, 86, .5));
    opacity: 0;
    animation: ww-settle .8s ease-out forwards;
}

@keyframes ww-settle {
    0%   { opacity: 0;   transform: translateY(-42px); }
    60%  { opacity: 1; }
    100% { opacity: .95; transform: translateY(0); }
}

/* Full-width snow bank piling up along the ground. */
.ww-snowbank {
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    height: 10%;
    pointer-events: none;
    background: radial-gradient(150% 200% at 50% 100%,
                #ffffff 0%, #f4f9ff 58%, rgba(244, 249, 255, 0) 80%);
    transform: translateY(40%);
    opacity: 0;
    animation: ww-bank-grow 9s ease-out forwards;
}

@keyframes ww-bank-grow {
    0%   { transform: translateY(60%); opacity: 0; }
    100% { transform: translateY(0);   opacity: .92; }
}

/* Snow drift mound gathering around the base of the trunk. */
.ww-drift {
    position: absolute;
    left: 50%;
    bottom: 1%;
    width: 70%;
    height: 16%;
    transform: translateX(-50%) scaleY(.18);
    transform-origin: bottom center;
    background: radial-gradient(120% 150% at 50% 100%,
                #ffffff 0%, #eef5ff 52%, rgba(238, 245, 255, 0) 72%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    filter: blur(1px);
    opacity: .9;
    animation: ww-drift-grow 9s ease-out forwards;
}

@keyframes ww-drift-grow {
    from { transform: translateX(-50%) scaleY(.18); }
    to   { transform: translateX(-50%) scaleY(1); }
}

@keyframes ww-fade-in { to { opacity: 1; } }

/* ---- Rain ------------------------------------------------------------------ */
.ww-drop {
    width: 2px;
    height: var(--size, 64px);
    animation: ww-drop-fall var(--dur, 1.1s) linear var(--delay, 0s) infinite;
}

.ww-drop .ww-p-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
                rgba(174, 214, 241, 0), rgba(174, 214, 241, .85));
    border-radius: 2px;
    transform: rotate(12deg);
}

@keyframes ww-drop-fall {
    0%   { transform: translateY(-16vh); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translateY(112vh); opacity: 1; }
}

/* Splash ripples around the base. */
.ww-splash {
    position: absolute;
    bottom: var(--sb, 4%);
    left: var(--sx, 50%);
    width: var(--ssize, 18px);
    height: calc(var(--ssize, 18px) * .4);
    border: 1.5px solid rgba(174, 214, 241, .7);
    border-radius: 50%;
    transform: scale(0);
    animation: ww-splash var(--dur, 1.4s) ease-out var(--delay, 0s) infinite;
}

@keyframes ww-splash {
    0%   { transform: scale(.2); opacity: .8; }
    100% { transform: scale(1);  opacity: 0; }
}

/* Lightning: full-stage flash + a jagged bolt, toggled by JS. */
.ww-lightning {
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 60% 20%,
                rgba(214, 234, 255, .9), rgba(214, 234, 255, 0) 70%);
    opacity: 0;
    pointer-events: none;
}
.ww-lightning.flash { animation: ww-flash 1.1s ease-out; }

@keyframes ww-flash {
    0% { opacity: 0; } 3% { opacity: .95; } 6% { opacity: .15; }
    10% { opacity: .8; } 16% { opacity: 0; } 100% { opacity: 0; }
}

.ww-bolt {
    position: absolute;
    top: 0;
    left: var(--bx, 55%);
    width: 120px;
    height: 46vh;
    opacity: 0;
    pointer-events: none;
}
.ww-bolt path { stroke: #eaf4ff; stroke-width: 3; fill: none;
    filter: drop-shadow(0 0 6px rgba(214, 234, 255, .9)); }
.ww-bolt.flash { animation: ww-bolt 1.1s ease-out; }

@keyframes ww-bolt {
    0% { opacity: 0; } 2% { opacity: 1; } 11% { opacity: 1; }
    18% { opacity: 0; } 100% { opacity: 0; }
}

/* ---- Sunny + light clouds -------------------------------------------------- */
.ww-sun {
    position: absolute;
    top: 6%;
    right: 14%;
    width: 30vmin;
    height: 30vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 236, 173, .9) 0%,
                rgba(255, 214, 120, .5) 35%,
                rgba(255, 214, 120, 0) 70%);
    animation: ww-sun-pulse 7s ease-in-out infinite;
}

@keyframes ww-sun-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.06); }
}

.ww-cloud {
    position: absolute;
    top: var(--cy, 12%);
    left: 0;
    width: var(--csize, 180px);
    height: calc(var(--csize, 180px) * .42);
    opacity: var(--cop, .8);
    animation: ww-cloud-move var(--dur, 60s) linear var(--delay, 0s) infinite;
}
.ww-cloud::before,
.ww-cloud::after {
    content: "";
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(120, 150, 180, .18);
}
.ww-cloud::before { width: 60%; height: 100%; left: 6%;  bottom: 0; }
.ww-cloud::after  { width: 52%; height: 78%;  right: 6%; bottom: 0; }
.ww-cloud i {
    position: absolute; left: 30%; bottom: 18%;
    width: 48%; height: 96%; background: #fff; border-radius: 50%;
}

@keyframes ww-cloud-move {
    from { transform: translateX(-30vw); }
    to   { transform: translateX(122vw); }
}

/* =========================================================================
   Theme tweaks — engine works on cool-blue (light) and midnight-dark.
   ========================================================================= */
[data-theme="midnight-dark"] .ww-cloud::before,
[data-theme="midnight-dark"] .ww-cloud::after,
[data-theme="midnight-dark"] .ww-cloud i {
    background: #cdd9e6;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}
[data-theme="midnight-dark"] .ww-lightning {
    background: radial-gradient(80% 60% at 60% 20%,
                rgba(226, 240, 255, 1), rgba(226, 240, 255, 0) 70%);
}

/* =========================================================================
   Accessibility — honor reduced motion: keep the tree, drop the weather.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .weather-watermark .ww-sky,
    .weather-watermark .ww-particles,
    .weather-watermark .ww-drift,
    .weather-watermark .ww-snowbank,
    .weather-watermark .ww-snowpile,
    .weather-watermark .ww-snowcap {
        display: none !important;
    }
    /* the hover/click reveal (a single opacity transition) is retained */
}