/* Anchors account for transparent padding in each tree PNG and #tree's .72 ratio.
   The socket at 87% of the star image covers the upper 40% of each top shoot. */
#tree[data-stage="3"] { --topper-x: 49.4521%; --topper-y: 26.49%; --topper-width: 18.4%; }
#tree[data-stage="4"] { --topper-x: 50.4011%; --topper-y: 22.54%; --topper-width: 20%; }
#tree[data-stage="5"] { --topper-x: 49.6347%; --topper-y: 9.72%; --topper-width: 22.4%; }

.tree-topper {
  position: absolute;
  left: var(--topper-x, 50%);
  top: var(--topper-y, 0%);
  width: var(--topper-width, 22.4%);
  aspect-ratio: 1;
  transform: translate(-50%, -87%);
  pointer-events: none;
  isolation: isolate;
}
.tree-topper[hidden] { display: none; }
.tree-topper-jewel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.35) brightness(1.22) drop-shadow(0 0 2px #ff4726b3) drop-shadow(0 0 7px #f8203959);
  -webkit-user-drag: none;
}
.tree-topper-halo {
  position: absolute;
  inset: -65%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffd3a375 0%, #ff714570 15%, #ff304958 30%, #ed244030 46%, #ef294013 58%, transparent 72%);
  animation: topperHalo 2.8s ease-in-out infinite;
}
/* A small warm reflection sits on the needles below the mounting socket. */
.tree-topper-spill {
  position: absolute;
  left: 22%;
  top: 67%;
  width: 56%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 28%, #ffd28a70, #ff723c40 30%, transparent 72%);
  mix-blend-mode: screen;
  animation: topperHalo 2.8s -.8s ease-in-out infinite;
}
/* Local light spreads across the ruby glass, clipped to the original alpha.
   Separate phases make the five arms light up like a miniature garland. */
.tree-topper-illumination {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--topper-art) center / contain no-repeat;
  mask: var(--topper-art) center / contain no-repeat;
  mix-blend-mode: screen;
}
.tree-topper-illumination > i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1c594, #ff9a646e 22%, #ff392b45 44%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: topperIlluminate var(--duration) var(--delay) ease-in-out infinite;
}
.tree-topper-lights { position: absolute; inset: 0; }
.tree-topper-lights > i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  animation-delay: var(--delay);
  animation-duration: var(--duration);
  animation-iteration-count: infinite;
}
.tree-topper-bulb {
  width: 2.5%;
  height: 2.5%;
  min-width: 1.3px;
  min-height: 1.3px;
  border-radius: 50%;
  background: #fff4c9;
  box-shadow: 0 0 3px 1px #fff0b7e6, 0 0 8px 2px #ff673b99;
  transform: translate(-50%, -50%);
  animation-name: topperBulb;
  animation-timing-function: ease-in-out;
}
.tree-topper-bulb--rim {
  width: 1.5%;
  height: 1.5%;
  min-width: 1px;
  min-height: 1px;
  background: #ffe2b3;
  box-shadow: 0 0 2px 1px #ffd29b99, 0 0 5px 1px #ff4b3777;
}
.tree-topper-glint {
  width: 13%;
  height: 13%;
  background: radial-gradient(circle, #fffef3 0 8%, #fff0baed 17%, #ffd5a180 37%, transparent 70%);
  clip-path: polygon(50% 0, 58% 39%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  animation-name: topperGlint;
  animation-timing-function: ease-in-out;
}
.tree-topper-mote {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff0c3;
  box-shadow: 0 0 4px #ffb373;
  opacity: 0;
  animation-name: topperMote;
  animation-timing-function: ease-out;
}
@keyframes topperHalo {
  0%, 100% { opacity: .65; transform: scale(.94); }
  48% { opacity: 1; transform: scale(1.1); }
}
@keyframes topperIlluminate {
  0%, 100% { opacity: .08; }
  24% { opacity: .23; }
  43% { opacity: .86; }
  58% { opacity: .33; }
  74% { opacity: .55; }
  90% { opacity: .1; }
}
@keyframes topperBulb {
  0%, 100% { opacity: .06; transform: translate(-50%, -50%) scale(.6); }
  18% { opacity: .2; }
  36% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  54% { opacity: .14; transform: translate(-50%, -50%) scale(.75); }
  70% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); }
  88% { opacity: .08; }
}
@keyframes topperGlint {
  0%, 64%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-12deg); }
  76% { opacity: .95; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  88% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(12deg); }
}
@keyframes topperMote {
  0%, 55%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); }
  63% { opacity: .7; }
  88% { opacity: 0; transform: translate(var(--drift), -24px) scale(.6); }
}
.tree-topper.is-paused *, .tree-topper[hidden] * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tree-topper * { animation: none !important; }
  .tree-topper-halo, .tree-topper-spill { opacity: .65; }
  .tree-topper-bulb { opacity: .45; }
  .tree-topper-illumination > i { opacity: .2; }
  .tree-topper-glint, .tree-topper-mote { display: none; }
}

/* A second craftable ornament. Ruby keeps its original art and light palette. */
.tree-topper[data-variant="bethlehem"]{transform:translate(-50%,-85.6328125%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-jewel{filter:saturate(.92) brightness(1.08) drop-shadow(0 0 2px #fff2d5b3) drop-shadow(0 0 7px #efd19c70)}
.tree-topper[data-variant="bethlehem"] .tree-topper-halo{background:radial-gradient(ellipse,#fff5dd80 0%,#ffe8bc75 15%,#f0d39e55 30%,#e8cba230 46%,#e4dece13 58%,transparent 72%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-spill{background:radial-gradient(ellipse at 50% 28%,#fff0be70,#edc26a40 30%,transparent 72%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-illumination>i{background:radial-gradient(circle,#fffbd994,#ffe2a26e 22%,#eebf5845 44%,transparent 70%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-bulb{background:#fffbe5;box-shadow:0 0 3px 1px #fff5cce6,0 0 8px 2px #f7cb6899}
.tree-topper[data-variant="bethlehem"] .tree-topper-bulb--rim{background:#fff0ca;box-shadow:0 0 2px 1px #ffe8ac99,0 0 5px 1px #edbd5777}
.tree-topper[data-variant="bethlehem"] .tree-topper-mote{background:#fff7d6;box-shadow:0 0 4px #f7d989}

/* Match the visible upper tip to ruby, accounting for each asset’s alpha padding. */
.tree-topper[data-variant="bethlehem"] .tree-topper-illumination>i:nth-child(4n){background:radial-gradient(circle,#fffaf094,#e8edf16e 22%,#c6d9e645 44%,transparent 70%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-bulb:nth-child(5n){background:#f5f9ff;box-shadow:0 0 3px 1px #edf5ffe6,0 0 8px 2px #c7ddf199}
.tree-topper[data-variant="bethlehem"] .tree-topper-glint{background:radial-gradient(circle,#fffef8 0 8%,#fff0cfed 17%,#efcf9980 37%,transparent 70%)}
.tree-topper[data-variant="bethlehem"] .tree-topper-mote:nth-child(even){background:#f3f7ff;box-shadow:0 0 4px #d2e2f5}

/* Keep the mounting sleeve quiet: sparkle belongs on the ornament, not the joint. */
.tree-topper[data-variant="bethlehem"] .tree-topper-illumination{clip-path:inset(0 0 18% 0)}
.tree-topper[data-variant="bethlehem"] .tree-topper-spill{animation:none;opacity:.3}