/* ODDWOO WINTER HEADER – December-only magic */
.headimage {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.headimage .main-header {
  display: block;
  width: 100%;
  height: auto;
}

/* Crisp tiled snow ledge with soft overhang */
.headimage .snow-ledge-tiled {
  position: absolute;
  left: 0;
  bottom: -13px;                    /* tweak this to move up/down */
  width: 100%;
  height: 50px;                     /* taller container = more overhang */
  background: url("../images/snow-a.png") repeat-x bottom center;
  background-size: auto 35px;
  pointer-events: none;
  z-index: 10;
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
          mask-image: linear-gradient(to top, black 50%, transparent 100%);
}

/* Swirling falling snow layers */
.headimage::before,
.headimage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: screen;
}
.headimage::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cstyle%3E.c%7Bopacity:0.35;fill:%23fff%7D%3C/style%3E%3Ccircle class='c' cx='8' cy='6' r='1'/%3E%3Ccircle class='c' cx='42' cy='8' r='1'/%3E%3Ccircle class='c' cx='15' cy='18' r='1'/%3E%3Ccircle class='c' cx='35' cy='42' r='1'/%3E%3Ccircle class='c' cx='28' cy='12' r='1'/%3E%3C/svg%3E") repeat;
  background-size: 60px 60px;
  animation: fall1 20s linear infinite, swirl1 28s linear infinite;
}
.headimage::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cstyle%3E.c%7Bopacity:0.22;fill:%23fff%7D%3C/style%3E%3Ccircle class='c' cx='10' cy='15' r='1'/%3E%3Ccircle class='c' cx='40' cy='5' r='1'/%3E%3Ccircle class='c' cx='22' cy='38' r='1'/%3E%3Ccircle class='c' cx='8' cy='30' r='1'/%3E%3C/svg%3E") repeat;
  background-size: 50px 50px;
  animation: fall2 15s linear infinite, swirl2 22s linear infinite reverse;
}

@keyframes fall1 { from { background-position-y: 0 }     to { background-position-y: 0 600px } }
@keyframes fall2 { from { background-position-y: 0 }     to { background-position: 0 700px } }
@keyframes swirl1 { from { background-position: 0 0 }    to { background-position: 200px 600px } }
@keyframes swirl2 { from { background-position: 0 0 }    to { background-position: -180px 700px } }

@media (min-width: 1024px) {
  .headimage::before { background-size: 80px 80px; }
  .headimage::after  { background-size: 70px 70px; }
}