.seasonal-accent {
  position: absolute;
  top: -30px;
  right: -16px;
  width: 240px;
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 5px 8px #473b2720);
}
.seasonal-preview-note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 18px;
  padding: 9px 20px;
  color: #445d42;
  background: #eee8d9;
  font: 13px/1.5 'Segoe UI', Arial, sans-serif;
  text-align: center;
}
.seasonal-preview-note a { color: inherit; text-underline-offset: 3px; }
.seasonal-accent[hidden] { display: none; }
.seasonal-accent::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, #f6edddc7, #f6eddd70 45%, transparent 72%);
}
.seasonal-accent img {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 850px) {
  .seasonal-accent { width: 194px; right: -12px; }
}
@media (max-width: 600px) {
  .seasonal-accent { width: 152px; top: -16px; right: -9px; }
}
.seasonal-trail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  margin: 10px auto;
  pointer-events: none;
  user-select: none;
  max-width: calc(100% - 40px);
}
.seasonal-trail[hidden], .seasonal-figure[hidden], .seasonal-snow[hidden], .seasonal-snow-toggle[hidden] { display: none; }
.seasonal-figure { display: block; width: 58px; height: 58px; transform: rotate(-6deg); opacity: .86; }
.seasonal-figure--second { width: 68px; height: 68px; transform: rotate(5deg); opacity: .8; }
.seasonal-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.seasonal-snow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; contain: paint; }
.seasonal-snow span {
  position: absolute;
  top: -20px;
  left: var(--left);
  color: #fffef8;
  opacity: .45;
  text-shadow: 0 0 1px #76654480;
  font-size: var(--size);
  line-height: 1;
  animation: seasonal-snowfall var(--duration) var(--delay) linear infinite;
}
@keyframes seasonal-snowfall {
  from { transform: translate3d(0, -25px, 0) rotate(0deg); }
  to { transform: translate3d(var(--drift), 105vh, 0) rotate(150deg); }
}
.seasonal-snow-toggle {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 11px;
  border: 1px solid #cec5b2;
  border-radius: 20px;
  background: #faf6edee;
  color: #445d42;
  font: 11px 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 2px 10px #283b3210;
}
.modal-open .seasonal-snow, .modal-open .seasonal-snow-toggle { display: none; }
@media (max-width: 600px) {
  .seasonal-trail { height: 50px; margin: 6px auto; }
  .seasonal-figure { width: 46px; height: 46px; }
  .seasonal-figure--second { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .seasonal-snow, .seasonal-snow-toggle { display: none !important; }
  .seasonal-snow span { animation: none !important; }
}

/* Quiet decoration stays outside the page's hit targets. */
.seasonal-leaves, .seasonal-fireworks {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  user-select: none; z-index: 4; contain: paint;
}
.seasonal-leaves[hidden], .seasonal-lights[hidden], .seasonal-butterfly[hidden], .seasonal-fireworks[hidden] { display: none; }
.seasonal-leaves > span {
  position: absolute; top: -42px; left: var(--left); width: 15px; height: 22px;
  opacity: .36; color: var(--leaf-color);
  animation: seasonal-leaf-fall var(--duration) var(--delay) linear infinite;
}
.seasonal-leaves svg { display: block; width: 100%; height: 100%; stroke-width: 1.2; }
.seasonal-leaves svg path:first-child { fill: currentColor; stroke: none; }
.seasonal-leaves svg path:last-child { fill: none; stroke: #f3ead7; }
@keyframes seasonal-leaf-fall {
  from { transform: translate3d(0, -30px, 0) rotate(-35deg); }
  50% { transform: translate3d(var(--drift), 53vh, 0) rotate(90deg); }
  to { transform: translate3d(0, 110vh, 0) rotate(190deg); }
}
.seasonal-lights {
  position: relative; height: 22px; width: min(1250px, calc(100% - 40px));
  margin: 0 auto; pointer-events: none; user-select: none;
}
.seasonal-lights .seasonal-light-wire { position: absolute; inset: 0; width: 100%; height: 20px; stroke: #a49d7a; stroke-width: .7; opacity: .55; }
.seasonal-lights > span {
  position: absolute; top: var(--bulb-top); left: var(--bulb-left);
  width: 5px; height: 9px; border-radius: 2px 2px 50% 50%;
  background: #cead60; box-shadow: 0 0 7px 3px #e2c77c35; opacity: .65;
  animation: seasonal-light-glow 5s var(--glow-delay) ease-in-out infinite alternate;
}
.seasonal-lights > span:nth-of-type(3n) { background: #a8ae81; }
@keyframes seasonal-light-glow { from { opacity: .45; box-shadow: 0 0 4px 1px #e2c77c20; } to { opacity: .9; box-shadow: 0 0 9px 3px #e2c77c55; } }
.seasonal-butterfly {
  position: fixed; top: 43%; right: 13px; width: 33px; height: 29px;
  pointer-events: none; user-select: none; z-index: 4; opacity: .72;
  animation: seasonal-butterfly-flight 13s ease-in-out infinite;
}
.seasonal-butterfly > svg { width: 100%; height: 100%; stroke: #8e845a; stroke-width: .9; overflow: visible; }
.butterfly-wing { fill: #d2bd82; transform-box: fill-box; animation: seasonal-butterfly-wing 1.9s ease-in-out infinite alternate; }
.butterfly-wing--left { transform-origin: right center; }
.butterfly-wing--right { transform-origin: left center; fill: #b7bc8c; }
.butterfly-body { fill: none; stroke: #697355; stroke-width: 1.5; }
@keyframes seasonal-butterfly-wing { from { transform: scaleX(.5); } to { transform: scaleX(1); } }
@keyframes seasonal-butterfly-flight {
  0%, 100% { transform: translate3d(0, 18px, 0) rotate(-10deg); }
  50% { transform: translate3d(-8px, -34px, 0) rotate(12deg); }
}
.seasonal-firework {
  position: absolute; top: 20%; left: 9%; width: 112px; height: 112px;
  color: #ad9154; opacity: 0; stroke: currentColor; stroke-width: 1.2;
  animation: seasonal-firework-bloom 16s ease-out infinite;
}
.seasonal-firework:nth-child(2) { left: auto; right: 9%; top: 34%; width: 132px; height: 132px; color: #899467; animation-delay: -8s; }
.seasonal-firework circle { fill: currentColor; stroke: none; }
@keyframes seasonal-firework-bloom {
  0% { transform: scale(.25) rotate(0deg); opacity: 0; }
  10% { opacity: .48; }
  28% { transform: scale(1) rotate(8deg); opacity: 0; }
  100% { transform: scale(1) rotate(8deg); opacity: 0; }
}
.seasonal-snow-toggle { min-height: 36px; }
.calm-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.calm-reveal.calm-visible { opacity: 1; transform: none; }
.seasonal-motion-paused .calm-reveal { opacity: 1; transform: none; transition: none; }
.seasonal-motion-paused .seasonal-lights > span { animation: none; opacity: .65; }
html.lv-motion-off { scroll-behavior: auto; }
.modal-open .seasonal-leaves, .modal-open .seasonal-butterfly, .modal-open .seasonal-fireworks { display: none; }
.modal-open .seasonal-lights > span { animation-play-state: paused; }
@media (max-width: 600px) {
  .seasonal-leaves > span { width: 12px; height: 17px; }
  .seasonal-butterfly { right: 7px; width: 27px; height: 24px; }
  .seasonal-firework { width: 80px; height: 80px; left: 4%; }
  .seasonal-firework:nth-child(2) { width: 90px; height: 90px; right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seasonal-leaves, .seasonal-butterfly, .seasonal-fireworks { display: none !important; }
  .seasonal-lights > span { animation: none !important; opacity: .65; }
  .calm-reveal { opacity: 1; transform: none; transition: none !important; }
}