/* The stage supplies atmosphere; every decorative surface lets input through. */
.em-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.em-atmosphere[hidden] { display: none; }

/* WAAPI owns only text children, never chapter or image transforms. */
.em-reveal-managed { animation: none !important; }

.em-image { --em-x: 50%; --em-y: 50%; --em-offset-x: 0px; --em-offset-y: 0px; }
.em-image > .em-image-treatment {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  color: #edf1f6;
}
.em-image .em-image-treatment > .em-image-sheen {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 48% 65% at var(--em-x) var(--em-y), #ffffff20, #e3ebf60a 48%, transparent 82%),
    linear-gradient(135deg, #ffffff07, transparent 36%, #1019230c);
  box-shadow: inset 0 0 0 1px #eef3fb3d, inset 0 -28px 42px -35px #09101935;
  transition: opacity 480ms cubic-bezier(.18,.75,.18,1);
}
.em-image .em-view-cursor {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  position: absolute;
  left: clamp(45px, var(--em-x), calc(100% - 45px));
  top: clamp(45px, var(--em-y), calc(100% - 45px));
  right: auto;
  bottom: auto;
  width: 76px;
  height: 76px;
  border: 1px solid #f2f5fa80;
  border-radius: 50%;
  background: #111820b5;
  color: #f6f8fc;
  box-shadow: 0 8px 26px #09111a26, inset 0 1px 0 #ffffff18;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(calc(-50% + var(--em-offset-x)), calc(-50% + var(--em-offset-y))) scale(.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 550ms cubic-bezier(.18,.75,.18,1), left 140ms ease-out, top 140ms ease-out;
}
.em-image .em-view-cursor > .em-view-label,
.em-image .em-view-cursor > .em-view-arrow {
  display: block;
  position: static;
  color: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.em-image .em-view-cursor > .em-view-label { font-size: 9px; letter-spacing: .12em; }
.em-image .em-view-cursor > .em-view-arrow {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.em-image.em-image-active .em-image-sheen { opacity: 1; }
.em-image.em-image-active .em-view-cursor {
  opacity: 1;
  transform: translate(calc(-50% + var(--em-offset-x)), calc(-50% + var(--em-offset-y))) scale(1);
}
.em-image > .image-open { transition: opacity 200ms ease; }
.em-image.em-image-active > .image-open { opacity: 0; }

body.reduce-motion .em-atmosphere,
body.reduce-motion .em-image-treatment { display: none !important; }
@media (hover: none), (pointer: coarse) {
  .em-image-treatment { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .em-atmosphere, .em-image-treatment { display: none !important; }
}