.crownlands-map-transition { --bat-start-x: 110vw; --bat-start-y: 0px; --bat-exit-x: -110vw; --bat-exit-y: 0px; }
.crownlands-map-transition--north { --bat-start-x: 0px; --bat-start-y: -110vh; --bat-exit-x: 0px; --bat-exit-y: 110vh; }
.crownlands-map-transition--south { --bat-start-x: 0px; --bat-start-y: 110vh; --bat-exit-x: 0px; --bat-exit-y: -110vh; }
.crownlands-map-transition--west { --bat-start-x: -110vw; --bat-exit-x: 110vw; }

/* October 2026: a flapping flock crosses a dusk veil. */
.crownlands-map-transition[data-theme="halloween"] .crownlands-map-transition__part--mist {
  background:
    radial-gradient(ellipse at 32% 38%, #c2aca1, #98848f 52%, #655870 100%),
    #98848f;
}

.crownlands-map-transition[data-theme="halloween"] :is(.crownlands-map-transition__part--cloud-back, .crownlands-map-transition__part--cloud-front) {
  filter: none;
  mix-blend-mode: normal;
}

.crownlands-map-transition[data-theme="halloween"] .crownlands-map-transition__part--cloud-back {
  --map-cloud-layer-opacity: .12;
  background-image: url("assets/optimized/map-transition-halloween-512x512-85e000346b96.webp");
  background-position: 73% 22%;
  background-size: clamp(380px, 43vw, 620px) auto;
}

.crownlands-map-transition[data-theme="halloween"] .crownlands-map-transition__part--cloud-front {
  inset: 0;
  background: none;
  opacity: 1;
  transform: none;
  animation: none;
  will-change: auto;
}

.crownlands-map-bat {
  position: absolute;
  width: clamp(30px, var(--bat-size), 148px);
  aspect-ratio: 2 / 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: crownlandsMapBatCover calc(var(--map-cover-duration) - var(--bat-delay)) cubic-bezier(.16,.64,.3,1) var(--bat-delay) both;
}

.crownlands-map-bat__flight {
  position: absolute;
  inset: 0;
  transform: rotate(var(--bat-tilt));
  animation: crownlandsMapBatFloat 680ms ease-in-out var(--bat-phase) infinite alternate;
}

.crownlands-map-bat__left,
.crownlands-map-bat__right {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cdefs%3E%3ClinearGradient id='w' x2='.8' y2='1'%3E%3Cstop stop-color='%235b4049'/%3E%3Cstop offset='1' stop-color='%23251e2c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M98 47C74 29 49 12 3 5C9 22 13 38 12 60C27 44 38 54 43 75C52 57 65 59 71 86C81 65 90 64 98 66Z' fill='url(%23w)' stroke='%238d6d6a' stroke-width='1.2'/%3E%3Cpath d='M3 5L98 55M12 60Q48 34 98 55M43 75Q64 42 98 55M71 86Q82 50 98 55' fill='none' stroke='%23997870' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 100% 58%;
  animation: crownlandsMapBatWing var(--bat-beat) ease-in-out var(--bat-phase) infinite alternate;
}

.crownlands-map-bat__right {
  scale: -1 1;
}

.crownlands-map-bat__body {
  position: absolute;
  left: 44%;
  top: 35%;
  width: 12%;
  height: 46%;
  background: linear-gradient(90deg, #251e2c, #58404a 48%, #251e2c);
  clip-path: polygon(6% 0, 40% 20%, 60% 20%, 94% 0, 86% 48%, 100% 66%, 50% 100%, 0 66%, 14% 48%);
}

.crownlands-map-transition[data-theme="halloween"].is-entering .crownlands-map-bat {
  animation: crownlandsMapBatReveal calc(var(--map-transition-duration) - var(--bat-delay)) ease-in var(--bat-delay) both;
}

@keyframes crownlandsMapBatCover {
  from { opacity: 0; transform: translate3d(var(--bat-start-x), var(--bat-start-y), 0) rotate(-18deg); }
  35% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes crownlandsMapBatReveal {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate3d(var(--bat-exit-x), var(--bat-exit-y), 0) rotate(16deg); }
}

@keyframes crownlandsMapBatWing {
  from { transform: rotateX(-18deg) rotateY(-12deg) rotate(-9deg); }
  to { transform: rotateX(24deg) rotateY(62deg) rotate(12deg); }
}

@keyframes crownlandsMapBatFloat {
  from { transform: translate3d(0, -4px, 0) rotate(var(--bat-tilt)); }
  to { transform: translate3d(5px, 4px, 0) rotate(calc(var(--bat-tilt) + 5deg)); }
}

@media (max-width: 899px) {
  .crownlands-map-bat { width: calc(var(--bat-size) * .7); }
}


html[data-animation-mode="reduced"] .crownlands-map-bat,
html[data-animation-mode="reduced"] .crownlands-map-bat * {
  animation: none;
}