/* Ambient geisha — fixed overlay, highest page-layer priority */
.geisha-mascot {
  --geisha-size: clamp(124px, 17vw, 208px);
  --geisha-z: 9998;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--geisha-z);
  width: var(--geisha-size);
  height: var(--geisha-size);
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0) scaleX(1);
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 10px 22px rgba(18, 8, 12, 0.22));
}

.geisha-mascot.is-visible {
  opacity: 0.94;
}

.geisha-mascot.is-fading {
  opacity: 0;
}

.geisha-mascot__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.geisha-mascot__poster {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

@media (min-width: 1280px) {
  .geisha-mascot {
    --geisha-size: clamp(148px, 13vw, 232px);
  }
}

@media (min-width: 1600px) {
  .geisha-mascot {
    --geisha-size: clamp(160px, 11vw, 248px);
  }
}

@media (max-width: 1024px) {
  .geisha-mascot {
    --geisha-size: clamp(108px, 20vw, 156px);
  }

  .geisha-mascot.is-visible {
    opacity: 0.9;
  }
}

@media (max-width: 767px) {
  .geisha-mascot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .geisha-mascot {
    display: none;
  }
}