.castle-pair {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: #efe6d0;
  transition: opacity .55s ease;
}
.castle-fit {
  position: relative;
  width: min(100%, calc(100svh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
}
.castle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .36s ease;
}
.castle-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255,244,214,.22), transparent 56%);
  transition: opacity .42s ease, background .42s ease;
  pointer-events: none;
}
.castle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.castle-core,
.castle-lamps i,
.castle-gather i,
.castle-flyers b,
.castle-rest i {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,230,.96) 0 16%, rgba(232,190,80,.72) 34%, rgba(232,190,80,0) 70%);
  box-shadow: 0 0 18px 6px rgba(236, 196, 96, .32);
}
.castle-core {
  left: 50%;
  top: 38%;
  width: 46px;
  height: 46px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  background: radial-gradient(circle, rgba(255,252,236,.95) 0 12%, rgba(236,196,90,.55) 32%, rgba(236,196,90,0) 70%);
  box-shadow: 0 0 28px 10px rgba(236, 196, 96, .28);
}
.castle-lamps i,
.castle-gather i,
.castle-rest i {
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  transition: opacity .8s ease, transform .9s ease;
  transition-delay: var(--d, 0s);
  box-shadow: 0 0 22px 8px rgba(236, 196, 96, .38);
}
.castle-core i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.castle-flyers b {
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 0%;
  box-shadow: 0 0 16px 6px rgba(236, 196, 96, .4);
}

.event-stage[data-event="2"] .castle-pair,
.event-stage[data-event="3"] .castle-pair {
  opacity: 1;
}
.event-stage[data-event="2"] .castle-img-28 {
  opacity: 1;
}
.event-stage[data-event="3"] .castle-img-28 {
  opacity: 0;
}
.event-stage[data-event="3"] .castle-img-29 {
  opacity: 1;
}
.event-stage[data-event="2"] .castle-core,
.event-stage[data-event="3"] .castle-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}
.event-stage.is-crossing .castle-veil {
  opacity: 1;
  background: radial-gradient(circle at 50% 38%, rgba(255,247,226,.38), rgba(255,236,196,.12) 46%, transparent 70%);
}

.event-stage.is-resetting .castle-core,
.event-stage.is-resetting .castle-lamps i,
.event-stage.is-resetting .castle-gather i,
.event-stage.is-resetting .castle-flyers b,
.event-stage.is-resetting .castle-rest i {
  animation: none !important;
  transition: none !important;
}
.event-stage.is-play-28 .castle-core {
  animation: castle-core-in 4.4s ease forwards;
}
.event-stage.is-play-28 .castle-lamps i {
  opacity: .92;
  transform: translate(-50%, -50%) scale(1);
}
.event-stage.is-play-28.is-lit .castle-lamps i {
  animation: castle-breathe 2.8s ease-in-out infinite;
  animation-delay: 0s;
}
.event-stage.is-play-28.is-gather .castle-gather i {
  animation: castle-to-core 1.15s ease forwards;
  transition: none;
}

.event-stage.is-play-29 .castle-core {
  animation: castle-core-fly 3.35s ease forwards;
}
.event-stage.is-play-29 .castle-gather i {
  animation: castle-left-gather 1.05s ease forwards;
}
.event-stage.is-play-29 .castle-gather i:nth-child(1) { --x: 22%; --y: 18%; animation-delay: 0s; }
.event-stage.is-play-29 .castle-gather i:nth-child(2) { --x: 30%; --y: 22%; animation-delay: .12s; }
.event-stage.is-play-29 .castle-gather i:nth-child(3) { --x: 16%; --y: 20%; animation-delay: .2s; }
.event-stage.is-play-29 .castle-gather i:nth-child(4) { --x: 34%; --y: 34%; animation-delay: .28s; }
.event-stage.is-play-29 .castle-flyers b {
  animation: castle-fly 3.15s ease forwards;
}
.event-stage.is-play-29 .castle-flyers b:nth-child(1) { animation-delay: .7s; width: 10px; height: 10px; }
.event-stage.is-play-29 .castle-flyers b:nth-child(2) { animation-delay: .86s; width: 6px; height: 6px; }
.event-stage.is-play-29 .castle-flyers b:nth-child(3) { animation-delay: 1s; width: 8px; height: 8px; }
.event-stage.is-play-29 .castle-flyers b:nth-child(4) { animation-delay: 1.14s; width: 7px; height: 7px; }
.event-stage.is-play-29 .castle-flyers b:nth-child(5) { animation-delay: 1.28s; width: 9px; height: 9px; }
.event-stage.is-play-29 .castle-lamps i {
  opacity: 0;
  animation: none;
}
.event-stage.is-play-29 .castle-rest i {
  opacity: .88;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: var(--d);
}
.event-stage.is-play-29 .castle-fit::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 12%;
  width: 46%;
  height: 48%;
  border-radius: 46%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,232,170,.2), transparent 72%);
  animation: castle-reverse-glow 3.5s ease forwards;
  pointer-events: none;
}

@keyframes castle-core-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.32); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(.85); }
  26% { opacity: .96; transform: translate(-50%, -50%) scale(1.55); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
}
@keyframes castle-lamp-on {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  42% { opacity: .92; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: .86; transform: translate(-50%, -50%) scale(1); }
}
@keyframes castle-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes castle-to-core {
  0% { left: var(--x); top: var(--y); opacity: .7; transform: translate(-50%, -50%) scale(.9); }
  100% { left: 50%; top: 38%; opacity: .85; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes castle-left-gather {
  0% { left: var(--x); top: var(--y); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  18% { opacity: .9; }
  100% { left: 50%; top: 38%; opacity: .8; transform: translate(-50%, -50%) scale(.95); }
}
@keyframes castle-core-fly {
  0% { left: 50%; top: 38%; opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  22% { left: 58%; top: 34%; }
  58% { left: 68%; top: 36%; }
  100% { left: 76%; top: 28%; opacity: .88; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes castle-fly {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: .9; }
  78% { opacity: .8; }
  100% { offset-distance: 100%; opacity: .45; }
}
@keyframes castle-reverse-glow {
  0%, 42% { opacity: 0; }
  100% { opacity: 1; }
}

.event-stage.is-castle-still .castle-core,
.event-stage.is-castle-still .castle-lamps i,
.event-stage.is-castle-still .castle-gather i,
.event-stage.is-castle-still .castle-flyers b,
.event-stage.is-castle-still .castle-rest i {
  transition: none;
}
.event-stage.is-castle-still[data-event="2"] .castle-core,
.event-stage.is-castle-still[data-event="2"] .castle-lamps i {
  opacity: .84;
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}
.event-stage.is-castle-still[data-event="3"] .castle-core {
  left: 76%;
  top: 28%;
  opacity: .88;
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
}
.event-stage.is-castle-still[data-event="3"] .castle-flyers b {
  offset-distance: 100%;
  opacity: .42;
  animation: none;
}
.event-stage.is-castle-still[data-event="3"] .castle-rest i {
  opacity: .8;
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}
.event-stage.is-castle-still[data-event="3"] .castle-fit::after {
  opacity: 1;
  animation: none;
}

@media (max-width: 899px) {
  .castle-fit {
    width: min(100% - 12px, 100%);
  }
  .castle-core { width: 32px; height: 32px; }
  .castle-lamps i,
  .castle-gather i,
  .castle-rest i { width: 20px; height: 20px; }
  .castle-flyers b { width: 11px; height: 11px; }
  .castle-lamps i:nth-child(4) { --x: 7%; }
  .castle-lamps i:nth-child(9) { --x: 84%; }
  .castle-flyers b:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .castle-img,
  .castle-pair,
  .castle-veil,
  .castle-core,
  .castle-lamps i,
  .castle-gather i,
  .castle-flyers b,
  .castle-rest i {
    transition: none;
  }
  .event-stage[data-event="2"] .castle-core,
  .event-stage[data-event="2"] .castle-lamps i {
    opacity: .84;
    transform: translate(-50%, -50%) scale(1);
    animation: none;
  }
  .event-stage[data-event="3"] .castle-core {
    left: 76%;
    top: 28%;
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.05);
    animation: none;
  }
  .event-stage[data-event="3"] .castle-flyers b {
    offset-distance: 100%;
    opacity: .42;
    animation: none;
  }
  .event-stage[data-event="3"] .castle-rest i {
    opacity: .8;
    animation: none;
  }
  .event-stage[data-event="3"] .castle-fit::after {
    opacity: 1;
    animation: none;
  }
}