/* Lebensmittelrettung Saar/Pfalz – Seasonal Atmosphere PRO
   Web-first seasonal animation: no stickers, no floating cards, no large decorative objects.
   The seasonal treatment lives behind the hero content and preserves the professional layout. */

:root{
  --season-accent: rgba(219,139,66,.22);
  --season-glow: rgba(255,206,126,.16);
  --season-haze: rgba(31,79,48,.08);
  --season-vignette: rgba(5,27,17,.08);
}

/* Hero integration – both public sites */
.saar-hero,.hero{position:relative;isolation:isolate;overflow:hidden}
.saar-hero-bg,.hero-bg-img,.hero-photo{z-index:0}
.saar-hero-overlay,.hero-overlay{z-index:1}
.saar-hero-grid,.hero-layout{position:relative;z-index:4}

.season-atmosphere{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  opacity:1;contain:layout paint style;
}
.season-atmosphere::before{
  content:"";position:absolute;inset:-8%;
  background:
    radial-gradient(circle at 76% 20%,var(--season-glow),transparent 31%),
    radial-gradient(circle at 18% 82%,var(--season-haze),transparent 34%),
    linear-gradient(120deg,transparent 15%,rgba(255,255,255,.025) 48%,transparent 75%);
  mix-blend-mode:screen;opacity:.85;
  animation:seasonAmbientDrift 18s ease-in-out infinite alternate;
}
.season-atmosphere::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,var(--season-vignette) 100%);
  opacity:.48;
}
.season-particles,.season-special-effects{position:absolute;inset:0;overflow:hidden}

/* subtle depth – each particle is intentionally small */
.season-particle{position:absolute;display:block;will-change:transform,opacity;opacity:0}
.season-particle.depth-far{filter:blur(.7px);opacity:.42}
.season-particle.depth-near{filter:drop-shadow(0 5px 6px rgba(0,0,0,.12))}

/* AUTUMN */
.season-autumn{--season-glow:rgba(239,167,83,.18);--season-haze:rgba(92,113,53,.10);--season-vignette:rgba(68,35,12,.10)}
.season-leaf{
  width:var(--s);height:calc(var(--s)*.55);left:var(--x);top:-10%;border-radius:100% 0 100% 0;
  background:var(--c);transform-origin:45% 55%;
  animation:seasonLeafWeb var(--d) cubic-bezier(.34,.02,.26,.98) var(--delay) infinite;
}
.season-leaf::after{content:"";position:absolute;left:49%;top:5%;width:1px;height:90%;background:rgba(91,54,24,.22);transform:rotate(27deg);transform-origin:top}

/* WINTER */
.season-winter,.season-christmas,.season-nikolaus,.season-advent{--season-glow:rgba(255,239,198,.13);--season-haze:rgba(169,218,230,.10);--season-vignette:rgba(10,42,47,.10)}
.season-snow{
  width:var(--s);height:var(--s);left:var(--x);top:-8%;border-radius:50%;
  background:rgba(255,255,255,.88);box-shadow:0 0 8px rgba(255,255,255,.28);
  animation:seasonSnowWeb var(--d) linear var(--delay) infinite;
}

/* SPRING / EASTER */
.season-spring,.season-easter{--season-glow:rgba(255,224,214,.15);--season-haze:rgba(132,181,106,.09);--season-vignette:rgba(34,80,43,.06)}
.season-petal{
  width:var(--s);height:calc(var(--s)*.62);left:var(--x);top:-8%;border-radius:70% 35% 70% 35%;
  background:var(--c);opacity:.65;animation:seasonPetalWeb var(--d) ease-in-out var(--delay) infinite;
}

/* SUMMER */
.season-summer{--season-glow:rgba(255,214,100,.15);--season-haze:rgba(87,153,86,.08);--season-vignette:rgba(23,61,29,.06)}
.season-firefly{
  width:var(--s);height:var(--s);left:var(--x);top:var(--y);border-radius:50%;
  background:#ffe08a;box-shadow:0 0 7px #ffe08a,0 0 17px rgba(255,211,103,.35);
  animation:seasonFireflyWeb var(--d) ease-in-out var(--delay) infinite alternate;
}

/* HALLOWEEN – restrained atmosphere, no giant pumpkin */
.season-halloween{--season-glow:rgba(240,119,36,.16);--season-haze:rgba(54,69,42,.14);--season-vignette:rgba(24,13,9,.20)}
.season-halloween .season-atmosphere::before{
  background:
    radial-gradient(circle at 82% 34%,rgba(239,120,36,.13),transparent 22%),
    radial-gradient(ellipse at 48% 92%,rgba(196,205,191,.10),transparent 38%),
    linear-gradient(180deg,rgba(24,27,19,.02),rgba(28,15,10,.11));
  mix-blend-mode:normal;
}
.season-mist{position:absolute;left:-15%;width:130%;height:22%;bottom:0;background:radial-gradient(ellipse at center,rgba(222,231,220,.12),transparent 68%);filter:blur(15px);animation:seasonMistWeb 20s ease-in-out infinite alternate}
.season-bat{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s)*.42);opacity:.16;animation:seasonBatWeb var(--d) ease-in-out var(--delay) infinite}
.season-bat::before,.season-bat::after{content:"";position:absolute;top:0;width:55%;height:100%;background:rgba(15,20,13,.72);border-radius:100% 10% 80% 20%}
.season-bat::before{left:0;transform:rotate(10deg)}.season-bat::after{right:0;transform:scaleX(-1) rotate(10deg)}

/* ST. MARTIN – warm floating lantern light, abstract and elegant */
.season-martin{--season-glow:rgba(255,183,80,.18);--season-haze:rgba(106,76,42,.08);--season-vignette:rgba(62,39,17,.08)}
.season-lantern-glow{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,rgba(255,228,146,.72) 0,rgba(245,151,51,.26) 28%,rgba(237,124,32,.05) 58%,transparent 72%);filter:blur(.2px);animation:seasonLanternGlowWeb var(--d) ease-in-out var(--delay) infinite alternate}

/* ADVENT / NIKOLAUS / CHRISTMAS – warm bokeh + small star points */
.season-advent{--season-glow:rgba(255,213,141,.18);--season-haze:rgba(38,100,57,.08)}
.season-nikolaus{--season-glow:rgba(255,211,134,.18);--season-haze:rgba(135,45,49,.07)}
.season-christmas{--season-glow:rgba(255,221,153,.19);--season-haze:rgba(28,96,53,.10)}
.season-bokeh{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,223,151,.65);box-shadow:0 0 15px rgba(255,222,144,.36);animation:seasonBokehWeb var(--d) ease-in-out var(--delay) infinite alternate}
.season-starpoint{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:.35;animation:seasonStarWeb var(--d) ease-in-out var(--delay) infinite}
.season-starpoint::before,.season-starpoint::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,244,201,.88);border-radius:999px;transform:translate(-50%,-50%)}
.season-starpoint::before{width:100%;height:1px}.season-starpoint::after{width:1px;height:100%}

/* FASTNACHT – only fine confetti, no mask */
.season-fastnacht{--season-glow:rgba(237,190,105,.11);--season-haze:rgba(131,83,156,.07);--season-vignette:rgba(54,34,65,.05)}
.season-confetti{position:absolute;left:var(--x);top:-8%;width:var(--w);height:var(--h);border-radius:1px;background:var(--c);opacity:.5;animation:seasonConfettiWeb var(--d) cubic-bezier(.3,.2,.28,.95) var(--delay) infinite}

/* SILVESTER / NEW YEAR – firework only in the visual background */
.season-silvester,.season-newyear{--season-glow:rgba(237,207,125,.14);--season-haze:rgba(76,96,137,.09);--season-vignette:rgba(16,24,47,.15)}
.season-firework{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:0;animation:seasonFireworkWeb var(--d) ease-out var(--delay) infinite}
.season-firework i{position:absolute;left:50%;top:50%;width:1.5px;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,228,153,.95),rgba(255,228,153,0));transform-origin:50% 0}
.season-firework i:nth-child(1){transform:rotate(0deg)}.season-firework i:nth-child(2){transform:rotate(45deg)}.season-firework i:nth-child(3){transform:rotate(90deg)}.season-firework i:nth-child(4){transform:rotate(135deg)}.season-firework i:nth-child(5){transform:rotate(180deg)}.season-firework i:nth-child(6){transform:rotate(225deg)}.season-firework i:nth-child(7){transform:rotate(270deg)}.season-firework i:nth-child(8){transform:rotate(315deg)}

/* The seasonal layer must never reduce legibility */
.saar-hero-copy,.saar-hero-card,.hero-copy-wide,.hero-sidecard{position:relative;z-index:5}

@keyframes seasonAmbientDrift{from{transform:translate3d(-1.2%,0,0) scale(1.01)}to{transform:translate3d(1.4%,1%,0) scale(1.035)}}
@keyframes seasonLeafWeb{0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}8%{opacity:.72}50%{transform:translate3d(var(--drift),48vh,0) rotate(190deg)}100%{transform:translate3d(var(--drift2),112vh,0) rotate(410deg);opacity:.12}}
@keyframes seasonSnowWeb{0%{transform:translate3d(0,-8vh,0);opacity:0}8%{opacity:.75}100%{transform:translate3d(var(--drift),112vh,0);opacity:.18}}
@keyframes seasonPetalWeb{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}12%{opacity:.6}55%{transform:translate3d(var(--drift),52vh,0) rotate(180deg)}100%{transform:translate3d(var(--drift2),112vh,0) rotate(390deg);opacity:.08}}
@keyframes seasonFireflyWeb{0%{transform:translate3d(-5px,7px,0) scale(.7);opacity:.12}55%{opacity:.75}100%{transform:translate3d(12px,-10px,0) scale(1.05);opacity:.28}}
@keyframes seasonMistWeb{from{transform:translateX(-3%) scaleX(1.02);opacity:.45}to{transform:translateX(4%) scaleX(1.08);opacity:.8}}
@keyframes seasonBatWeb{0%,100%{transform:translate3d(-6px,3px,0) scale(.85);opacity:.08}50%{transform:translate3d(18px,-9px,0) scale(1);opacity:.2}}
@keyframes seasonLanternGlowWeb{from{transform:translate3d(-4px,3px,0) scale(.88);opacity:.22}to{transform:translate3d(6px,-7px,0) scale(1.08);opacity:.62}}
@keyframes seasonBokehWeb{from{transform:scale(.7);opacity:.16}to{transform:scale(1.15);opacity:.62}}
@keyframes seasonStarWeb{0%,100%{transform:scale(.45);opacity:.08}50%{transform:scale(1.05);opacity:.58}}
@keyframes seasonConfettiWeb{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}10%{opacity:.5}100%{transform:translate3d(var(--drift),112vh,0) rotate(580deg);opacity:.08}}
@keyframes seasonFireworkWeb{0%,18%{transform:scale(.2);opacity:0}32%{opacity:.6}58%{transform:scale(1);opacity:.55}100%{transform:scale(1.12);opacity:0}}

/* Desktop: keep the particles mostly on the photo/right side so copy remains calm. */
@media (min-width:900px){
  .saar-hero .season-particle:nth-child(3n),.hero .season-particle:nth-child(3n){opacity:.45}
}

/* Mobile: fewer objects and less intensity. JS also reduces counts. */
@media (max-width:720px){
  .season-atmosphere::before{opacity:.62}
  .season-particle.depth-far{display:none}
  .season-firework:nth-child(n+2),.season-bat:nth-child(n+3),.season-lantern-glow:nth-child(n+4){display:none}
}

@media (prefers-reduced-motion:reduce){
  .season-atmosphere::before,.season-particle,.season-mist,.season-bat,.season-lantern-glow,.season-bokeh,.season-starpoint,.season-confetti,.season-firework{animation:none!important}
  .season-particle,.season-bokeh,.season-starpoint,.season-lantern-glow{opacity:.18!important}
  .season-mist{opacity:.25!important}
}