/* Atklāj Ziemassvētku animācijas: adventes durtiņas, kas atveras pa vienai, un kamanas, kas pārlido.
 * Lieto publiskajās Ziemassvētku lapās un organizatora Ziemassvētku sadaļā.
 * Durtiņas: <div class="xfx-doors"><span class="xfx-door" style="--i:0"><svg class="xfx-door__g">…</svg><b>1</b></span>…</div>
 * Kamanas: <div class="xfx-sky"><svg class="xfx-sleigh">…</svg></div> konteinerā ar position:relative. */

.xfx-doors{--cols:6;--leaf:linear-gradient(135deg,#b91c1c,#7f1d1d);--dur:11s;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;perspective:700px}
.xfx-door{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fffbea 0,#fde68a 70%,#f59e0b 130%);box-shadow:inset 0 2px 6px rgba(120,53,15,.35);color:#991b1b;line-height:1}
.xfx-door__g{width:46%;height:46%;transform:scale(.4);opacity:0;animation:xfxPop var(--dur) ease-in-out infinite;animation-delay:calc(var(--i,0) * .4s)}
.xfx-door>b{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:var(--leaf);color:#fff;font-size:clamp(.7rem,2.2vw,1rem);font-weight:900;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.18);transform-origin:left center;backface-visibility:hidden;animation:xfxOpen var(--dur) cubic-bezier(.5,0,.25,1) infinite;animation-delay:calc(var(--i,0) * .4s)}
.xfx-door>b::after{content:"";position:absolute;right:16%;top:50%;width:4px;height:4px;border-radius:50%;background:#fcd34d;box-shadow:0 0 4px #fcd34d}
.xfx-door:nth-child(3n+2)>b{background:linear-gradient(135deg,#166534,#14532d)}
.xfx-door:nth-child(3n)>b{background:linear-gradient(135deg,#1e3a8a,#172554)}
@keyframes xfxOpen{0%,3%{transform:rotateY(0)}10%,62%{transform:rotateY(-112deg)}72%,100%{transform:rotateY(0)}}
@keyframes xfxPop{0%,4%{transform:scale(.4);opacity:0}11%{transform:scale(1.25);opacity:1}15%,62%{transform:scale(1);opacity:1}70%,100%{transform:scale(.4);opacity:0}}

/* Kamanas ar briežiem */
.xfx-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.xfx-sleigh{position:absolute;top:var(--sky-top,14%);left:0;width:var(--sky-w,210px);height:auto;opacity:0;filter:drop-shadow(0 0 10px rgba(253,230,138,.55));animation:xfxFly var(--sky-dur,18s) linear infinite;animation-delay:var(--sky-delay,1.5s)}
.xfx-sleigh .xfx-deer{animation:xfxGallop .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.xfx-sleigh .xfx-deer+.xfx-deer{animation-delay:.25s}
@keyframes xfxFly{0%{opacity:0;transform:translate(-260px,40px) rotate(-4deg)}3%{opacity:1}36%{opacity:1;transform:translate(calc(100vw + 40px),-30px) rotate(-8deg)}37%,100%{opacity:0;transform:translate(calc(100vw + 40px),-30px)}}
@keyframes xfxGallop{from{transform:translateY(0)}to{transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  .xfx-door>b,.xfx-door__g,.xfx-sleigh,.xfx-sleigh .xfx-deer{animation:none}
  .xfx-door:nth-child(-n+4)>b{transform:rotateY(-112deg)}
  .xfx-door:nth-child(-n+4) .xfx-door__g{transform:none;opacity:1}
  .xfx-sleigh{opacity:1;transform:translate(24px,0);left:auto;right:4%}
}