/* Home-Nest v37 — refined dynamic weather FX.
   No visible moving rectangle overlays or hard gradient seams.
   Effects stay within the hero area and under the three stats cards. */
.home-weather-top{display:flow-root;position:relative;isolation:isolate}
.home-weather-top>.personal-hero,.home-weather-top>.stats-grid{position:relative;z-index:2}
.hn-weather-fx{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint style;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
}
.hn-weather-fx,.hn-weather-fx>div{border-radius:inherit}
.hn-weather-fx>div{position:absolute;inset:0;pointer-events:none}
.hn-fx-light,.hn-fx-haze{overflow:hidden}
.hn-fx-light,.hn-fx-haze,.hn-fx-flash{opacity:0}
.hn-fx-light::before,.hn-fx-light::after,.hn-fx-haze::before,.hn-fx-haze::after{
  content:'';position:absolute;display:block;pointer-events:none;border-radius:50%;will-change:transform,opacity,filter;
}
/* Sunny / partly cloudy day: visible but soft, without hard edges. */
.hn-weather-fx--clear-day .hn-fx-light,.hn-weather-fx--partly-cloudy-day .hn-fx-light{
  opacity:1;mix-blend-mode:screen;filter:saturate(1.04);
}
.hn-weather-fx--clear-day .hn-fx-light::before,.hn-weather-fx--partly-cloudy-day .hn-fx-light::before{
  width:54%;height:54%;left:-10%;top:-18%;
  background:radial-gradient(circle at 46% 47%,rgba(255,251,236,.95) 0 8%,rgba(255,234,163,.40) 17%,rgba(255,220,140,.18) 31%,rgba(255,220,140,0) 60%);
  filter:blur(2px);opacity:.95;animation:hn-fx-sun-drift 15s ease-in-out infinite alternate;
}
.hn-weather-fx--clear-day .hn-fx-light::after,.hn-weather-fx--partly-cloudy-day .hn-fx-light::after{
  width:92%;height:92%;left:-26%;top:-38%;
  background:
    radial-gradient(ellipse at 31% 27%,rgba(255,243,184,.34) 0%,rgba(255,233,164,.16) 21%,rgba(255,227,156,0) 48%),
    radial-gradient(ellipse at 25% 38%,rgba(255,240,196,.22) 0%,rgba(255,240,196,0) 54%),
    radial-gradient(ellipse at 48% 28%,rgba(255,242,211,.12) 0%,rgba(255,242,211,0) 45%);
  filter:blur(28px);opacity:.88;animation:hn-fx-sun-bloom 20s ease-in-out infinite alternate;
}
.hn-weather-fx--clear-day .hn-fx-haze,.hn-weather-fx--partly-cloudy-day .hn-fx-haze{
  opacity:1;mix-blend-mode:screen;
}
.hn-weather-fx--clear-day .hn-fx-haze::before,.hn-weather-fx--partly-cloudy-day .hn-fx-haze::before{
  width:62%;height:34%;left:-6%;top:12%;
  background:radial-gradient(ellipse at 42% 50%,rgba(255,242,203,.18) 0%,rgba(255,242,203,.10) 40%,rgba(255,242,203,0) 75%);
  filter:blur(34px);opacity:.72;animation:hn-fx-haze-a 18s ease-in-out infinite alternate;
}
.hn-weather-fx--clear-day .hn-fx-haze::after,.hn-weather-fx--partly-cloudy-day .hn-fx-haze::after{
  width:48%;height:26%;right:-8%;top:30%;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.05) 44%,rgba(255,255,255,0) 78%);
  filter:blur(30px);opacity:.55;animation:hn-fx-haze-b 24s ease-in-out infinite alternate;
}
.hn-weather-fx--partly-cloudy-day .hn-fx-light::before{opacity:.84}
.hn-weather-fx--partly-cloudy-day .hn-fx-haze::before{opacity:.62}
/* Night effects: subtle depth and stars. */
.hn-weather-fx--clear-night .hn-fx-haze,.hn-weather-fx--partly-cloudy-night .hn-fx-haze{opacity:1;mix-blend-mode:screen}
.hn-weather-fx--clear-night .hn-fx-haze::before,.hn-weather-fx--partly-cloudy-night .hn-fx-haze::before{
  width:56%;height:42%;left:-7%;top:-8%;
  background:radial-gradient(circle at 48% 48%,rgba(176,212,255,.22) 0%,rgba(176,212,255,.11) 34%,rgba(176,212,255,0) 70%);
  filter:blur(18px);opacity:.74;animation:hn-fx-night-a 16s ease-in-out infinite alternate;
}
.hn-weather-fx--clear-night .hn-fx-haze::after,.hn-weather-fx--partly-cloudy-night .hn-fx-haze::after{
  width:50%;height:28%;right:-10%;top:18%;
  background:radial-gradient(ellipse at 48% 50%,rgba(228,239,255,.10) 0%,rgba(228,239,255,.04) 44%,rgba(228,239,255,0) 76%);
  filter:blur(26px);opacity:.56;animation:hn-fx-night-b 22s ease-in-out infinite alternate;
}
/* Clouds / mist: oversized blurred volumes drifting, so no sharp panel edges. */
.hn-weather-fx--cloudy .hn-fx-haze,.hn-weather-fx--fog .hn-fx-haze,
.hn-weather-fx--snow .hn-fx-haze{opacity:1}
.hn-weather-fx--cloudy .hn-fx-haze::before,.hn-weather-fx--fog .hn-fx-haze::before,.hn-weather-fx--snow .hn-fx-haze::before{
  width:72%;height:40%;left:-14%;top:8%;
  background:radial-gradient(ellipse at 52% 50%,rgba(239,247,247,.22) 0%,rgba(227,239,239,.14) 36%,rgba(227,239,239,0) 72%);
  filter:blur(30px);opacity:.78;animation:hn-fx-cloud-a 26s ease-in-out infinite alternate;
}
.hn-weather-fx--cloudy .hn-fx-haze::after,.hn-weather-fx--fog .hn-fx-haze::after,.hn-weather-fx--snow .hn-fx-haze::after{
  width:68%;height:34%;right:-16%;top:24%;
  background:radial-gradient(ellipse at 48% 52%,rgba(255,255,255,.13) 0%,rgba(235,244,244,.10) 34%,rgba(235,244,244,0) 74%);
  filter:blur(36px);opacity:.70;animation:hn-fx-cloud-b 31s ease-in-out infinite alternate;
}
.hn-weather-fx--fog .hn-fx-haze::before{filter:blur(52px);opacity:.86}
.hn-weather-fx--fog .hn-fx-haze::after{filter:blur(58px);opacity:.8}
/* Drizzle/rain/showers/thunderstorm now use the dedicated canvas-only effect. */
.hn-fx-flake{position:absolute;display:block;left:var(--x);top:-12%;width:var(--size);height:var(--size);border-radius:50%;background:#fbffff;
 box-shadow:0 0 5px rgba(240,251,255,.86);opacity:0;will-change:transform,opacity;
 animation:hn-fx-snow-fall var(--duration) linear infinite;animation-delay:var(--delay)}
.hn-fx-star{position:absolute;left:var(--x);top:var(--y);height:2.5px;width:2.5px;border-radius:50%;background:#eff7ff;
 opacity:.5;box-shadow:0 0 8px rgba(236,247,255,.65);animation:hn-fx-stars 3.5s ease-in-out infinite alternate;animation-delay:var(--delay)}
.hn-weather-fx--thunderstorm .hn-fx-flash{opacity:0;background:linear-gradient(125deg,rgba(220,239,255,.30),transparent 72%);animation:hn-fx-flash 18s ease-in-out infinite}
@keyframes hn-fx-snow-fall{0%{transform:translate3d(0,-12vh,0) rotate(0);opacity:0}12%,80%{opacity:.86}100%{transform:translate3d(var(--drift),80vh,0) rotate(260deg);opacity:0}}
@keyframes hn-fx-stars{from{opacity:.25;transform:scale(.75)}to{opacity:.8;transform:scale(1.5)}}
@keyframes hn-fx-flash{0%,36%,38%,100%{opacity:0}36.5%{opacity:.28}37%{opacity:.08}}
@keyframes hn-fx-sun-drift{from{transform:translate3d(-2%,0,0) scale(.96)}to{transform:translate3d(4%,3%,0) scale(1.04)}}
@keyframes hn-fx-sun-bloom{from{transform:translate3d(-2%,-1%,0) scale(.95);opacity:.74}to{transform:translate3d(3%,2%,0) scale(1.05);opacity:.98}}
@keyframes hn-fx-haze-a{from{transform:translate3d(-2%,0,0) scale(.98);opacity:.50}to{transform:translate3d(4%,1.5%,0) scale(1.04);opacity:.76}}
@keyframes hn-fx-haze-b{from{transform:translate3d(0,0,0) scale(.96);opacity:.36}to{transform:translate3d(-4%,2%,0) scale(1.04);opacity:.62}}
@keyframes hn-fx-night-a{from{transform:translate3d(-2%,0,0) scale(.96);opacity:.52}to{transform:translate3d(4%,2%,0) scale(1.03);opacity:.80}}
@keyframes hn-fx-night-b{from{transform:translate3d(0,0,0) scale(.94);opacity:.32}to{transform:translate3d(-3%,2%,0) scale(1.04);opacity:.60}}
@keyframes hn-fx-cloud-a{from{transform:translate3d(-4%,0,0) scale(.98);opacity:.58}to{transform:translate3d(4%,2%,0) scale(1.06);opacity:.84}}
@keyframes hn-fx-cloud-b{from{transform:translate3d(2%,0,0) scale(.96);opacity:.48}to{transform:translate3d(-4%,2%,0) scale(1.06);opacity:.76}}
/* Datum links, avatar rechts op het Home-scherm; andere pagina's ongewijzigd. */
.main-column.is-home .topbar{justify-content:space-between}
.main-column.is-home .topbar-right{width:100%;justify-content:space-between;display:flex;align-items:center;min-width:0}
.main-column.is-home .today-pill{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:800;font-size:clamp(13px,1.2vw,17px);letter-spacing:-.025em}
.main-column.is-home .today-pill svg{width:21px;height:21px;flex-shrink:0}
/* Weather is the visual focal point, without squeezing the four forecast cards. */
.home-stage .weather-now{gap:15px;min-height:110px}
.home-stage .weather-now-art{width:110px;height:110px}
.home-stage .weather-now-temp{font-size:clamp(65px,6.5vw,88px)}
.home-stage .weather-now-meta{padding-left:20px;gap:8px}
.home-stage .weather-city{font-size:20px}
.home-stage .weather-city svg{width:22px;height:22px}
.home-stage .weather-description{font-size:15px}
.home-stage .personal-hero h1{margin-top:24px}
@media(max-width:700px){
 .main-column.is-home .topbar{padding:0 19px;height:79px}
 .main-column.is-home .today-pill{font-size:clamp(13px,3.5vw,16px);gap:8px}
 .main-column.is-home .today-pill svg{width:21px;height:21px}
 .home-stage .personal-hero{padding-top:111px;padding-bottom:29px}
 .home-stage .weather-now{gap:10px;min-height:99px}
 .home-stage .weather-now-art{width:clamp(85px,25vw,107px);height:clamp(85px,25vw,107px)}
 .home-stage .weather-now-temp{font-size:clamp(58px,18vw,75px)}
 .home-stage .weather-now-meta{padding-left:12px;gap:6px}
 .home-stage .weather-city{font-size:clamp(13px,3.9vw,17px);gap:6px}
 .home-stage .weather-city svg{width:18px;height:18px}
 .home-stage .weather-description{font-size:clamp(11px,3.3vw,14px)}
 .home-stage .weather-days{margin-top:7px}
 .home-stage .personal-hero h1{margin-top:23px}
}
@media(max-width:365px){
 .home-stage .personal-hero{padding-left:13px;padding-right:13px}
 .home-stage .weather-now{gap:6px}
 .home-stage .weather-now-art{width:83px;height:83px}
 .home-stage .weather-now-temp{font-size:58px}
 .home-stage .weather-now-meta{padding-left:9px}
 .home-stage .weather-city{font-size:12px}
 .home-stage .weather-city svg{width:15px;height:15px}
 .main-column.is-home .today-pill{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
 .hn-weather-fx .hn-fx-flake,.hn-weather-fx .hn-fx-star,.hn-weather-fx .hn-fx-light,.hn-weather-fx .hn-fx-haze,.hn-weather-fx .hn-fx-flash,
 .hn-fx-light::before,.hn-fx-light::after,.hn-fx-haze::before,.hn-fx-haze::after{animation:none!important;will-change:auto!important}
 .hn-weather-fx .hn-fx-flake,.hn-weather-fx .hn-fx-flash{display:none}
}