/* Isolated shared embed; the player owns all animation styles in its iframe. */
.emp-explainer { --plum:#3a1f3e; --purple:#4f2854; --yellow:#ffcc00; --lavender:#aba3bb; width:100%; max-width:100%; grid-column:1/-1; margin:32px auto; text-align:center; }
.emp-explainer .ep-stage, .emp-explainer .ep-stage * { box-sizing:border-box; }
.emp-explainer .ep-stage img { display:block; margin:0; max-width:100%; object-fit:contain; }
.emp-explainer .ep-stage p { margin:0; }
.emp-explainer .ep-visually-hidden { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.emp-explainer .ep-bar a { color:#fef8ff; }
.emp-explainer .ep-roles { margin:0!important; padding:0!important; list-style:none!important; }
.emp-explainer .ep-stage {
  position: relative;
  width: min(600px, 100%);
  margin: 26px auto 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--plum);
  box-shadow: 0 34px 80px -34px rgba(58, 31, 62, .6), 0 2px 0 rgba(58, 31, 62, .06);
  container-type: inline-size;
}

.emp-explainer .ep-poster { position: relative; aspect-ratio: 1 / 1; background: #fef8ff; }
.emp-explainer .ep-poster-image { width: 100%; height: 100%; }

/* The three role cards of the poster, at the same places in every language. */
.emp-explainer .ep-roles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.emp-explainer .ep-role { position: absolute; top: 30.67%; width: 26.41%; height: 43.93%; }
.emp-explainer .ep-role--1 { left: 7.4%; }
.emp-explainer .ep-role--2 { left: 36.79%; }
.emp-explainer .ep-role--3 { left: 66.19%; }
.emp-explainer .ep-role a {
  display: block; width: 100%; height: 100%;
  border-radius: 2.1cqi;
  transition: box-shadow .16s ease, transform .16s ease;
}
.emp-explainer .ep-role a:hover { box-shadow: 0 0 0 3px var(--purple), 0 18px 40px -18px rgba(58, 31, 62, .55); transform: translateY(-3px); }
.emp-explainer .ep-role a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 2.1cqi; box-shadow: 0 0 0 3px var(--purple); }

.emp-explainer .ep-poster-hint {
  position: absolute; top: 80.5%; left: 8%; right: 8%;
  color: var(--plum);
  font-size: clamp(14px, 2.9cqi, 18px); font-weight: 500; line-height: 1.35;
}

.emp-explainer .ep-loading {
  position: absolute; inset: 0;
  display: none; place-content: center; justify-items: center; gap: 14px;
  background: rgba(254, 248, 255, .86);
  color: var(--plum); font-size: 16px; font-weight: 500;
}
.emp-explainer .ep-stage.is-loading .ep-loading { display: grid; }
.emp-explainer .ep-stage.is-loading .ep-loading::before {
  content: ""; width: 38px; height: 38px;
  border: 3px solid rgba(79, 40, 84, .2); border-top-color: var(--purple); border-radius: 50%;
  animation: ep-spin .9s linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }

.emp-explainer .ep-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 0 16px 0 12px;
  color: #fef8ff;
}
.emp-explainer .ep-play {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 16px 0 6px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.emp-explainer .ep-play svg { width: 30px; height: 30px; padding: 8px 7px 8px 9px; border-radius: 50%; background: var(--yellow); fill: var(--plum); }
.emp-explainer .ep-play:hover { background: rgba(254, 248, 255, .08); }
.emp-explainer .ep-play:focus-visible { outline-color: var(--yellow); }
.emp-explainer .ep-meta { color: var(--lavender); font-size: 14px; }

/* The film in place of its poster: a square frame plus the player's 56 px bar. */
.emp-explainer .ep-frame { display: block; width: 100%; height: calc(100cqi + 56px); border: 0; background: var(--plum); }
.emp-explainer .ep-stage.is-loading .ep-frame { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.emp-explainer .ep-stage.is-playing .ep-poster, .emp-explainer .ep-stage.is-playing .ep-bar { display: none; }


@media(max-width:640px){.emp-explainer .ep-stage{margin-top:20px;border-radius:18px;}}